maptalks 开发GIS地图（40）maptalks.three.33- custom-mergedmixin-geometry

1. 多重复用对象， multiplexing geometry。 又学了一个单词。

2. 定义 Bar 对象。

 1         function getBar(options) {
 2             const { radius, height } = barCache.getOptions();
 3             const geometry = barCache.getObject3d().geometry;
 4             const scaleR = options.radius / radius, scaleH = options.height / height;
 5             const bar = new maptalks.BaseObject();
 6             bar._initOptions(Object.assign({}, barCache.getOptions(), options));
 7             bar._createMesh(geometry, material);
 8             bar.getObject3d().scale.set(scaleR, scaleR, scaleH);
 9             const { altitude, coordinate } = options;
10             const layer = barCache.getLayer();
11             const z = layer.distanceToVector3(altitude, altitude).x;
12             const position = layer.coordinateToVector3(coordinate, z);
13             bar.getObject3d().position.copy(position);
14             return bar;
15 
16         }

3. 处理数据

 1    const data = json.features.slice(0, 10000).map(function (dataItem) {
 2                     dataItem = gcoord.transform(dataItem, gcoord.AMap, gcoord.WGS84);
 3                     return {
 4                         coordinate: dataItem.geometry.coordinates,
 5                         height: Math.random() * 200,
 6                         value: Math.random() * 10000,
 7                         radius: 5 + 5 * Math.random(),
 8                         topColor: '#fff',
 9                         interactive: false
10                     }
11                 });
12 
13                 barCache = threeLayer.toBox(data[0].coordinate, data[0], material);
14                 bars.push(barCache);
15                 data.forEach(d => {
16                     const bar = getBar(d);
17                     //event test
18                     ['click', 'mousemove', 'mouseout', 'mouseover', 'mousedown', 'mouseup', 'dblclick', 'contextmenu'].forEach(function (eventType) {
19                         bar.on(eventType, function (e) {
20                             console.log(e.type, e);
21                             // console.log(this);
22                             if (e.type === 'mouseout') {
23                                 this.setSymbol(material);
24                             }
25                             if (e.type === 'mouseover') {
26                                 this.setSymbol(highlightmaterial);
27                             }
28                         });
29                     });
30                     // tooltip test
31                     // box.setToolTip(d.value, {
32                     //     showTimeout: 0,
33                     //     eventsPropagation: true,
34                     //     dx: 10
35                     // });
36                     // //infowindow test
37                     // box.setInfoWindow({
38                     //     content: d.value,
39                     //     title: 'message',
40                     //     animationDuration: 0,
41                     //     autoOpenOn: false
42                     // });
43                     bars.push(bar);
44                 });
45 
46                 threeLayer.addMesh(bars);

4. 页面显示

5. 源码地址

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