maptalks 开发GIS地图（28）maptalks.three.21- custom-cloud
1. 白云效果，是真的白云效果。
2. 白云效果的材质
1 function generateTextureCanvas() { 2 // build a small canvas 32x64 and paint it in white 3 var canvas = document.createElement("canvas"); 4 canvas.width = 32; 5 canvas.height = 64; 6 var context = canvas.getContext("2d"); 7 // plain it in white 8 context.fillStyle = "#ffffff"; 9 context.fillRect(0, 0, 32, 64); 10 // draw the window rows - with a small noise to simulate light variations in each room 11 for (var y = 2; y < 64; y += 2) { 12 for (var x = 0; x < 32; x += 2) { 13 var value = Math.floor(Math.random() * 64); 14 context.fillStyle = "rgb(" + [value, value, value].join(",") + ")"; 15 context.fillRect(x, y, 2, 1); 16 } 17 } 18 19 // build a bigger canvas and copy the small one in it 20 // This is a trick to upscale the texture without filtering 21 var canvas2 = document.createElement("canvas"); 22 canvas2.width = 512; 23 canvas2.height = 1024; 24 var context = canvas2.getContext("2d"); 25 // disable smoothing 26 context.imageSmoothingEnabled = false; 27 context.webkitImageSmoothingEnabled = false; 28 context.mozImageSmoothingEnabled = false; 29 // then draw the image 30 context.drawImage(canvas, 0, 0, canvas2.width, canvas2.height); 31 // return the just built canvas2 32 return canvas2; 33 }
3. 白云的类扩展对象
1 class Cloud extends maptalks.BaseObject { 2 constructor(coordinate, options, material, layer) { 3 options = maptalks.Util.extend({}, OPTIONS, options, { layer, coordinate }); 4 super(); 5 //Initialize internal configuration 6 // https://github.com/maptalks/maptalks.three/blob/1e45f5238f500225ada1deb09b8bab18c1b52cf2/src/BaseObject.js#L135 7 this._initOptions(options); 8 const { altitude, width, height } = options; 9 //generate geometry 10 const w = layer.distanceToVector3(width, width).x; 11 const h = layer.distanceToVector3(width, width).x; 12 const geometry = new THREE.PlaneBufferGeometry(w, h); 13 14 //Initialize internal object3d 15 // https://github.com/maptalks/maptalks.three/blob/1e45f5238f500225ada1deb09b8bab18c1b52cf2/src/BaseObject.js#L140 16 // this._createMesh(geometry, material); 17 this._createGroup(); 18 const mesh = new THREE.Mesh(geometry, material); 19 this.getObject3d().add(mesh); 20 21 //set object3d position 22 const z = layer.distanceToVector3(altitude, altitude).x; 23 const position = layer.coordinateToVector3(coordinate, z); 24 this.getObject3d().position.copy(position); 25 26 const random = Math.random(); 27 const flag = random <= 0.3 ? "x" : random < 0.6 ? "y" : "z"; 28 this.positionflag = flag; 29 const offset = Math.min(w, h); 30 this.offset = offset; 31 this._offset = 0; 32 this._offsetAdd = random > 0.5; 33 } 34 35 // test animation 36 _animation() { 37 const map = this.getMap(); 38 const bearing = map.getBearing(), 39 pitch = map.getPitch(); 40 this.getObject3d().children[0].rotation.x = (pitch * Math.PI) / 180; 41 this.getObject3d().rotation.z = (-bearing * Math.PI) / 180; 42 43 const offset = 0.001 * 5; 44 if (this._offsetAdd) { 45 this._offset += offset; 46 this.getObject3d().position[this.positionflag] += offset; 47 if (this._offset >= this.offset) { 48 this._offsetAdd = false; 49 } 50 } else { 51 this._offset -= offset; 52 this.getObject3d().position[this.positionflag] -= offset; 53 if (this._offset <= -this.offset) { 54 this._offsetAdd = true; 55 } 56 } 57 } 58 }
4. 添加白云
1 clouds = lnglats.map(function (lnglat) { 2 const cloud = new Cloud( 3 lnglat, 4 { 5 altitude: Math.random() * 1000 + 500 6 }, 7 material, 8 threeLayer 9 ); 10 return cloud; 11 }); 12 threeLayer.addMesh(clouds);
5. 页面显示
6.源码地址
https://github.com/WhatGIS/maptalkMap/tree/main/threelayer/demo
