粤政图切换 工具

package.json

@@ -21,6 +21,7 @@
     "@amap/amap-jsapi-loader": "^1.0.1",
     "@element-plus/icons-vue": "2.3.1",
     "@highlightjs/vue-plugin": "2.1.0",
+    "@turf/turf": "^7.0.0",
     "@vueup/vue-quill": "1.2.0",
     "@vueuse/core": "10.9.0",
     "animate.css": "4.1.1",

src/components/Map/index2.vue

@@ -1,24 +1,44 @@
 <template>
   <div class="map-container">
     <div id="yztMap" class="map-container"></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 WMTSManager from "@/utils/wmtsManager";
+import QuickZoom from "@/components/Map/quickZoom.vue";
+import { reactive } from "vue";
+import * as turf from '@turf/turf';
 
 interface Props {
-  center?: number[];
-  zoom?: number;
-  minZoom?: number;
-  maxZoom?: number;
   activeMap: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
+  maxZoom: 16
+});
+
+const mapState = reactive({
   center: [110.93154257997, 21.669064031332],
-  zoom: 11,
+  zoom: 9,
   minZoom: 6,
-  maxZoom: 16
+  maxZoom: 16,
+  isThreeDimensional: false,
+  // 是否显示比例尺
+  showScale: true
 });
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@@ -40,10 +60,10 @@ const initMapEvent = () => {
   map = new GeoGlobe.Map({
     mapCRS: wgs84_wgs84_mapcrs,
     style: simple,
-    maxZoom: props.maxZoom,
-    zoom: props.zoom,
-    minZoom: props.minZoom,
-    center: props.center,
+    maxZoom: mapState.maxZoom,
+    zoom: mapState.zoom,
+    minZoom: mapState.minZoom,
+    center: mapState.center,
     container: 'yztMap'
   });
   // style加载完成
@@ -89,6 +109,56 @@ const removeLayers = () => {
   }
 };
 
+// 设置地图层级
+const setMapZoom = (value) => {
+  if (!map) return;
+  if (value === 1) {
+    map.setCenter([113.280637, 23.125178]);
+    map.setZoom(7);
+  } else if (value === 2) {
+    map.setCenter([110.93154257997, 21.6690640313328]);
+    map.setZoom(11);
+  } else if (value === 3) {
+    map.setCenter([110.93154257997, 21.669064031332]);
+    map.setZoom(12);
+  } else if (value === 4) {
+    map.setCenter([110.93154257997, 21.669064031332]);
+    map.setZoom(15);
+  } else if (value === 5) {
+    map.setCenter([110.93154257997, 21.669064031332]);
+    map.setZoom(16);
+  }
+};
+
+// 切换2D、3D
+const switchThreeDimensional = () => {
+  mapState.isThreeDimensional = !mapState.isThreeDimensional;
+  const pitch = mapState.isThreeDimensional ? 45 : 0;
+  debugger
+  map.setPitch(pitch);
+};
+
+//量算处理方法
+const measureFunc = (e) => {
+  var features = e.features;
+  //测面
+  if (features[0].geometry.type == 'Polygon') {
+    if (features.length > 0) {
+      var area = turf.area(features[0]);
+      // restrict to area to 2 decimal points
+      var rounded_area = Math.round(area * 100) / 100;
+      var htmlStr = '<p>面积：<strong>' +
+        rounded_area +
+        '</strong> 平方米</p>';
+      document.getElementById('resultD').innerHTML = htmlStr;
+    }
+  }
+};
+
+//画线
+function distanceMea() {
+  draw.changeMode(draw.modes.DRAW_LINE_STRING);
+}
 // 加载事件
 onMounted(() => {
   initMapEvent();
@@ -105,4 +175,17 @@ onMounted(() => {
     left: 20px;
   }
 }
+.right-tool {
+  position: absolute;
+  bottom: 50px;
+  right: 5px;
+}
+.model-btn {
+  background-color: #022577;
+  font-size: 14px;
+  color: #889ee9;
+  cursor: pointer;
+  padding: 3px 3px;
+  border-radius: 5px;
+}
 </style>