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
