实现echarts的地图效果

准备数据

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

WARNING

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

加载数据并加到地图

maptalks里已经内置了geojson的解析工具了GeoJSON，可以快速的将geojson数据解析成图形要素

fetch('../assets/data/hk.json').then(res => res.json()).then(geojson => {
                const polygons = maptalks.GeoJSON.toGeometry(geojson);
                layer.addGeometry(polygons);
                addLabels();
            })

配置图形的样式

从效果图里可以看出，每个图形的颜色是有图形的某个业务数据字段的大小决定的，所以这里我采用maptalks的样式插值color-interpolate,geojson数据里我手动添加了value字段的值，表示人口的数量，顾而根据人口数量来为每个图形配置颜色了

fetch('../assets/data/hk.json').then(res => res.json()).then(geojson => {
                const polygons = maptalks.GeoJSON.toGeometry(geojson);
                polygons.forEach(polygon => {
                    polygon.options.enableSimplify = false;
                    polygon.setSymbol({
                        polygonFill: {
                            type: 'color-interpolate',
							
                            property: 'value',
                            stops: [
                                [2000, 'lightskyblue'],
                                [12000, 'yellow'],
                                [30000, 'orangered']
                            ]
                        },
                        // polygonFill: "lightskyblue",
                        polygonOpacity: 1,
                        lineWidth: 1,
                        lineColor: '#444'
                    });
                });
                layer.addGeometry(polygons);
            })

添加图形的高亮效果

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

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

function mouseEventFunc(e) {
            const polygon = e.target;
            if (e.type === 'mouseover') {
                if (!polygon._oldSymbol) {
                    polygon._oldSymbol = polygon.getSymbol();
                }
                polygon.setSymbol({
                    polygonFill: '#FFCF00',
                    lineWidth: 1,
                    lineColor: '#444',
                    shadowBlur: 5,
                    shodowColor: 'black'
                })
            } else if (e.type === 'mouseout') {
                if (polygon._oldSymbol) {
                    polygon.setSymbol(polygon._oldSymbol);
                }
            }
        }

        function addPolygons() {
            fetch('../assets/data/hk.json').then(res => res.json()).then(geojson => {
                const polygons = maptalks.GeoJSON.toGeometry(geojson);
                polygons.forEach(polygon => {
                    polygon.options.enableSimplify = false;
                    polygon.setSymbol({
                        polygonFill: {
                            type: 'color-interpolate',
                            property: 'value',
                            stops: [
                                [2000, 'lightskyblue'],
                                [12000, 'yellow'],
                                [30000, 'orangered']
                            ]
                        },
                        // polygonFill: "lightskyblue",
                        polygonOpacity: 1,
                        lineWidth: 1,
                        lineColor: '#444'
                    });
                    polygon.on('mouseover mouseout', mouseEventFunc);
                });
                layer.addGeometry(polygons);
                addLabels();
            })

        }

添加文字标注

这里我们把文字标注单独的做了份数据，maptalks的图形Polygon是支持通过样式配置自动生成文字标注的，但是自动生成的文字的位置是利用数学方法计算出来的，效果不理想，因而人工做了个文字标注的数据

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);
            })
        }

开启文字碰撞

const layer = new maptalks.VectorLayer('layer', {
            // enableAltitude: true
            'collision': true,
            'collisionDelay': 250,
            collisionBufferSize: 10
        }).addTo(map);

实现echarts的地图效果 ​

准备数据 ​

加载数据并加到地图 ​

配置图形的样式 ​

添加图形的高亮效果 ​

添加文字标注 ​

开启文字碰撞 ​