maptalks 开发GIS地图（41）maptalks.three.34- custom-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         }

 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         }