Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
MapleBoyBucc opened this issue Mar 28, 2024 · 2 comments
Open

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

MapleBoyBucc opened this issue Mar 28, 2024 · 2 comments

Comments

@MapleBoyBucc
Copy link

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

@plainheart
Copy link
Owner

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

image

@MapleBoyBucc
Copy link
Author

MapleBoyBucc commented Mar 28, 2024

``抱歉我没说清楚,需要使用此扩展库,将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);
            });
        });
    });
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants