实现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的地图效果 ​

准备数据 ​

加载数据并加到地图 ​

配置图形的样式 ​

添加图形的高亮效果 ​

添加文字标注 ​

开启文字碰撞 ​