实现3D的行政区效果

准备数据

从 datav 地图小工具这里下载对应的行政区的geojson数据，自己的项目里的数据从哪里下载还是自己生产的有你的项目决定，这里我只是测试使用，故从datav 地图小工具下载了香港的数据

WARNING

地图数据是个很敏感的东西，尤其是国家的行政边界,项目里使用请遵循对应的法律政策,我这里只是测试使用

创建相关的图层

这里我使用了three插件来实现了3D行政区了，你也可以使用ExtrudePolygonLayer图层

// the ThreeLayer to draw buildings
        var threeLayer = new maptalks.ThreeLayer('t', {
            identifyCountOnEvent: 1,
            animation: true
            // forceRenderOnMoving: true,
            // forceRenderOnRotating: true
        });
        threeLayer.prepareToDraw = function (gl, scene, camera) {
            var light = new THREE.DirectionalLight(0xffffff);
            light.position.set(0, -10, 10).normalize();
            scene.add(light);
            scene.add(new THREE.AmbientLight('#fff', 0.3));
            addPolygons();

        };
        // threeLayer.addTo(map);
        // 添加到GroupGLLayer中
        // GroupGLLayer能实现抗锯齿等后处理，也能加入其他三维图层，让子图层都融合到同一个三维空间中
        const sceneConfig = {
            postProcess: {
                enable: true,
                antialias: { enable: true }
            }
        };
        const groupLayer = new maptalks.GroupGLLayer('group', [threeLayer], { sceneConfig });
        groupLayer.addTo(map);

加载数据并构造3D的行政区

关于每个图形的配色，使用了colorin 这个颜色插值库,其也是maptalks里默认使用的颜色插值库
把图形的海拔高度设置为负的目的是不要抬高海平面，方便其他的业务图层数据加到地图，否则会要求其他图层也要设置海拔数据，导致业务逻辑变复杂了，这个样子最简单和不容易出错

const colors = [
            [2000, 'lightskyblue'],
            [12000, 'yellow'],
            [30000, 'orangered']
        ];
   const ci = new colorin.ColorIn(colors);
		
   function addPolygons() {
            fetch('../assets/data/hk.json').then(res => res.json()).then(geojson => {
                const polygons = maptalks.GeoJSON.toGeometry(geojson);
                const extrudePolygons = polygons.map(p => {
                    const { value } = p.getProperties();
                    const [r, g, b] = ci.getColor(value);
                    const color = `rgb(${r},${g},${b})`;
                    const extrudePolygon = threeLayer.toExtrudePolygon(p, { height, altitude: -height, topColor: '#fff' }, new THREE.MeshPhongMaterial({ color }));
                    return extrudePolygon;
                });
                threeLayer.addMesh(extrudePolygons);
            })
        }

添加高亮效果

高亮效果即鼠标移动上去，对图形高亮提示，使该图形成为显眼包，这里我们添加图形的mouseover,mouseout事件处理函数，在对应的事件里更新图形的样式即可

mouseover 高亮图形
mouseout 还原图形原始的样式

const highMaterial = new THREE.MeshPhongMaterial({ color: '#fff', vertexColors: 2 });

   function mouseEventFunc(e) {
            const polygon = e.target;
            if (e.type === 'mouseover') {
                if (!polygon._oldSymbol) {
                    polygon._oldSymbol = polygon.getObject3d().material;
                }
                polygon.getObject3d().material = highMaterial;
            } else if (e.type === 'mouseout') {
                if (polygon._oldSymbol) {
                    polygon.getObject3d().material = polygon._oldSymbol;
                }
            }
   }


        function addPolygons() {
            fetch('../assets/data/hk.json').then(res => res.json()).then(geojson => {
                const polygons = maptalks.GeoJSON.toGeometry(geojson);
                const extrudePolygons = polygons.map(p => {
                    const { value } = p.getProperties();
                    const [r, g, b] = ci.getColor(value);
                    const color = `rgb(${r},${g},${b})`;
                    const extrudePolygon = threeLayer.toExtrudePolygon(p, { height, altitude: -height, topColor: '#fff' }, new THREE.MeshPhongMaterial({ color }));
                    extrudePolygon.on('mouseover mouseout', mouseEventFunc);
                    return extrudePolygon;
                });
                threeLayer.addMesh(extrudePolygons);
            })
        }

添加边框线和文字标注

边框线还是使用了图形Polygon，只是把其填充的透明度设置为0而已
文字标注即用点图形，用文字样式系统而已
开启文字碰撞

const layer = new maptalks.VectorLayer('layer', {
            // enableAltitude: true
            geometryEvents: false,
            'collision': true,
            'collisionDelay': 250
}).addTo(map);
		
  function addOutLines(polygons) {
            polygons.forEach(polygon => {
                polygon.setSymbol({
                    polygonOpacity: 0,
                    lineWidth: 0.6,
                    lineColor: '#444',
                });
            });
            layer.addGeometry(polygons);
        }

        function addLabels() {
            fetch('../assets/data/hklabel.geojson').then(res => res.json()).then(geojson => {
                const points = maptalks.GeoJSON.toGeometry(geojson);
                points.forEach(point => {
                    const { name } = point.getProperties();
                    point.setSymbol({
                        textName: name,
                        textHaloRadius: 0.2,
                        textHaloFill: '#fff'
                    });

                });
                layer.addGeometry(points);
            })
        }

实现3D的行政区效果 ​

准备数据 ​

创建相关的图层 ​

加载数据并构造3D的行政区 ​

添加高亮效果 ​