Vue3 高德地圖 只顯示中國區域 修改國境線顏色 自定義地圖 DistrictLayer

需求效果圖（地圖只顯示中國、地圖背景透明、自定義省的邊界顏色、修改國境線顏色）：

先創建自定義地圖

鏈接：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>