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