Vue3 高德地图 只显示中国区域 修改国境线颜色 自定义地图 DistrictLayer

• Z时代
• 2024-01-10
• 分类：综合

需求效果图（地图只显示中国、地图背景透明、自定义省的边界颜色、修改国境线颜色）：

先创建自定义地图

链接：https://geohub.amap.com/mapstyle/index

水系不显示

区域面，字体改为白色，不透明度改为0%

其他地方按自己的需求自定义是否显示

行政区名，这里只显示了中国 国省市区名，其他全部不显示

行政区边界，这里外国国界改为不显示

背景网格线也要改为不显示

自定义地图最终效果

代码

// 引入包
<template>
    <div id="container"></div>
</template>
<script>
import { ref, shallowRef } from "@vue/reactivity";
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
    setup(props, context) {
        let map = shallowRef(null);
        const ininMap = () => {
            AMapLoader.load({
                key: "Key",
                version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                AMapUI: {
                    // 是否加载 AMapUI，缺省不加载
                    version: "1.1", // AMapUI 缺省 1.1
                    plugins: ["geo/DistrictExplorer"], // 需要加载的 AMapUI ui插件
                },
                plugins: ["AMap.DistrictLayer", "AMap.Scale", "AMap.ToolBar"],
                Loca: {
                    // 是否加载 Loca， 缺省不加载
                    version: "2.0.0", // Loca 版本，缺省 2.0.0
                },
            })
                .then((AMap,AMapUI) => {
                     var defaultLayer = new AMap.createDefaultLayer();
                    let disCountry = new AMap.DistrictLayer.Country({
                        zIndex: 15,
                        SOC: "CHN",
                        depth: 0,
                        styles: {
                            "nation-stroke": "#bbdaf1",
                            "coastline-stroke": "#bbdaf1",
                            "province-stroke": "#bbdaf1",
                            "city-stroke": "#bbdaf1",
                            fill: "rgba(0,0,0,0.2)",
                        },
                    });
                    let province = new AMap.DistrictLayer.Province({
                        zIndex: 20,
                        depth: 0,
                        styles: {
                            "province-stroke": "#bbdaf1",
                            "city-stroke": "#bbdaf1",
                            fill: "rgba(0,0,0,0.2)",
                        },
                    });
                    map = new AMap.Map("container", {
                        //设置地图容器id
                        zoom: 3.9, //初始化地图级别
                        mapStyle:
                            "amap://styles/样式ID", //设置地图的显示样式
                        center: [106.284947, 38.794041],
                        layers: [
                          disCountry,
                          defaultLayer // disCountry 跟 defaultLayer 一定要搭配使用 不然只使用 disCountry 会导致不显示省市名称
                        ],
                    });
                   //province.setMap(map);  // 如果不想使用 disCountry 那也可以使用 Province 只需要取消注释这段代码即可
                    // 这里使用 AMapUI.DistrictExplorer 主要是为了渲染地图国境线的颜色
                    window.AMapUI.load([\'ui/geo/DistrictExplorer\', \'lib/$\'], function(DistrictExplorer, $) {
                        //创建一个实例
                        var districtExplorer = window.districtExplorer = new DistrictExplorer({
                            eventSupport: false, //打开事件支持
                            map: map
                        });
                        districtExplorer.loadAreaNode(100000, function(error, areaNode) {
                            //清除已有的绘制内容
                            districtExplorer.clearFeaturePolygons();
                            //绘制父区域
                            districtExplorer.renderParentFeature(areaNode, {
                                cursor: \'default\',
                                bubble: true,
                                strokeColor: \'#bbdaf1\', //线颜色
                                strokeOpacity: 1, //线透明度
                                strokeWeight: 2, //线宽
                                fillColor: "", //填充色
                                fillOpacity: 0, //填充透明度
                            });
                        });
                    });
                })
                .catch((e) => {
                    console.log(e);
                });
        };
        onMounted(() => {
            ininMap();
        });
        return {
            map,
        };
    },
};
</script>

以上是 Vue3 高德地图 只显示中国区域 修改国境线颜色 自定义地图 DistrictLayer 的全部内容， 来源链接： utcz.com/z/378469.html