hik-map/amap/methods/marker/index.ts

- 提炼自浙江海康智联科技有限公司中后台产品的交互语言和视觉风格。 - 开箱即用的高质量 Vue 组件。

/*
author cuijin
version 1.0.0
time 2022-05-16
*/
/*
loadMarker() 加载地图marker覆盖物
type 覆盖物的类型 1.marker（标记点）2.text（纯文本标记）
title 鼠标悬浮在marker上所展示的详细信息
size marker标记点大小
img marker标记点图片
position marker标记点位置
label marker标记点是否展示文本标注
labelDirect 文本标注展示位置，需与label结合使用（top|right|bottom|left|center）
labelOffset 文本标注偏移量，需与label结合使用
textStyle 当type为label时，纯文本标记的样式
text 当type为label时，纯文本标记展示的内容
className 在marker的dom上新增class
*/
const loadMarker = function (mapinstance: any, marker: any) {
  if (marker.type === 'marker') {
    if (!marker.img || marker.img === '') {
      marker.img = 'https://vdata.amap.com/icons/b18/1/2.png';
    }
    const _icon = new mapinstance.AMap.Icon({
      size: [marker.size[0], marker.size[1]],
      image: marker.img,
      imageSize: [marker.size[0], marker.size[1]],
    });
    const _marker = new mapinstance.AMap.Marker({
      map: mapinstance.map,
      position: marker.position,
      icon: _icon,
      title: marker.title,
      offset: marker.offset ? marker.offset : [-marker.size[0] / 2, -marker.size[1] / 2],
      extData: {
        id: marker.id,
        time: marker.time,
        lnglat: marker.lnglat,
      },
    });
    if (marker.label) {
      _marker.setLabel({
        content: marker.label,
        direction: marker.labelDirect,
        offset: marker.labelOffset,
      });
    }
    if (marker.className) {
      _marker.dom.classList.add(marker.className);
    }
    return _marker;
  } else if (marker.type === 'text') {
    const _text = new mapinstance.AMap.Text({
      map: mapinstance.map,
      text: marker.text,
      anchor: 'center',
      cursor: 'pointer',
      style: marker.textStyle,
      position: marker.position,
    });
    if (marker.className) {
      _text.dom.classList.add(marker.className);
    }
    return _text;
  }
};

export default loadMarker;