粤政图 标点

src/components/Map/index.vue

@@ -237,7 +237,7 @@ const addMarker = (item) => {
   // 点标记显示内容，HTML要素字符串
   var markerContent =
     '' +
-    '<div class="custom-content-marker" style="display: flex;align-items: center;flex-direction: column;width: 100px;color: #fff;font-size: 16px;">' +
+    '<div class="custom-content-marker" style="display: flex;align-items: center;flex-direction: column;width: 100px;color: #000;font-size: 16px;">' +
     '<div>' +
     item.label +
     '</div>' +

src/components/Map/index2.vue

@@ -11,9 +11,9 @@
 <!--        <div class="model-btn" style="margin-left: 5px" @click="changeScaleControl">尺</div>-->
       </div>
       <!-- 测距工具 -->
-      <div class="model-btn" @click="toggleRangingTool">
-        {{ isRanging ? '关闭测距' : '开启测距' }}
-      </div>
+<!--      <div class="model-btn" @click="toggleRangingTool">-->
+<!--        {{ isRanging ? '关闭测距' : '开启测距' }}-->
+<!--      </div>-->
     </div>
   </div>
 </template>
@@ -75,10 +75,10 @@ const initMapEvent = () => {
     layer_cva.metadata = { group: 'basemap' };
     map.addLayer(layer_vtc);
     map.addLayer(layer_cva);
-    if (props.activeMap !== 'vectorgraph') {
-      removeLayers();
-      switchMap(props.activeMap);
-    }
+    // if (props.activeMap !== 'vectorgraph') {
+    //   removeLayers();
+    //   switchMap(props.activeMap);
+    // }
   });
 };
 // 切换地图
@@ -134,7 +134,6 @@ const setMapZoom = (value) => {
 const switchThreeDimensional = () => {
   mapState.isThreeDimensional = !mapState.isThreeDimensional;
   const pitch = mapState.isThreeDimensional ? 45 : 0;
-  debugger
   map.setPitch(pitch);
 };
 
@@ -156,9 +155,78 @@ const measureFunc = (e) => {
 };
 
 //画线
-function distanceMea() {
-  draw.changeMode(draw.modes.DRAW_LINE_STRING);
-}
+// function distanceMea() {
+//   draw.changeMode(draw.modes.DRAW_LINE_STRING);
+// }
+
+// 实例化点标记
+let markers = {};
+const addMarker = (item) => {
+  // 点标记显示内容，HTML要素字符串
+  var geopoint = {
+    type: 'geojson',
+    data: {
+      type: 'Feature',
+      geometry: {
+        type: 'Point',
+        coordinates: [item.center[0], item.center[1]]
+      },
+      properties: {
+        title: 'add point',
+        'marker-symbol': 'monument'
+      }
+    }
+  };
+  map.addLayer({
+    id: 'point',
+    type: 'circle',
+    geopoint,
+    paint: {
+      'circle-radius': 5,
+      'circle-color': 'red',
+      'circle-opacity': 0.8
+    }
+  });
+  console.log(map.getLayer());
+  // var marker = new GeoGlobe.Layer.SymbolLayer({
+  //   id: 'font',
+  //   type: 'symbol',
+  //   source: 'font',
+  //   layout: {
+  //     'text-font': [
+  //       'Open Sans Regular',
+  //       'Arial Unicode MS Regular'
+  //     ],
+  //     'text-size': 67,
+  //     'text-field': '你好！'
+  //   }
+  // });
+  // map.addLayer(marker);
+  // let marker = new AMap.Marker({
+  //   size: new AMap.Size(25, 34),
+  //   content: markerContent,
+  //   position: [item.center[0], item.center[1]],
+  //   offset: new AMap.Pixel(-13, -30)
+  // });
+  // marker.setMap(map);
+  // if (markers[item.id]) {
+  //   markers[item.id].push(marker);
+  // } else {
+  //   markers[item.id] = [marker];
+  // }
+};
+// 清除所有标加
+const clearMarker = (id) => {
+  if (!markers[id]) return;
+  markers[id].forEach((marker) => {
+    marker.remove();
+  });
+  delete markers[id];
+};
+const getMarkers = () => {
+  return markers;
+};
+defineExpose({ addMarker, getMarkers, clearMarker });
 // 加载事件
 onMounted(() => {
   initMapEvent();

src/views/globalMap/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="global-map">
     <MapLogical v-if="activeMap === 'logical'" :mapData="mapData" />
-    <YMap v-else-if="activeMap === 'satellite2'" :activeMap="activeMap" />
+    <YMap v-else-if="activeMap === 'satellite2'" ref="map2Ref" :activeMap="activeMap" />
     <Map v-else ref="mapRef" :activeMap="activeMap" />
     <!--左侧菜单-->
     <LeftMenu @addMarkers="addMarkers" style="position: absolute; top: 20px; left: 20px" />
@@ -23,6 +23,7 @@ import TimeAxis from '@/components/TimeAxis/index.vue';
 
 const mapData = reactive(logicalData);
 let mapRef = ref(null);
+let map2Ref = ref(null);
 // logical vectorgraph satellite
 let activeMap = ref('logical');
 
@@ -31,17 +32,18 @@ const swtichMap = (key) => {
 };
 
 const addMarkers = (item) => {
-  if (mapRef.value) {
-    const markers = mapRef.value.getMarkers();
+  const dom = activeMap.value === 'satellite2' ? map2Ref.value : mapRef.value;
+  if (dom) {
+    const markers = dom.getMarkers();
     if (markers[item.id]) {
-      mapRef.value.clearMarker(item.id);
+      dom.clearMarker(item.id);
     } else {
       let data = [{ id: item.id, label: '标注点1', center: [110.93154257997, 21.669064031332] },{ id: item.id, label: '标注点2', center: [110.93154257997, 21.969064031332] }];
       if (item.id === 2) {
         data = [{ id: item.id, label: '标注点3', center: [111.1315257997, 21.569064031332] }];
       }
       data.forEach((item) => {
-        mapRef.value.addMarker(item);
+        dom.addMarker(item);
       });
     }
   }