maptalks 开发GIS地图(41)maptalks.three.34- custom-ocean
开发 地图 Custom GIS 41
2023-09-11 14:21:35 时间
1. 自定义海洋效果 , 与前面的 coolwater 效果差不多,coolwater 的效果好像是
使用两个图片作为 ShaderMaterial,
2. 数据使用 ./data/westlake.geojson , 背景图片使用 ./data/waternormals.jpg
3. 定义Ocean扩展类
1 class Ocean extends maptalks.BaseObject { 2 constructor(polygon, options, layer) { 3 options = maptalks.Util.extend({}, OPTIONS, options, { layer, polygon }); 4 if (!options.waterNormals) { 5 throw new Error('waterNormals is null'); 6 } 7 super(); 8 //Initialize internal configuration 9 // https://github.com/maptalks/maptalks.three/blob/1e45f5238f500225ada1deb09b8bab18c1b52cf2/src/BaseObject.js#L135 10 this._initOptions(options); 11 12 const waterNormalsTexture = new THREE.TextureLoader().load(options.waterNormals); 13 waterNormalsTexture.wrapS = waterNormalsTexture.wrapT = THREE.RepeatWrapping; 14 options.waterNormals = waterNormalsTexture; 15 16 const water = new THREE.Water( 17 layer.getThreeRenderer(), 18 layer.getCamera(), 19 layer.getScene(), 20 options 21 ); 22 const geometry = getOceanGeometry(polygon, layer); 23 this._createMesh(geometry, water.material); 24 25 this.getObject3d().add(water); 26 this.water = water; 27 //set object3d position 28 const { altitude } = options; 29 const z = layer.distanceToVector3(altitude, altitude).x; 30 const center = polygon.getCenter(); 31 const v = layer.coordinateToVector3(center, z); 32 this.getObject3d().position.copy(v); 33 34 } 35 36 37 getSymbol() { 38 return this.water.material; 39 } 40 41 42 setSymbol(material) { 43 this.water.material = material; 44 return this; 45 } 46 47 48 _animation() { 49 const water = this.water; 50 water.material.uniforms.time.value += 1.0 / 60.0; 51 water.render(); 52 } 53 }
4. 添加数据
1 var oceans; 2 function addOcean() { 3 fetch('./data/westlake.geojson').then(function (res) { 4 return res.text(); 5 }).then(function (geojson) { 6 var polygons = maptalks.GeoJSON.toGeometry(geojson); 7 oceans = polygons.map(p => { 8 var ocean = new Ocean(p, { 9 // altitude: 2, 10 waterNormals: './data/waternormals.jpg' 11 }, threeLayer) 12 return ocean; 13 }); 14 15 threeLayer.addMesh(oceans); 16 17 initGui(); 18 threeLayer.config('animation', true); 19 animation(); 20 }) 21 }
5. 页面显示
6. 源码地址
https://github.com/WhatGIS/maptalkMap/tree/main/threelayer/demo
相关文章
- qt实现web服务器加载vue应用进行C++和html混合编程-连载【6】-企业级系统开发实战连载系列 -技术栈(vue、element-ui、qt、c++、sqlite)
- php后台开发(二)Laravel框架
- RKNN NPU开发文档
- 开发中那些难题以及那些哭笑不得的解决过程
- HealthKit开发快速入门教程之HealthKit数据的操作
- 谷歌公司重新思考开发数据中心存储技术
- 什么是 Nvidia Omniverse,为什么它在 AR/VR 开发方面如此先进,以及为什么我们需要这种沉浸式技术?
- iOS 开发中的争议(二)
- iOS开发系列--地图与定位
- Vue+Echarts监控大屏实例十六:Echarts对接天地图插件开发
- arcgis api 3.x for js 入门开发系列十三地图最短路径分析(附源码下载)
- arcgis api 3.x for js 入门开发系列三地图工具栏(附源码下载)
- 鸿蒙开发实例|分布式文件服务
- 华为云从入门到实战 | AI云开发ModelArts入门与WAF应用与部署
- Flutter开发 -flutter百度地图接入指南,外加定位,反地理编码,这些功能组成一个类似饿了么的配送员配送界面,这些功能你心动么?
- maptalks 开发GIS地图(38)maptalks.three.31- custom-linetrip
- maptalks 开发GIS地图(37)maptalks.three.30- custom-linetrail
- maptalks 开发GIS地图(33)maptalks.three.26- custom-geotiffplan
- maptalks 开发GIS地图(32)maptalks.three.25- custom-flight-path
- maptalks 开发GIS地图(28)maptalks.three.21- custom-cloud
- maptalks 开发GIS地图(23)maptalks.three.16 - custom-arcline
- maptalks 开发GIS地图(17)maptalks.three.10 - boxes
- maptalks 开发GIS地图(16)maptalks.three.09 - box-stack
- maptalks 开发GIS地图(12)maptalks.three.05 bar-music
- 工具及方法 - 电子烟开发中使用温度测试工具
- RabbitMQ之Direct交换器模式开发