任意线

src/components/Map/index.vue

@@ -100,7 +100,7 @@ let AMap, map, scale, placeSearch;
 const drawTool = useDrawTool();
 // 初始化地图
 const mapUtils = useAMap({
-  key: '30d3d8448efd68cb0b284549fd41adcf', // 申请好的Web端开发者Key，首次调用 load 时必填
+  key: '9c5041381e5e824f9ee324d8f7a40150', // 申请好的Web端开发者Key，首次调用 load 时必填
   version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
   pitch: mapState.isThreeDimensional ? 45 : 0,
   zoom: mapState.zoom,

src/hooks/AMap/useAMap.ts

@@ -338,7 +338,7 @@ export function useAMap(options) {
     let res = [];
     data.forEach((item) => {
       let graphic;
-      if (['rectangle', 'polygon'].includes(item.type)) {
+      if (['rectangle', 'polygon', 'anyLine'].includes(item.type)) {
         graphic = new AMap.Polygon({
           path: item.path,
           strokeColor: item.strokeColor,

src/hooks/AMap/useDrawTool.ts

@@ -23,6 +23,7 @@ export function useDrawTool() {
   const overlays = [];
   const overlaysData = [];
   let mouseTool, contextMenu, container, map, AMap, rightClickObj;
+  let drawEndMethod;
   const initMouseTool = (options2) => {
     container = document.getElementById('aMap');
     map = options2.map;
@@ -31,6 +32,9 @@ export function useDrawTool() {
     mouseTool = new AMap.MouseTool(map);
     //创建右键菜单
     contextMenu = new AMap.ContextMenu();
+    if (options2.drawEndMethod) {
+      drawEndMethod = options2.drawEndMethod;
+    }
   };
 
   // 删除图形
@@ -168,58 +172,69 @@ export function useDrawTool() {
     data.id = id;
     return { text, data };
   };
-  let polyline = null;
-  let startPoint = null;
-  let isDrawing = false;
-  let lastPoint = null;
+  let anyLine = null;
+  let drawing = false;
+  let path = null;
   // 绘制任意线
   const drawAnyLine = (options) => {
-    // container.addEventListener('mousedown', drawAnyLineMouseDown);
-    //
-    // container.addEventListener('mousemove', (e) => {
-    //   e.preventDefault();
-    //   if (!isDrawing) return;
-    //
-    //   const mapPoint = this.map.getContainer().getBoundingClientRect();
-    //   const lngLat = this.map.getLngLatFromContainerPixel([e.clientX - mapPoint.left, e.clientY - mapPoint.top]);
-    //
-    //   // 更新线条（这里需要手动管理polyline的坐标）
-    //   if (polyline) {
-    //     polyline.setPath(polyline.getPath().concat([lngLat]));
-    //   } else {
-    //     // 首次绘制时创建polyline
-    //     polyline = new AMap.Polyline({
-    //       map: this.map,
-    //       path: [startPoint, lngLat],
-    //       strokeColor: options.strokeColor,
-    //       strokeWeight: options.strokeWeight,
-    //       strokeOpacity: options.strokeOpacity,
-    //       strokeStyle: 'solid',
-    //       lineJoin: 'round',
-    //       lineCap: 'round',
-    //       zIndex: 50
-    //     });
-    //   }
-    //   lastPoint = lngLat;
-    //   console.log(lngLat);
-    // });
-    //
-    // container.addEventListener('mouseup', (e) => {
-    //   isDrawing = false;
-    //   map.setDraggable(true);
-    // });
+    map.on('touchstart', handleTouchStart);
+    map.on('touchmove', handleTouchMove);
+    document.addEventListener('touchend', handleTouchEnd);
+    map.on('mousedown', handleTouchStart);
+    map.on('mousemove', handleTouchMove.bind(null, options));
+    document.addEventListener('mouseup', handleTouchEnd.bind(null, options));
   };
-  // 任意线 鼠标按下事件
-  const drawAnyLineMouseDown = (e) => {
-    // 阻止默认行为
-    e.preventDefault();
-    // 获取鼠标在地图上的位置
-    const mapPoint = map.getContainer().getBoundingClientRect();
-    const lngLat = map.getLngLatFromContainerPixel([e.clientX - mapPoint.left, e.clientY - mapPoint.top]);
-
-    startPoint = lngLat;
-    isDrawing = true;
-    lastPoint = startPoint;
+  const handleTouchStart = (e) => {
+    drawing = true;
+    map.setStatus({
+      showIndoorMap: false,
+      dragEnable: false,
+      keyboardEnable: false,
+      doubleClickZoom: false,
+      zoomEnable: false,
+      rotateEnable: false
+    });
+    path = [e.lnglat];
+    if (anyLine) {
+      map.remove(anyLine);
+    }
+  };
+  const handleTouchMove = (options, e) => {
+    if (!drawing) return;
+    path.push(e.lnglat);
+    if (anyLine) {
+      map.remove(anyLine);
+    }
+    anyLine = new AMap.Polyline({
+      path: path,
+      strokeColor: options.strokeColor,
+      strokeOpacity: options.strokeOpacity,
+      strokeWeight: options.strokeWeight,
+      strokeStyle: options.strokeStyle,
+      lineJoin: 'round'
+    });
+    map.add(anyLine);
+  };
+  const handleTouchEnd = (options) => {
+    drawing = false;
+    map.setStatus({
+      showIndoorMap: true,
+      dragEnable: true,
+      keyboardEnable: true,
+      doubleClickZoom: true,
+      zoomEnable: true,
+      rotateEnable: true
+    });
+    map.off('touchstart', handleTouchStart);
+    map.on('touchmove', handleTouchMove.bind(null, options));
+    document.addEventListener('touchend', handleTouchEnd.bind(null, options));
+    map.off('mousedown', handleTouchStart);
+    map.off('mousemove', handleTouchMove);
+    document.removeEventListener('mouseup', handleTouchEnd);
+    if (!!drawEndMethod) {
+      drawEndMethod(options, anyLine);
+    }
+    anyLine = null;
   };
   // 关闭绘制
   const closeDraw = () => {
@@ -409,6 +424,9 @@ export function useDrawTool() {
   const getMap = () => {
     return map;
   };
+  const setDrawEndMethod = (newMethod) => {
+    drawEndMethod = newMethod;
+  };
   return {
     overlays,
     getMouseTool,
@@ -424,6 +442,7 @@ export function useDrawTool() {
     removeOverlayByIndex,
     handleUndo,
     currentState,
-    history
+    history,
+    setDrawEndMethod
   };
 }

src/views/globalMap/RightMenu/OnlinePlotting/EditDialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <Dialog custom-show title="保存提示" type="sm" hide-footer @close="cancel" @confirm="submitForm">
+  <Dialog custom-show title="保存提示" type="sm" @close="cancel" @confirm="submitForm">
     <div class="line">
       <div class="tip-icon"></div>
       <div class="tip-item">

src/views/globalMap/RightMenu/OnlinePlotting/index.vue

@@ -214,11 +214,11 @@ const menu = ref([
             value: 'polygon',
             image: getImageUrl('polygon')
           },
-          // {
-          //   name: '任意线',
-          //   value: 'anyLine',
-          //   image: getImageUrl('anyLine')
-          // },
+          {
+            name: '任意线',
+            value: 'anyLine',
+            image: getImageUrl('anyLine')
+          },
           {
             name: '圆',
             value: 'circle',
@@ -431,7 +431,9 @@ const clickTab3 = (item, index) => {
     }
     const drawTool = getDrawTool();
     const newOptions = drawTool.drawGraphics(mouseToolState.value);
-    if (newOptions.graphicsType !== 'text') {
+    if (mouseToolState.value.graphicsType !== 'anyLine') {
+      drawTool.setDrawEndMethod(handleEndDraw);
+    } else if (mouseToolState.value.graphicsType !== 'text') {
       // 绘制完成事件
       initDrawMethod(newOptions);
     }
@@ -480,29 +482,9 @@ const addText = (textEditState) => {
   const map = drawTool.getMap();
   // 监听地图点击事件
   map.off('click', handleClickMap);
-  webSock.send(
-    JSON.stringify({
-      operation: 'add', // 必填
-      id: data.id,
-      name: data.title, // 必填
-      content: JSON.stringify(data), // 必填
-      visible: '1'
-    })
-  );
+  sendWebSocket(data);
   close();
 };
-// watch(
-//   () => mouseToolState.value.graphicsType,
-//   (value) => {
-//     if (value) {
-//       const map = getMap();
-//       map.off('click', handleClickMap);
-//     }
-//   }
-// );
-const changeDrawing = () => {
-  drawing.value = !drawing.value;
-};
 const close = () => {
   const drawTool = getDrawTool();
   drawTool.closeDraw();
@@ -510,6 +492,18 @@ const close = () => {
   menuActive3.value = '';
   mouseToolState.value.graphicsType = '';
 };
+watch(
+  mouseToolState,
+  () => {
+    if (mouseToolState.value.graphicsType !== 'text') {
+      const map = getMap();
+      map.off('click', handleClickMap);
+    }
+  },
+  {
+    deep: true
+  }
+);
 // 初始化绘制完成回调
 const initDrawMethod = (options) => {
   const drawTool = getDrawTool();
@@ -577,20 +571,50 @@ const initDrawMethod = (options) => {
     // 右击进入编辑
     obj.on('rightclick', handleRightClick);
     // 发送
-    if (!!collaboration.value) {
-      webSock.send(
-        JSON.stringify({
-          operation: 'add', // 必填
-          id: data.id,
-          name: data.title, // 必填
-          content: JSON.stringify(data), // 必填
-          visible: '1'
-        })
-      );
-    }
+    sendWebSocket(data);
   };
   mouseTool.on('draw', onDraw);
 };
+const handleEndDraw = (options, obj) => {
+  const drawTool = getDrawTool();
+  drawing.value = false;
+  menuActive3.value = '';
+  mouseToolState.value.graphicsType = '';
+  drawTool.setDrawEndMethod();
+  const id = nanoid();
+  obj._opts.extData = {
+    id: id
+  };
+  const data: any = deepClone(options);
+  data.id = id;
+  if (data.type === 'anyLine') {
+    const path = obj.getPath();
+    // 将AMap.LngLat对象数组转换为经纬度数组
+    const pathArr = path.map((lngLat) => {
+      // 返回经度和纬度的数组
+      return [lngLat.lng, lngLat.lat];
+    });
+    pathArr.push(pathArr[0]);
+    data.path = pathArr;
+  }
+  overlays.push(obj);
+  overlaysData.push(data);
+  commit(deepClone(overlaysData));
+  sendWebSocket(data);
+};
+// 协同标绘发送新增
+const sendWebSocket = (data) => {
+  if (!collaboration.value || !webSock) return;
+  webSock.send(
+    JSON.stringify({
+      operation: 'add', // 必填
+      id: data.id,
+      name: data.title, // 必填
+      content: JSON.stringify(data), // 必填
+      visible: '1'
+    })
+  );
+};
 // 图形右击事件
 let rightClickObj;
 let initContextMenu = false;