1. 修改部分bug 2. 新增2D路线轨迹绘制

riku

2025-02-13 660021a28de9b84b4362c171fdbbf89587f0c5af

 src/utils/map/marks.js

@@ -3,8 +3,6 @@
 */

import { map } from './index_old';
import sector from './sector';
import { DialogUtil } from './dialog';
import { useToolboxStore } from '@/stores/toolbox';

const toolboxStore = useToolboxStore();
@@ -21,16 +19,13 @@
    if (!toolboxStore.dataMarkerStatus) {
      return;
    }
    if (_massMarks) {
      map.remove(_massMarks);
      _massMarks = undefined;
    }
    this.clearMassMarks();
    const lnglats = fDatas.lnglats_GD;
    var data = [];
    for (let i = 0; i < lnglats.length; i++) {
      data.push({
        lnglat: lnglats[i], //点标记位置
        name: `${fDatas.times[i]}<br/>${_factor.factorName}: ${_factor.datas[i].factorData} mg/m³`,
        name: `${fDatas.times[i]}<br/>${_factor.factorName}: ${_factor.datas[i].factorData} μg/m³`,
        id: i
      });
    }
@@ -52,17 +47,8 @@
    });
    massMarks.on('click', (event) => {
      const i = event.data.id;
      // 1. 绘制扇形区域
      sector.drawSector(fDatas, i);

      // 2. 绘制对话框
      DialogUtil.openNewWindow(fDatas, i, map, lnglats[i], () => {
        // 移除扇形区域
        // clearSector3();
      });

      // 3. 自定义点击事件
      onClick();
      onClick(i);
    });
    // eslint-disable-next-line no-undef
    var marker = new AMap.Marker({
@@ -85,5 +71,79 @@
    });
    _massMarks = massMarks;
    map.add(massMarks);
  },
  clearMassMarks() {
    if (_massMarks) {
      map.remove(_massMarks);
      _massMarks = undefined;
    }
  },

  /**
   * 创建标记点
   * @param {string | Array} img 图标或图标数组
   * @param {Array} dataList 监测数据
   * @param {boolean} collision 标注避让
   * @returns
   */
  createLabelMarks(img, dataList, collision = true) {
    // eslint-disable-next-line no-undef
    const layer = new AMap.LabelsLayer({
      zooms: [3, 20],
      zIndex: 1000,
      // 开启标注避让，默认为开启，v1.4.15 新增属性
      collision: collision,
      // 开启标注淡入动画，默认为开启，v1.4.15 新增属性
      animation: true
    });

    map.add(layer);

    // var markers = [];
    for (var i = 0; i < dataList.length; i++) {
      const data = dataList[i];
      var curData = {
        name: data.name,
        position: [data.longitude, data.latitude],
        zooms: [10, 20],
        opacity: 1,
        zIndex: 10,
        icon: {
          type: 'image',
          image: typeof img === 'string' ? img : img[i],
          // clipOrigin: [14, 92],
          // clipSize: [50, 68],
          size: [30, 30],
          anchor: 'bottom-center',
          angel: 0,
          retina: true
        },
        text: {
          content: data.name,
          direction: 'top',
          offset: [0, -5],
          style: {
            fontSize: 16,
            fontWeight: 'normal',
            fillColor: '#fff',
            strokeColor: '#333',
            strokeWidth: 0,
            backgroundColor: '#122b54a9'
          }
        }
      };
      curData.extData = {
        index: i
      };

      // eslint-disable-next-line no-undef
      var labelMarker = new AMap.LabelMarker(curData);

      // markers.push(labelMarker);

      layer.add(labelMarker);
    }

    return layer;
  }
};