1. image plane 与前面的 geotiff plane 在效果上是类似的。
2. 加载的图片地址 https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*8SUaRr7bxNsAAAAAAAAAAABkARQnAQ
3. 自定义ImagePlane扩展类
1 class ImagePlane extends maptalks.BaSEObject { 2 constructor(extent, options, material, layer) { 3 options = maptalks.Util.extend({}, OPTIONS, options, { layer, extent }); 4 const { texture, altitude, imageHeight, imageWidth, factor, filterIndex } = options; 5 if (!(extent instanceof maptalks.Extent)) { 6 extent = new maptalks.Extent(extent); 7 } 8 const { xmin, ymin, xmax, ymax } = extent; 9 const coords = [ 10 [xmin, ymin], 11 [xmin, ymax], 12 [xmax, ymax], 13 [xmax, ymin] 14 ]; 15 let vxmin = Infinity, vymin = Infinity, vxmax = -Infinity, vymax = -Infinity; 16 coords.forEach(coord => { 17 const v = layer.coordinatetoVector3(coord); 18 const { x, y } = v; 19 vxmin = Math.min(x, vxmin); 20 vymin = Math.min(y, vymin); 21 vxmax = Math.max(x, vxmax); 22 vymax = Math.max(y, vymax); 23 }); 24 const w = Math.abs(vxmax - vxmin), h = Math.abs(vymax - vymin); 25 const img = generateImage(texture); 26 const geometry = new THREE.PlaneBufferGeometry(w, h, imageWidth - 1, imageHeight - 1); 27 super(); 28 this._initOptions(options); 29 this._createMesh(geometry, material); 30 const z = layer.distancetoVector3(altitude, altitude).x; 31 const v = layer.coordinatetoVector3(extent.getCenter(), z); 32 this.getobject3d().position.copy(v); 33 material.transparent = true; 34 if (img) { 35 textureLoader.load(img.src, (texture) => { 36 material.map = texture; 37 material.opacity = 1; 38 material.needsUpdate = true; 39 this.fire('load'); 40 }); 41 } else { 42 material.opacity = 1; 43 } 44 } 45 }
1 const image = new ImagePlane([113.1277263548, 32.3464238863, 118.1365790452, 36.4786759137], { 2 texture: 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*8SUaRr7bxNsAAAAAAAAAAABkARQnAQ' 3 }, material, threeLayer); 4 threeLayer.addMesh(image);
6. 源码地址
https://github.com/WhatGIS/maptalkMap/tree/main/threelayer/demo
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。