添加测距工具

src/components/Map/index.vue

@@ -2,18 +2,24 @@
   <div class="map-container">
     <div id="yztMap" class="map-container"></div>
     <!-- 右下工具  -->
-    <div v-show="mapState.showScale" class="zomm-text">{{ mapState.zoom }}级</div>
+    <div v-show="mapState.showScale" class="zoom-text">{{ mapState.zoom }}级</div>
     <div class="right-tool">
-      <!--快捷缩放-->
+      <!-- 快捷缩放 -->
       <QuickZoom :step="mapState.zoom" :min-step="mapState.minZoom" :max-step="mapState.maxZoom" @change-step="setMapZoom" />
       <div class="flex" style="margin-top: 5px">
         <div class="model-btn" @click="switchThreeDimensional">{{ mapState.isThreeDimensional ? '3D' : '2D' }}</div>
         <div class="model-btn" style="margin-left: 5px" @click="changeScaleControl">尺</div>
       </div>
+      <!-- 测距工具 -->
+      <div class="model-btn" @click="toggleRangingTool">
+        {{ isRanging ? '关闭测距' : '开启测距' }}
+      </div>
     </div>
   </div>
 </template>
+
 <script setup lang="ts">
+import { onMounted, onUnmounted, reactive, watch, defineProps, withDefaults, ref } from 'vue';
 import AMapLoader from '@amap/amap-jsapi-loader';
 import QuickZoom from './quickZoom.vue';
 
@@ -32,7 +38,10 @@ const mapState = reactive({
   // 是否显示比例尺
   showScale: true
 });
-let map, scale, nowLayer;
+
+let map, scale, nowLayer, ruler;
+const isRanging = ref(false);
+
 watch(
   () => props.activeMap,
   (value, oldValue) => {
@@ -43,13 +52,13 @@ watch(
     }
   }
 );
+
 // 初始化事件
 const initMap = () => {
   AMapLoader.load({
-    // key: 'ef9090f018b879c7b896b352c01816dd', // 申请好的Web端开发者Key，首次调用 load 时必填
     key: '30d3d8448efd68cb0b284549fd41adcf', // 申请好的Web端开发者Key，首次调用 load 时必填
     version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
-    plugins: ['AMap.Scale']
+    plugins: ['AMap.Scale', 'AMap.RangingTool']
   }).then((AMap) => {
     map = new AMap.Map('yztMap', {
       // 是否为3D地图模式
@@ -64,18 +73,75 @@ const initMap = () => {
       // 是否允许通过鼠标滚轮来缩放
       scrollWheel: true
     });
+
     if (!['logical', 'vectorgraph'].includes(props.activeMap)) {
       switchMap(props.activeMap);
     } else {
       map.removeLayer();
     }
+
     scale = new AMap.Scale();
     if (mapState.showScale) {
       map.addControl(scale);
     }
+
+    // 自定义测距工具样式
+    const startMarkerOptions = {
+      icon: new AMap.Icon({
+        size: new AMap.Size(19, 31), // 图标大小
+        imageSize: new AMap.Size(19, 31),
+        image: '//webapi.amap.com/theme/v1.3/markers/b/start.png'
+      }),
+      offset: new AMap.Pixel(-9, -31)
+    };
+    const endMarkerOptions = {
+      icon: new AMap.Icon({
+        size: new AMap.Size(19, 31), // 图标大小
+        imageSize: new AMap.Size(19, 31),
+        image: '//webapi.amap.com/theme/v1.3/markers/b/end.png'
+      }),
+      offset: new AMap.Pixel(-9, -31)
+    };
+    const midMarkerOptions = {
+      icon: new AMap.Icon({
+        size: new AMap.Size(19, 31), // 图标大小
+        imageSize: new AMap.Size(19, 31),
+        image: '//webapi.amap.com/theme/v1.3/markers/b/mid.png'
+      }),
+      offset: new AMap.Pixel(-9, -31)
+    };
+    const lineOptions = {
+      strokeStyle: 'solid',
+      strokeColor: '#FF33FF',
+      strokeOpacity: 1,
+      strokeWeight: 2
+    };
+    const rulerOptions = {
+      startMarkerOptions: startMarkerOptions,
+      midMarkerOptions: midMarkerOptions,
+      endMarkerOptions: endMarkerOptions,
+      lineOptions: lineOptions
+    };
+
+    // 初始化自定义样式测距工具
+    ruler = new AMap.RangingTool(map, rulerOptions);
+
     map.on('zoomchange', zoomChangeHandler);
   });
 };
+
+// 切换测距工具状态
+const toggleRangingTool = () => {
+  if (ruler) {
+    if (isRanging.value) {
+      ruler.turnOff(); // 关闭测距工具
+    } else {
+      ruler.turnOn(); // 启动测距工具
+    }
+    isRanging.value = !isRanging.value; // 切换状态
+  }
+};
+
 // 切换地图
 const switchMap = (type) => {
   mapState.zoom = 11;
@@ -90,33 +156,12 @@ const switchMap = (type) => {
         REQUEST: 'GetCapabilities'
       }
     ];
-    // var satellite = new AMap.TileLayer.Satellite();
-    // map.addLayer(satellite);
-    // nowLayer = satellite;
   }
