@xuehongbo/map-craft-js/adaptor/AMapAdaptor.js

MapCraftJS 是一个功能强大且灵活的开源 JavaScript 库，旨在简化互动地图的创建和操作。使用 MapCraftJS，开发者可以轻松地将动态地图功能集成到应用程序中，为用户提供根据自定义配置查看、注释和互动的地图体验。(开发中！！！)

import { loadResources } from '../utils/ResourceLoader.js';


class EGisAdapter  {
  constructor(security,options,callback) {
    loadResources({
      cssUrl: '',
      jsUrl: `https://webapi.amap.com/loader.js`
    }).then(() => {
      window._AMapSecurityConfig = {
        securityJsCode: security.code,
      };
      let that = this;
      AMapLoader.load({
        key: security.key, //申请好的Web端开发者 Key，调用 load 时必填
        version: '2.0', //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
      }).then((AMap) => {
        that.AMap = AMap;
        that.map = new AMap.Map(options.container, {
          viewMode: '2D', //默认使用 2D 模式
          zoom: options.zoom, //地图级别
          center: [options.center.lng, options.center.lat], //地图中心点
          // mapStyle: this.options.mapStyle, //设置地图的显示样式
        });
        callback()
        console.log('地图初始化成功')
      }).catch((e) => {
        console.error(e); //加载错误提示
      });
    });
  }

  addMarker(options) {
    const marker = new this.AMap.Marker({
      //要显示该marker的地图对象
      map: this.map,
      //点标记在地图上显示的位置
      position: [options.position.lng, options.position.lat],
      //在点标记中显示的图标。可以传一个图标地址，也可以传Icon对象。有合法的content内容设置时，此属性无效。
      icon: options.icon,
      //点标记显示内容。可以是HTML要素字符串或者HTML DOM对象。content有效时，icon属性将被覆盖。
      content: options.content,
      //鼠标滑过点标记时的文字提示。不设置则鼠标滑过点标无文字提示。
      title: options.title,
      //点标记是否可见，默认值：true
      visible: options.visible,
      //点标记的叠加顺序。地图上存在多个点标记叠加时，通过该属性使级别较高的点标记在上层显示，默认zIndex：12
      zIndex: options.zIndex,
      //点标记显示位置偏移量，默认值为 [0,0] 。Marker指定position后，
      //默认以marker左上角位置为基准点（若设置了anchor，则以anchor设置位置为基准点），
      //对准所给定的position位置，若需使marker指定位置对准在position处，需根据marker的尺寸设置一定的偏移量。
      offset: options.offset,
      //设置点标记锚点，可选值：
      //'top-left','top-center','top-right', 'middle-left', 'center',
      // 'middle-right', 'bottom-left', 'bottom-center', 'bottom-right' 
      anchor: options.anchor,
      //点标记的旋转角度，，广泛用于改变车辆行驶方向。默认值：0
      angle: options.angle,
      //点标记是否可点击，默认值: true
      clickable: options.clickable,
      //设置点标记是否可拖拽移动，默认值：false
      draggable: options.draggable,
      //事件是否冒泡，默认为 false
      bubble: options.bubble,
      //点标记显示的层级范围，超过范围不显示。默认值：zooms: [2, 20]
      zooms: options.zooms,
      //指定鼠标悬停时的鼠，默认值：'pointer'
      cursor: options.cursor,
      //鼠标点击时marker是否置顶，默认false ，不置顶
      topWhenClick: options.topWhenClick,
      //设置Marker点是否离地绘制，默认值为0，等于0时贴地绘制。
      //大于0时离地绘制，此时Marker点高度等于height值加Marker点高程值
      //（JSAPI v2.1新增属性目前只适用于v2.1版本）。
      height: options.height,
      //添加文本标注
      //label.content 文本标注的内容
      //label.offset 为偏移量。如设置了 direction，以 direction 方位为基准点进行偏移。
      //label.direction 文本标注方位 可选值：'top'|'right'|'bottom'|'left'|'center'，默认值: 'right'。
      label: options.label,
      //用户自定义属性 ，支持JavaScript API任意数据类型，
      //如 Marker的id等。可将自定义数据保存在该属性上，方便后续操作使用。
      extData: options.extData,
    });
    return marker;
  }

  drawPolyline(points) {
    const path = points.map(point => [point.lng, point.lat]);
    const polyline = new EGis.Polyline({
      path: path,
      color: "#0000FF",
      weight: 2,
      opacity: 0.5
    });
    this.map.addLayer(polyline);
    return polyline;
  }
}

export default EGisAdapter;