2025.7.21 任务管理-监管地图功能（待完成）

feiyu02

2025-07-21 5be9679fb4288936b576cf3d1f1548af1c4151b8

 src/utils/map/marks.js

@@ -2,7 +2,7 @@
 * 高德地图点标记绘制相关
 */

import { map } from './index_old';
import { map, AMap } from './index';
import { useToolboxStore } from '@/stores/toolbox';

const toolboxStore = useToolboxStore();
@@ -25,7 +25,7 @@
    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
      });
    }
@@ -34,12 +34,12 @@
    var styleObject = {
      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
      // url: './asset/mipmap/ic_up_white.png', // 图标地址
      // eslint-disable-next-line no-undef

      size: new AMap.Size(11, 11), // 图标大小
      // eslint-disable-next-line no-undef

      anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
    };
    // eslint-disable-next-line no-undef

    var massMarks = new AMap.MassMarks(data, {
      zIndex: 5, // 海量点图层叠加的顺序
      zooms: [15, 18], // 在指定地图缩放级别范围内展示海量点图层
@@ -50,11 +50,11 @@
      // 3. 自定义点击事件
      onClick(i);
    });
    // eslint-disable-next-line no-undef

    var marker = new AMap.Marker({
      content: ' ',
      map: map,
      // eslint-disable-next-line no-undef

      offset: new AMap.Pixel(13, 12)
    });
    var timeout;
@@ -86,8 +86,7 @@
   * @param {boolean} collision 标注避让
   * @returns
   */
  createLabelMarks(img, dataList, collision = true) {
    // eslint-disable-next-line no-undef
  createLabelMarks(img, dataList, collision = true, showTxt = true) {
    const layer = new AMap.LabelsLayer({
      zooms: [3, 20],
      zIndex: 1000,
@@ -119,7 +118,7 @@
          retina: true
        },
        text: {
          content: data.name,
          content: showTxt ? data.name : '',
          direction: 'top',
          offset: [0, -5],
          style: {
@@ -136,7 +135,6 @@
        index: i
      };

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

      // markers.push(labelMarker);
@@ -145,5 +143,28 @@
    }

    return layer;
  },

  createMarker({ position, img, label, extData }) {
    //创建 AMap.Icon 实例：
    const icon = new AMap.Icon({
      size: new AMap.Size(30, 30), //图标尺寸
      image: img, //Icon 的图像
      // imageOffset: new AMap.Pixel(-9, -3), //图像相对展示区域的偏移量，适于雪碧图等
      imageSize: new AMap.Size(30, 30) //根据所设置的大小拉伸或压缩图片
    });
    const marker = new AMap.Marker({
      position: position,
      // offset: new AMap.Pixel(-13, -30),
      icon: icon, //添加 icon 图标 URL
      title: label,
      label: {
        content: label,
        direction: 'bottom'
      },
      extData
    });
    // map.add(marker);
    return marker;
  }
};