高德地图3d渲染

src/components/CommonMap.vue

 <template>
-  <div id="container"></div>
+  <div id="container" v-loading="mapLoading" element-loading-background="rgba(122, 122, 122, 0)"></div>
 </template>
 <script setup>
 import AMapLoader from "@amap/amap-jsapi-loader";
@@ -42,25 +42,35 @@ window._AMapSecurityConfig = {
 let geojsonObj = null;
 let currentMarkers = [];
 let provincePolylines = [];
+let mapLoading = ref(true);
 
 // 初始化地图
 const handleInitMap = () => {
-  AMapLoader.load({
-    key: "9a22433229a51dc5114d4bbf92f687ee", // 申请好的Web端开发者Key
-    // version: "2.0",
-    plugins: ["AMap.DistrictSearch", "AMap.GeoJSON"],
-  })
-    .then((AMap) => {
       map = new AMap.Map("container", {
         //设置地图容器id
-        viewMode: "2D",
+        mask: mask,
+        viewMode: "3D",
         zoom: 4, //根据屏幕宽度设置初始化地图级别
+        zooms: [4, 8],
         center: ["lixiang", "tuichu"].includes(props.tabKey) ? [100.808299, 35.791787] : [127.808299, 35.791787], //初始化地图中心点位置
         expandZoomRange: true, // 开启显示范围设置
         mapStyle: "amap://styles/d9cd35cfbd75e272e528a7fde0bcfc53",
         rotateEnable: false, // 是否可以旋转
         copyrightControl: false,
         logoControl: false,
+        // features: ['bg', 'road'], // 只显示必要的图层
+        pitchEnable: false,      // 禁用俯仰角调整（降低计算）
+        rotateEnable: false,     // 禁用旋转（降低计算）
+        buildingAnimation: false, // 禁用建筑动画
+        showIndoorMap: false,    // 不显示室内地图
+        showBuildingBlock: false,   // 不显示建筑群
+        showBuilding: false,         // 显示单个建筑
+        terrain: false,             // 不显示地形
+      });
+      map.on("complete", function () {
+          setTimeout(() => {
+              mapLoading.value = false;
+          }, 500);
       });
       handleDistrict();
       // 监听地图缩放
@@ -81,18 +91,33 @@ const handleInitMap = () => {
           });
         }
       });
-    })
-    .catch((e) => {});
 };
+let bounds = [];
+let mask = [];
+const searchDistrict = () => {
+  AMapLoader.load({
+    key: "9a22433229a51dc5114d4bbf92f687ee", // 申请好的Web端开发者Key
+    // version: "2.0",
+    plugins: ["AMap.DistrictSearch", "AMap.GeoJSON"],
+  })
+    .then((AMap) => {
+      let districtSearch = new AMap.DistrictSearch({
+        subdistrict: 1, //获取边界不需要返回下级行政区
+        extensions: "all", //返回行政区边界坐标组等具体信息
+        level: "country", //查询行政级别为 市 province-省 district-
+      });
+      districtSearch.search("中国", function (status, result) {
+        bounds = result.districtList[0].boundaries;
+        for (let i = 0; i < bounds.length; i++) {
+            mask.push([bounds[i]]);
+        }
+        handleInitMap();
+        handleDistrict();
+      })
+  })
+}
 // 高亮和描边
 const handleDistrict = () => {
-  let districtSearch = new AMap.DistrictSearch({
-    subdistrict: 1, //获取边界不需要返回下级行政区
-    extensions: "all", //返回行政区边界坐标组等具体信息
-    level: "country", //查询行政级别为 市 province-省 district-
-  });
-  districtSearch.search("中国", function (status, result) {
-    let bounds = result.districtList[0].boundaries;
     // 描边
     for (let i = 0; i < bounds.length; i++) {
       let outerPolyline = new AMap.Polyline({
@@ -114,7 +139,6 @@ const handleDistrict = () => {
       // });
       // map.add(chinaBg);
     }
-  });
 };
 // 添加新路线
 const addPolylines = () => {
@@ -406,7 +430,7 @@ defineExpose({
   backToCountry,
 });
 onMounted(() => {
-  handleInitMap();
+  searchDistrict();
   // 监听窗口大小变化
   // window.addEventListener("resize", handleResize);
 });
@@ -423,16 +447,7 @@ onUnmounted(() => {
   window.removeEventListener("resize", handleResize);
 });
 
-onActivated(() => {
-  nextTick(() => {
-    const container = document.getElementById("container");
-    if (container) {
-      container.style.width = "100%";
-      container.style.height = "100%";
-    }
-    map ? map.resize() : handleInitMap();
-  });
-});
+onActivated(() => {});
 </script>
 
 <style scoped lang="less">
@@ -443,6 +458,7 @@ onActivated(() => {
 #container {
   width: 100%;
   height: 100%;
+  background-color: transparent !important;
 }
 .custom-content-marker {
   position: relative;