地图开发之六：三维动态图标

接书，使用波纹墙重点展示一个区域，在实际项目中，如果这种东西一般是针对块状区域的，那么点元素是否和我们需要重点展示坐标类似？(威廉莎士比亚(温斯顿)。)我提出的方案是用三维图标表示的这个坐标点。也就是说，与普通二维坐标点不同，三维坐标可以产生高度变化，产生动态效果。(大卫亚设)。

说一下我们这个功能的需求，首先把西湖十景打点到地图上，是一个三维立体图标，然后给图标点击事件，点击冒泡展示该景点的信息。

1、普通打点

这里我们借助maptalks中的ma类实例化多个图标，然后把图标加载到VectorLayer图层上去。

new ma( latlng, { 'symbol': { 'markerFile': markerFile, 'markerWidth': 40, 'markerHeight': 40, 'markerDx': 0, 'markerDy': 0, 'markerOpacity': 1 } } ).addTo(layer);

普通的打点大概是这样，这个时候，我们想让图标上下运动的效果就不好实现了。只有先清除掉图层，再重新添加有高度值的图层。

const layer = (ID); if (!layer) { return; } layer.clear(); beau(beautyOfWestLakeData => { const { title, latlng, describe, url } = beautyOfWestLakeData || {}; const markerFile = getBackgroundImg(title) new ma( latlng, { 'symbol': { 'markerFile': markerFile, 'markerWidth': 40, 'markerHeight': 40, 'markerDx': 0, 'markerDy': 0, 'markerOpacity': 1 }, properties: { Altitude: } } ).addTo(layer); }) requestAnimationFrame(e => { (); })

这里有一个问题，图标上升的节奏不好把握，这种带高度的图标实现起来还是挺麻烦。

2、三维立体打点

1、新建一个three图层

const threeLayer = new ThreeLayer(ID, { forceRenderOnMoving: true, forceRenderOnRotating: true });

2、场景添加方向光

const light = new THREE.DirectionalLight(0xffffff); lig(0, -10, 10).normalize(); (light);

3、生成材质

const material = new THREE.PointsMaterial({ sizeAttenuation: false, color: 0xffffff, size: 30, transparent: true, //使材质透明 blending: THREE.AdditiveBlending, depthTest: true, //深度测试关闭，不消去场景的不可见面 depthWrite: false, map: new THREE.TextureLoader().load(getBackgroundImg(title)) });

4、遍历生成图标

const point = (latlng, { height: 0 }, material);

3、事件

当点击图标的时候，我们弹出景点的介绍面板。

('click ', e => { ({ title: title, content: describe, url }); })

当鼠标移动到图标的时候，我们让图标变大。

('mouseover', e => { (_material); }) ('mouseout ', e => { (material); })

4、动态效果

最后，我们给图标加上标注，再演示一下。