标签：three.29 maptalks GIS material texture extent const Math

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         }

4. 添加图片

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);

5. 页面显示

6. 源码地址

https://github.com/WhatGIS/maptalkMap/tree/main/threelayer/demo

标签：three.29,maptalks,GIS,material,texture,extent,const,Math
来源： https://www.cnblogs.com/googlegis/p/14737732.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。