-  // map.setFeatures([]);
-  console.log(queryParamsArr[0].serviceCode);
   var wms = new AMap.TileLayer.WMTS({
-    // url: 'http://t0.tianditu.gov.cn/img_c/wmts',
     url: 'http://10.181.7.236:9988/api/oneShare/proxyHandler/mm/' + queryParamsArr[0].serviceCode,
-    // blend: true,
-    // tileSize: 256,
     params: {
-      // Layer: "img",
-      // Version: "1.0.0",
-      // Format: "tiles",
-      // TileMatrixSet: "w",
-      // STYLE: "default",
-      // tk: 'd31190edaa4190af833234ab7b1a6f27'
-      // SERVICE: 'WMTS',
-      // REQUEST: 'GetTile',
       VERSION: '1.0.0',
       LAYER: 'gds_2m_kj202401',
-      // STYLE: 'default',
-      // TILEMATRIXSET: 'default028mm',
-      // TILEMATRIX: '9',
-      // TILEROW: '97',
-      // TILECOL: '413',
       FORMAT: 'image/jpgpng'
     }
   });
@@ -128,6 +173,7 @@ const zoomChangeHandler = (event) => {
   mapState.zoom = map.getZoom();
 };
 
+// 切换比例尺
 const changeScaleControl = () => {
   mapState.showScale = !mapState.showScale;
   if (mapState.showScale) {
@@ -158,7 +204,7 @@ const setMapZoom = (value) => {
   }
 };
 
-// 切换2d、3d
+// 切换2D、3D
 const switchThreeDimensional = () => {
   mapState.isThreeDimensional = !mapState.isThreeDimensional;
   const pitch = mapState.isThreeDimensional ? 45 : 0;
@@ -170,18 +216,20 @@ onMounted(() => {
   initMap();
 });
 
+// 卸载事件
 onUnmounted(() => {
-  if (!!map) {
+  if (map) {
     map.off('zoomchange', zoomChangeHandler);
   }
 });
 </script>
+
 <style scoped>
 .map-container {
   width: 100%;
   height: 100%;
   position: relative;
-  .zomm-text {
+  .zoom-text {
     position: absolute;
     bottom: 8px;
     right: 75px;
@@ -221,5 +269,37 @@ onUnmounted(() => {
   :deep(.amap-copyright) {
     display: none !important;
   }
+  /* 自定义测距工具样式 */
+  :deep(.amap-ranger) {
+    background-color: #ffffff;
+    border: 1px solid #888888;
+    border-radius: 5px;
+    padding: 5px;
+  }
+
+  :deep(.amap-ranger .amap-toolbar) {
+    color: #333;
+    font-size: 12px;
+    padding: 5px;
+  }
+
+  :deep(.amap-ranger .amap-toolbar button) {
+    background-color: #022577;
+    color: #fff;
+    border: none;
+    border-radius: 4px;
+    padding: 5px;
+    margin-right: 5px;
+    cursor: pointer;
+  }
+
+  :deep(.amap-ranger .amap-toolbar button:hover) {
+    background-color: #1a3c75;
+  }
+
+  :deep(.amap-ranger .amap-toolbar .amap-toolbar-text) {
+    color: #444;
+    font-size: 14px;
+  }
 }
 </style>