plainheart / echarts-extension-amap

🚩 An AMap (https://lbs.amap.com) extension for Apache ECharts (https://github.com/apache/echarts)
https://github.com/plainheart/echarts-extension-amap
MIT License
251 stars 83 forks source link

高德地图2.0区域掩模的问题 #52

Open MapleBoyBucc opened 6 months ago

MapleBoyBucc commented 6 months ago

在高德地图2.0中使用区域掩膜,整个地图都会白屏,切换回1.4.15显示正常,但是1.4.15不支持2d的区域掩模

plainheart commented 6 months ago

本地尝试了下 v2.0 区域掩膜,未发现白屏情况。可能得提供一个 demo 方便复现一下。

image

MapleBoyBucc commented 6 months ago

``抱歉我没说清楚,需要使用此扩展库,将echarts与高德地图结合使用,才会出现这个问题 在1.4.15版本中能正常显示描边以及在描边范围内显示卫星地图 在2.0版本中只能显示描边,无卫星地图,描边区域内的颜色与区域外一致,就好像整个地图都被掩模覆盖了一样 以下是我的测试代码


init() {
    let _this = this;
    if (
        _this.myChart != null &&
        _this.myChart != "" &&
        _this.myChart != undefined
    ) {
        _this.myChart.dispose();
    }
    AMap.plugin(["AMap.DistrictSearch"], function () {
        _this.myChart = echarts.init(
            document.getElementById("map"),
            null,
            {
                devicePixelRatio: 2.5,
            }
        );

        var opts = {
            extensions: "all",
            level: "province",
        };

        var district = new AMap.DistrictSearch(opts);
        district.search("青海", function (status, result) {
            var bounds = result.districtList[0].boundaries;
            var mask = [];
            for (var i = 0; i < bounds.length; i += 1) {
                mask.push([bounds[i]]);
            }
            const option = {
                amap: {
                    mask: mask,
                    center: [92, 36],
                    viewMode: "3D",
                    mapStyle: "amap://styles/dark",
                    showLabel: false,
                    labelzIndex: 130,
                    zIndex: 0,
                    pitch: 40,
                    zoom: 5,
                },
            };

            _this.myChart.setOption(option, true);

            const gdMap = _this.myChart
                .getModel()
                .getComponent("amap")
                .getAMap();

            //添加描边
            for (var i = 0; i < bounds.length; i += 1) {
                new AMap.Polyline({
                    path: bounds[i],
                    strokeColor: "#99ffff",
                    strokeWeight: 4,
                    map: gdMap,
                });
            }

            gdMap.on("complete", function () {
                const layer = new AMap.TileLayer.Satellite({
                    zIndex: 10,
                });
                gdMap.add(layer);
            });
        });
    });
}