地图汇总

SuperMap

v10.0.0

• 引入SuperMap.Include.js:

  <script type="text/javascript" src="http://iclient.supermap.io/libs/iclient8c/libs/SuperMap.Include.js"></script>

• vue中安装@supermap/iclient-classic，SuperMap构造函数就是从它暴露

  import { SuperMap } from "@supermap/iclient-classic";

公共封装

根据需求自行调整

import { GUID } from "@/utils/tool";
import { SuperMap } from "@supermap/iclient-classic";

// 超图服务地址
export const superMapServerUrl = `超图服务url`;

// 超图服务地址匹配（正向）
export const superMapAddressGeoCodingUrl = `超图地址匹配服务url`;

// 超图默认中心点经纬度
export const superMapDefCenter = [110.38751873999999, 23.541600600000002];

// 超图点样式
export function superMapPointStyle() {
  return {
    fillColor: "#f9120e",
    fillOpacity: 0,
    hoverFillColor: "white",
    hoverFillOpacity: 0.8,
    strokeColor: "#f9120e",
    strokeOpacity: 0,
    strokeWidth: 2,
    strokeLinecap: "round",
    strokeDashstyle: "solid",
    hoverStrokeColor: "red",
    hoverStrokeOpacity: 1,
    hoverStrokeWidth: 0.2,
    pointRadius: 6,
    hoverPointRadius: 1,
    hoverPointUnit: "%",
    pointerEvents: "visiblePainted",
    cursor: "inherit"
  };
}

// 超图面样式
export function superMapPolygonStyle() {
  return {
    fillColor: "#f9120e", //填充色
    fillOpacity: 0.6, //填充不透明度
    hoverFillColor: "white",
    hoverFillOpacity: 0.8,
    strokeColor: "#f9120e", //描边色
    strokeOpacity: 1, //描边不透明度
    strokeWidth: 2, //描边宽度
    strokeLinecap: "round", //线头类型，默认round，还有square，butt
    strokeDashstyle: "solid", //线类型dot,dash,dashdot,longdash,longdashdot,solid(默认)
    hoverStrokeColor: "red",
    hoverStrokeOpacity: 1,
    hoverStrokeWidth: 0.2,
    pointRadius: 6, //像素点半径
    hoverPointRadius: 1,
    hoverPointUnit: "%",
    pointerEvents: "visiblePainted",
    cursor: "inherit",
    fontColor: "#ffffff",
    fontSize: "12px",
    labelAlign: "cm" //标签对其,第一个字母: l-left,c-center,r-right.第二个字母:t-top,m-middle,b-bottom
  };
}

//超图绘制样式
export function superMapDrawStyle() {
  return {
    fillColor: "#f9120e",
    fillOpacity: 0.6,
    strokeColor: "#f9120e",
    strokeOpacity: 1,
    strokeWidth: 2,
    strokeLinecap: "round",
    strokeDashstyle: "solid",
    pointRadius: 6,
    pointerEvents: "visiblePainted",
    cursor: "pointer",
    fontColor: "#ffffff",
    fontSize: "12px",
    labelAlign: "cm"
  };
}

/**
 * 初始化地图
 * @param {String} id 容器id *
 * @param {Objecft} events 含有事件监听方法的对象
 * @param {Array} controls 含有初始化控件对象的数组
 */
export function initMap(id, events, controls = []) {
  return new SuperMap.Map(id, {
    eventListeners: {
      ...events
    },
    controls: [
      new SuperMap.Control.Zoom(),
      new SuperMap.Control.Navigation({
        dragPanOptions: {
          enableKinetic: true
        }
      }),
      ...controls
    ]
  });
}

//图层
/**
 * 初始化底图
 * @param {Object} map 超图实例 *
 * @param {Array} layers 其他图层
 * @param {Function} cb 初始化完成回调
 * @param {Array} center 中心点坐标，[x, y]
 * @param {Object} params 设置到url上的可选参数
 * @param {Object} props 其他TiledDynamicRESTLayer及其图层父类开放属性
 * @param {Number} zoom 中心点缩放,默认5
 */
export function initBaseLayer(
  map,
  layers = [],
  cb,
  center = superMapDefCenter,
  params = {},
  props = {},
  zoom = 5
) {
  const baseLayer = new SuperMap.Layer.TiledDynamicRESTLayer(
    "底图图层",
    superMapServerUrl,
    {
      cacheEnabled: true,
      ...params
    },
    {
      maxResolution: "auto", //图层实例化的时候设置图层最大的分辨率
      useCORS: true,	// 允许跨域（截图）
      ...props
    }
  );

  const mapBaseLayerInited = () => {
    map.addLayers([baseLayer, ...layers]);
    map.setBaseLayer(baseLayer);

    // 设置中心点
    const [x, y] = center;
    map.setCenter(new SuperMap.LonLat(x, y), zoom);
    cb && cb();
  };
  baseLayer.events.on({
    layerInitialized: mapBaseLayerInited
  });
  return baseLayer;
}

/**
 * 创建矢量图层
 * @param {Object} options 矢量图层配置项
 * @param {Object} style 图层样式
 */
export function initDrawLayer(options = {}, style) {
  const drawLayer = new SuperMap.Layer.Vector("矢量图层", { ...options });
  drawLayer.style = style || superMapPolygonStyle();

  return drawLayer;
}

/**
 * 创建撒点图层
 */
export function initMarkLayer() {
  const markLayer = new SuperMap.Layer.Markers("撒点图层");

  return markLayer;
}

//控件
/**
 * 初始化要素选择控件
 * @param {Object} map 超图实例
 * @param {Object} drawLayer 矢量图层实例
 * @param {Object} cbs 点击等回调配置对象
 * @param {Object} options 其他配置项
 */
export function selectFeature(map, drawLayer, cbs, options = {}) {
  // 选择绘制(指定的的图层上通过鼠标单击和悬浮选择矢量要素,如撒点)
  const select = new SuperMap.Control.SelectFeature(drawLayer, {
    callbacks: {
      ...cbs
    },
    // 是否重复点击
    repeat: true,
    ...options
  });
  map.addControl(select);
  select.activate(); //激活要素选择控件
  return select;
}

/**
 * 初始化要素绘制控件
 * @param {Object} map 超图实例
 * @param {Object} drawLayer 矢量图层实例
 * @param {String} handlerType 处理器属性key,如'Point'
 * @param {Function} cb 要素添加回调,参数为要素详情
 * @param {Boolean} clear 是否清空绘制，自定义撒点等仅获取位置数据不进行绘制需要设置为true
 * @param {Object} options SuperMap.Control.DrawFeature其他配置
 */
export function drawFeature(
  map,
  drawLayer,
  handlerType,
  cb,
  clear,
  ...options
) {
  const hander = SuperMap.Handler;
  const drawF = new SuperMap.Control.DrawFeature(
    drawLayer,
    hander[handlerType],
    ...options
  );
  const mapDrawCompleted = evt => {
    //要素添加(通过activate方法开始并点击地图一处后触发)
    clear && drawLayer.removeAllFeatures();
    cb && cb(evt.feature);
  };
  drawF.events.on({ featureadded: mapDrawCompleted });
  map.addControl(drawF);
  return drawF;
}

/**
 * 初始化编辑矢量要素控件
 * @param {Object} map 超图实例
 * @param {Object} drawLayer 矢量图层实例
 */
export function modifyFeature(map, drawLayer) {
  const editDraw = new SuperMap.Control.ModifyFeature(drawLayer);
  const mapDrawPolygonModifyCompleted = evt => {
    if (evt.modified) {
      const polygonPoints = [];
      evt.feature.geometry.components[0].components.map(point => {
        polygonPoints.push({
          x: point.x,
          y: point.y
        });
      });
      console.log(polygonPoints);
    }
  };
  editDraw.events.on({
    afterfeaturemodified: mapDrawPolygonModifyCompleted
  });
  map.addControl(editDraw);
  return editDraw;
  // editDraw.activate()   //激活
  // editDraw.deactivate() //销毁
  // editDraw.redo() //恢复操作
  // editDraw.undo() //撤销操作
}

/**
 * 添加撒点
 * @param {Array} marks 撒点数据,每一项的属性：coord* '110.38751873999999,23.541600600000002'; size: new SuperMap.Size(30, 30); icon: require('assets/imgs/pub/point.png')
 * @param {Object} markLayer 撒点图层实例
 * @param {Function} cb 点击撒点回调；可调用createInfoWindow创建点击信息框,此时marks每一项还要满足createInfoWindow的参数m
 */
export function addMaker(marks, markLayer, cb) {
  if (!marks.length) return;
  const markers = [];
  marks.map(m => {
    const coord = m.coord.split(",");
    const size = m.size || new SuperMap.Size(36, 36);
    const offset = new SuperMap.Pixel(-(size.w / 2), -size.h);
    const icon = new SuperMap.Icon(
      m.icon || require("assets/imgs/pub/point.png"),
      size,
      offset
    );
    const marker = new SuperMap.Marker(
      new SuperMap.LonLat(coord[0], coord[1]),
      icon
    );
    // 添加marker事件，点击创建信息框
    const markerClick = () => {
      cb && cb(marker, m);
    };
    //撒点点击
    marker.events.on({
      click: markerClick
    });

    markLayer.addMarker(marker);
    markers.push(marker);
  });
  return markers;
}

/**
 * 创建撒点弹窗
 * @param {Object} map 超图实例
 * @param {Object} marker 当前撒点实例
 * @param {Object} m 撒点数据, 弹窗必须要这些属性：key: 唯一标识; descArr: 结构见infoWindowHtml;
 */
export function createInfoWindow(map, marker, m) {
  const closeId = `supermap-infowindow-close${m.key}`;
  const html = infoWindowHtml(m.descArr || [], closeId);
  //创建固定锚点位置的的浮动弹窗
  const infoWindow = new SuperMap.Popup.Anchored(
    `point${m.key}`, //弹窗唯一标识
    marker.lonlat, //弹窗位置
    null, // new SuperMap.Size(220, 140),	//弹窗内容大小
    html, //弹窗内容html字符串
    marker.icon, //弹窗锚点，包含一个大小信息 SuperMap.Size 和偏移信息 SuperMap.Size 的对象。(一般为 SuperMap.Icon 类型)
    false, //显示关闭按钮
    null //关闭按钮事件回调
  );
  infoWindow.autoSize = true; //自适应弹窗宽高
  //设置背景色
  infoWindow.setBackgroundColor("rgba(255,255,255,1)");
  // 添加自定义信息框
  map.addPopup(infoWindow);
  marker.infoWindow = infoWindow; //将弹窗对象挂载到对应maker方便清除

  // 添加自定义信息框关闭事件
  const domClose = document.getElementById(closeId);
  if (domClose) {
    const closeEvent = () => {
      clearInfoWindow(marker);
    };
    domClose.removeEventListener("click", closeEvent);
    domClose.addEventListener("click", closeEvent);
  }
  return;
}

/**
 * 获取弹窗html
 * @param {Arrar} descArr 弹窗信息,数组每项的name和value属性构建信息框; type:string: 为title为弹窗标题(只要一个为title)
 */
export function infoWindowHtml(descArr, closeId) {
  const htmlArr = [];
  htmlArr.push("<div class='supermap-infowindow-content'>");
  descArr.map(i => {
    if (i.type == "title") {
      htmlArr.push(
        `<div class='row head' title='${i.value}'><span>${i.value}</span></div>`
      );
    } else {
      htmlArr.push(
        `<div class='row'><span class='title'>${i.name}：</span><span title='${i.value}'>${i.value}</span></div>`
      );
    }
  });
  htmlArr.push(`<div class="row bottom" id="${closeId}">关闭</div>`);
  htmlArr.push("</div>");
  return htmlArr.join("");
}

/**
 * 获取可编辑文本html
 * @param {Array} data 文本框信息， 包含属性：key-唯一标识; text-初始文本内容
 * @param {String} closeId 关闭按钮id
 */
export function editTextHtml(data, closeId, inputId) {
  const htmlArr = [];
  const text = data.text || "请输入文字";

  htmlArr.push("<div class='supermap-textedit-content'>");
  htmlArr.push(`<input type="text" value="${text}" id="${inputId}" />`);
  htmlArr.push(
    `<a class="close" title="关闭" id="${closeId}"><span class="icon iconfont iconclose">X</span></a>`
  );
  htmlArr.push("</div>");
  return htmlArr.join("");
}

/**
 * 清空自定义撒点
 * @param {Array} markers 撒点实例数组
 * @param {Object} markLayer 撒点图层
 */
export function clearMarker(markers, markLayer) {
  if (!markers) return;
  markers.forEach(mk => {
    markLayer.removeMarker(mk);	//删除撒点图层的指定点
    mk.infoWindow && clearInfoWindow(mk);
  });
  markers = null;
}
/**
 * 清除撒点弹窗
 * @param {Object} mk 带有弹窗对象的撒点实例
 */
export function clearInfoWindow(mk) {
  const infoWindow = mk.infoWindow;
  if (!infoWindow) return;
  //只有infoWindow.hide()有用，infoWindow.show()无效，每次只能销毁和创建...........
  infoWindow.destroy();
  mk.infoWindow = null;
}

//REST
/**
 * 初始化量算服务
 * @param {Boolean} isDistance 距离还是面积
 * @param {Object} geo SuperMap.Geometry类型几何对象：距离是SuperMap.Geometry.LineString，面积是SuperMap.Geometry.Polygon
 * @param {Function} isDistance 服务端返回量算结果回调
 */
export function createMeasureSvr(isDistance, geo, cb) {
  const myMeasuerService = new SuperMap.REST.MeasureService(superMapServerUrl);
  const measureCompleted = args => {
    cb && cb(args);
  };

  const modeStr = isDistance ? "DISTANCE" : "AREA";
  myMeasuerService.events.on({ processCompleted: measureCompleted });
  // 测量模式,当判断出是LineString时设置MeasureMode.DISTANCE(距离)，否则是MeasureMode.Area(面积)
  myMeasuerService.measureMode = SuperMap.REST.MeasureMode[modeStr];
  const measureParam = new SuperMap.REST.MeasureParameters(geo);
  // processAsync负责将客户端的量算参数传递到服务端
  myMeasuerService.processAsync(measureParam);
}

//策略
/**
 * 创建标签渲染策略
 */
export function initTextSty(options, style) {
  const testSty = new SuperMap.Strategy.GeoText(...options);
  testSty.style = style || superMapDrawStyle();
  return testSty;
}

vue示例

示例整合： vm为vue组件实例，会为组件data中定义相关数据保存超图创建的实例，id为地图容器id

撒点

• 点击撒点

  export function clickAddMarker(id, vm) {
    vm.smap = initMap(id);
    vm.drawLayer = initDrawLayer();
    vm.markLayer = initMarkLayer();
    vm.baseLayer = initBaseLayer(vm.smap, [vm.drawLayer, vm.markLayer]);
  
    vm.mapDrawPoint = drawFeature(
      vm.smap,
      vm.drawLayer,
      "Point",
      f => {
        const geo = f.geometry;
        const mark = {
          coord: `${geo.x},${geo.y}`
        };
        clearMarker(vm.markers, vm.markLayer);
        vm.markers = addMaker([mark], vm.markLayer);
      },
      true
    );
  }

• 根据数据撒点(marker方式: 自定义图标)**并创建点击弹窗**

  // 示例数据
  // const markData = [
  //   { key: "id1", coord: "110.38416383175,23.536161129632", descArr: [{type: 'title', value: '广西南城第三中学'}, {type: '', name: '地址', value: '平南街道二环大道816号'}, {type: '', name: '电话', value: '07757860173'}] },
  //   { key: "id2", coord: "110.24612955917,23.275241314091", descArr: [{type: 'title', value: '广西南城百货有限责任公司平南分公司'}, {type: '', name: '地址', value: '平南镇朝阳路中心广场地下负二层'}, {type: '', name: '电话', value: '07752795222'}] }
  //];
  export function addMarkerByData(id, vm, markData) {
    vm.smap = initMap(id);
    vm.drawLayer = initDrawLayer();
    vm.markLayer = initMarkLayer();
    vm.baseLayer = initBaseLayer(vm.smap, [vm.drawLayer, vm.markLayer]);
  
    clearMarker(vm.markers, vm.markLayer);
    vm.markers = addMaker(markData, vm.markLayer, (marker, m) => {
      //点击撒点创建弹窗
      const curWindow = marker.infoWindow;
      if (curWindow) {
        return clearInfoWindow(marker);
      }
      createInfoWindow(vm.smap, marker, m);
    });
  }

  //撒点弹窗样式
  .smPopupContent {
    padding: 0 !important;
    .supermap-infowindow-content {
      background-color: #fff;
      border-radius: 5px;
      cursor: default;
      height: 100%;
      width: 100%;
      .row {
        display: flex;
        line-height: 25px;
        max-width: 200px;
        padding: 0 10px;
        &.head {
          display: flex;
          justify-content: center;
          align-items: center;
          background: #5b6996;
          line-height: 30px;
          padding: 0 20px;
          span {
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: white;
          }
          .icon-more {
            width: 15px;
            height: 15px;
            background: url("./assets/imgs/pub/bars.png") 0 0 no-repeat;
            background-size: 100%;
            position: absolute;
            right: 2px;
            &:hover {
              cursor: pointer;
            }
          }
        }
        &.bottom {
          line-height: normal;
          padding: 10px 0;
          display: flex;
          justify-content: center;
          color: #43cdd3;
          &:hover {
            cursor: pointer;
          }
        }
  
        span {
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          color: #666;
          display: block;
          flex-shrink: 1;
          font-size: 12px;
          width: 100%;
  
          &.title {
            color: #333;
            flex-shrink: 0;
            text-align: right;
            width: auto;
          }
        }
      }
      .close {
        display: block;
        position: absolute;
        right: 6px;
        top: 6px;
        z-index: 1;
  
        .icon {
          color: #72a9e4;
          font-weight: bold;
        }
      }
    }
  }

• 根据数据撒点(vector方式: 统计数字 + hover变色 + 提示)

  // 示例数据
  // const pointData = [
  //   { label: "1", name: "平南街道二环大道816号", coord: "110.38416383175,23.536161129632" },
  //   { label: "2", name: "平南镇朝阳路中心广场地下负二层", coord: "110.24612955917,23.275241314091" }
  // ];
  export function addVectorPoints(id, vm, pointData) {
    vm.smap = initMap(id);
    vm.drawLayer = initDrawLayer();
    vm.baseLayer = initBaseLayer(vm.smap, [vm.drawLayer]);
    //撒点添加
    pointData.map(item => {
      const coord = item.coord.split(",");
      const point = new SuperMap.Geometry.Point(coord[0], coord[1]);
      const style = {
        fontColor: "#fff",
        fontSize: "12px",
        label: item.label + "",
        labelAlign: "cm",
        pointRadius: 15,
        strokeColor: "#3b41c5",
        strokeWidth: 1,
        fillColor: "#a981bb"
      };
      const feature = new SuperMap.Feature.Vector(point);
      feature.data = JSON.parse(JSON.stringify(item));
      feature.style = style;
      vm.drawLayer && vm.drawLayer.addFeatures(feature);
    });
    vm.selectLabel = selectFeature(vm.smap, vm.drawLayer, {
      click(f) {
        console.log(f, "点击触发");
      }
    }, { 
      hover: true, //hover: true使点击无效仅hover生效
      onSelect(feature) {
        clearInfoWindow();
        // 选中要素操作
        feature.style.fillColor = "#20E2D7";
        vm.drawLayer.redraw(); //重新设置颜色后重新绘制
        const contentHTML = `<div style='width:max-content;padding:8px;color:black;font-size:12px;border:1px solid #ccc'>${
          feature.data.name
        }</div>`;
        vm.infoWindow = new SuperMap.Popup.Anchored(
          "chicken",
          new SuperMap.LonLat(
            feature.data.coord.split(",")[0],
            feature.data.coord.split(",")[1]
          ),
          null,
          contentHTML,
          new SuperMap.Icon(
            "",
            new SuperMap.Size(1, 1),
            new SuperMap.Pixel(0, -2)
          ),
          false,
          null
        );
        vm.infoWindow.autoSize = true;
        vm.smap.addPopup(vm.infoWindow);
      },
      onUnselect(feature) {
        clearInfoWindow();
        if (feature.data.isSelected) {
          return;
        } else {
          // 未选中要素操作
          feature.style.fillColor = "#a981bb";
          vm.drawLayer.redraw();
        }
      },
    }) 
  
    //清除弹窗
    function clearInfoWindow() {
      const w = vm.infoWindow;
      if (w) {
        w.destroy();
        vm.infoWindow = null;
      }
    }
  }

绘制

• 绘制多边形

  export function drawPolygon(id, vm) {
    vm.smap = initMap(id);
    vm.drawLayer = initDrawLayer();
    vm.baseLayer = initBaseLayer(vm.smap, [vm.drawLayer]);
  
    vm.mapDrawPolygon = drawFeature(
      vm.smap,
      vm.drawLayer,
      "Polygon",
      f => {
        //获得图层几何对象（保存绘制成功的点）
        const geometry = f.geometry;
        const polygonPoints = [];
        const root = geometry.components[0];
        root.components.map(point => {
          polygonPoints.push({
            x: point.x,
            y: point.y
          });
        });
        console.log(polygonPoints);
        vm.mapDrawPolygon.deactivate();
      },
      false
    );
  }

• 绘制矩形

  export function drawRect(id, vm) {
    vm.smap = initMap(id);
    vm.drawLayer = initDrawLayer();
    vm.baseLayer = initBaseLayer(vm.smap, [vm.drawLayer]);
    vm.drawRect = drawFeature(vm.smap, vm.drawLayer, "Box", rect => {
      const geometry = rect.geometry;
      const points = [];
      //Point创建点实例
      points.push(new SuperMap.Geometry.Point(geometry.x, geometry.y));
      points.push(
        new SuperMap.Geometry.Point(geometry.x + geometry.width, geometry.y)
      );
      points.push(
        new SuperMap.Geometry.Point(
          geometry.x + geometry.width,
          geometry.y + geometry.height
        )
      );
      points.push(
        new SuperMap.Geometry.Point(
          geometry.x,
          geometry.y + geometry.height
        )
      );
      points.push(new SuperMap.Geometry.Point(geometry.x, geometry.y));
        
      //通过点坐标绘制图形,可通过多个点绘制任意地图区域
      //LinearRing通过多个点创建线环
      const linearRings = new SuperMap.Geometry.LinearRing(points);
      //Polygon通过LinearRing创建多边形
      const polygon = new SuperMap.Geometry.Polygon([linearRings]);
      const style = superMapDrawStyle();
      //Feature.Vector创建矢量要素,参数：1-代表要素的几何实例，2-描述要素的可序列化属性,将映射到attributes，3-样式对象
      const newrect = new SuperMap.Feature.Vector(polygon, null, style);
      vm.drawLayer.removeFeatures(rect);  //删除绘制控件生成的默认矩形，再自定义设置后添加
      vm.drawLayer.addFeatures(newrect);
    })
    // vm.drawRect.activate() 激活
  }

• 绘制圆形

  export function drawCircular(id, vm) {
    vm.smap = initMap(id);
    vm.drawLayer = initDrawLayer();
    vm.baseLayer = initBaseLayer(vm.smap, [vm.drawLayer]);
    vm.drawCircular = drawFeature(vm.smap, vm.drawLayer, "RegularPolygon", cir => {
      const circular = cir;
      const style = superMapDrawStyle();
      circular.style = style;
      vm.drawLayer.removeFeatures(cir);  //删除默认圆形，再自定义设置后添加
      vm.drawLayer.addFeatures(circular);
  
    }, false, { handlerOptions: { sides: 50 } })
    //vm.drawCircular.activate() 激活
  }

• 绘制带箭头的线

  //绘制带箭头的线
  export function arrLine(id, vm) {
    vm.smap = initMap(id);
    vm.drawLayer = initDrawLayer();
    vm.baseLayer = initBaseLayer(vm.smap, [vm.drawLayer]);
    vm.arrLine = drawFeature(vm.smap, vm.drawLayer, "Path", line => {
      // 删除绘制的线
      const removeLine = line => {
        vm.drawLayer.removeFeatures(line);
      };
      // 获得图层几何对象
      const geometry = line.geometry;
      const root = geometry.components[0];
      const l = root.components.length;
      if (!root || l < 2) {
        removeLine(line);
        return;
      }
      
      // 绘制箭头线
      const Arrow = lineString => {
        const linepoints = lineString.components;
        const endPoint1 = linepoints[linepoints.length - 1];
        const endPoint2 = linepoints[linepoints.length - 2];
        const midPointX = endPoint2.x + 0.9 * (endPoint1.x - endPoint2.x);
        const midPointY = endPoint2.y + 0.9 * (endPoint1.y - endPoint2.y);
        const midPoint1 = new SuperMap.Geometry.Point(midPointX, midPointY);
        const midPoint2 = new SuperMap.Geometry.Point(midPointX, midPointY);
        // 在线上9/10的位置取一点连接直线末端做两条相同的短直线
        const points2 = [midPoint1, endPoint1];
        const rightLine = new SuperMap.Geometry.LineString(points2);
        rightLine.rotate(15, endPoint1);
        // 此为直线旋转，旋转角度可自由调节
        const points3 = [midPoint2, endPoint1];
        const leftLine = new SuperMap.Geometry.LineString(points3);
        leftLine.rotate(345, endPoint1);
        // 分别旋转两条短直线于lineString两侧，构成一个箭头样式
        const multiLineString = new SuperMap.Geometry.MultiLineString([
          lineString,
          rightLine,
          leftLine
        ]);
        const arrowLine = new SuperMap.Feature.Vector(multiLineString);
        const style = superMapDrawStyle();
        arrowLine.style = style;
        removeLine(line);
        vm.drawLayer.addFeatures(arrowLine);
      };
      Arrow(root);
  
    }, false, { multi: true })
  
    // vm.arrLine.activate() 激活
  }

• 带编辑框的文字(基于点绘制)

  export function drawTextPoint(id, vm) {
    const strategy = new SuperMap.Strategy.GeoText()
    strategy.style = superMapDrawStyle();
    strategy.style.fontColor = "#ff3300";
  
    vm.smap = initMap(id);
    vm.drawLayer = initDrawLayer({
      strategies: [strategy]
    });
    vm.baseLayer = initBaseLayer(vm.smap, [vm.drawLayer]);
    selectFeature(vm.smap, vm.drawLayer, {
      click(f) {
        console.log('点击文字重新编辑');
        clearTextEdit(vm);
        addTextEdit(vm, f);
      }
    })
    vm.mapTexts = vm.mapTexts || [];
  
    vm.drawTextPoint = drawFeature(vm.smap, vm.drawLayer, "Point", p => {
      // 获得图层几何对象
      const geometry = p.geometry;
      const coord = `${geometry.x},${geometry.y}`;
      const data = {
        key: GUID(),
        coord: coord
      };
      vm.drawLayer.removeFeatures(p)
      addText(vm, coord, data)
      vm.drawTextPoint.deactivate();
    })
    //vm.drawTextPoint.activate() 激活
  }
  // 根据坐标和数据添加文字标签
  export function addText(vm, coordStr, data) {
    const coord = coordStr.split(",");
    const text = data.text || "请输入文字";
    const geoText = new SuperMap.Geometry.GeoText(coord[0], coord[1], text);
    const feature = new SuperMap.Feature.Vector(geoText);
    feature.data = JSON.parse(JSON.stringify(data));
    feature.data.text = text;
    feature.data.type = "text";
    vm.drawLayer.addFeatures(feature);
    //存放便于清除
    vm.mapTexts.push({ key: data.key, text: feature });
    addTextEdit(vm, feature);
  }
  // 创建可输入的文字标签
  export function addTextEdit(vm, feature) {
    clearTextEdit(vm);
    const data = feature.data || {};
    const key = data.key || "";
    const closeId = `supermap-textedit-close${key}`;
    const inputId = `supermap-textedit-input${key}`;
    
    const html = editTextHtml(data, closeId, inputId);
  
    let coord = (data.coord || ",").split(",");
    const lonlat = new SuperMap.LonLat(coord[0], coord[1]);
    const size = new SuperMap.Size(0, 0);
    const offset = new SuperMap.Pixel(0, 0);
    const icon = new SuperMap.Icon(null, size, offset);
    vm.textWindow = new SuperMap.Popup.Anchored(
      `textEdit${data.key}`,
      lonlat,
      null,
      html,
      icon,
      false,
      null
    );
    vm.textWindow.autoSize = true;
    vm.textWindow.setBackgroundColor("rgba(255,255,255,0)");
    // 添加自定义信息框
    vm.smap.addPopup(vm.textWindow);
    // 添加自定义信息框输入回车事件
    const domInput = document.getElementById(inputId);
    if (domInput) {
      const enterEvent = e => {
        const theEvent = window.event || e;
        const code = theEvent.keyCode || theEvent.which || theEvent.charCode;
        if (code == 13) {
          const data = JSON.parse(JSON.stringify(feature.data));
          data.text = domInput.value;
          removeTextByKey(data.key, vm);
          addText(vm, data.coord, data);
          clearTextEdit(vm);
        }
      };
      domInput.removeEventListener("keydown", enterEvent);
      domInput.addEventListener("keydown", enterEvent);
    }
    // 添加自定义信息框关闭事件
    const domClose = document.getElementById(closeId);
    if (domClose) {
      const closeEvent = () => {
        clearTextEdit(vm);
      };
      domClose.removeEventListener("click", closeEvent);
      domClose.addEventListener("click", closeEvent);
    }
  }
  // 删除文字通过key
  export function removeTextByKey(key, vm) {
    let removeIndex = -1;
    vm.mapTexts.map((textObj, index) => {
      if (textObj.key === key) {
        vm.drawLayer.removeFeatures(textObj.text);
        removeIndex = index;
      }
    });
    if (removeIndex !== -1) {
      vm.mapTexts.splice(removeIndex, 1)
    }
  }
  // 删除上一个文字框
  export function clearTextEdit(vm) {
    const textW = vm.textWindow
    if (textW) {
      textW.destroy();
      vm.textWindow = null;
    }
  }

  //文字编辑框样式
  .supermap-textedit-content {
    background-color: #fff;
    cursor: default;
    padding: 8px 16px 8px 8px;
    position: relative;
    input {
      border: solid 1px #bdc4ca;
      border-radius: 3px;
      height: 30px;
      padding: 0 4px;
      width: 200px;
    }
    .close {
      display: block;
      position: absolute;
      right: 6px;
      top: 6px;
      z-index: 1;
      .icon {
        color: #666;
        font-size: 16px;
        font-weight: bold;
      }
    }
  }

测算

• 距离测算线

  export function distanceLine(id, vm) {
    vm.smap = initMap(id);
    vm.drawLayer = initDrawLayer();
    vm.baseLayer = initBaseLayer(vm.smap, [vm.drawLayer]);
    vm.labelCollection = vm.labelCollection || [];
    vm.distanceLabels = vm.distanceLabels || [];
    vm.drawDisLine = drawFeature(
      vm.smap,
      vm.drawLayer,
      "Path",
      f => {
        const ft = f;
        const key = GUID();
        ft.data.key = key; //添加唯一key
        ft.data.type = "distancecal";
        // vm.distanceLines.push(ft);//保存要素对象，方便通过绘制图层的removeFeatures方法清除
        vm.distanceLabelsCal = [];
        vm.distanceTotal = 0;
        // 获得图层几何对象
        const geometry = ft.geometry;
        const root = geometry.components[0];
        if (!root) {
          return;
        }
        const l = root.components.length;
        if (l < 2) {
          return;
        }
        vm.labelCollection.push(0);
        let i = 0;
        for (i = 0; i < l; i++) {
          if (i === l - 1) {
            return;
          }
          // 开始点结束点
          const points = [
            new SuperMap.Geometry.Point(
              root.components[i].x,
              root.components[i].y
            ),
            new SuperMap.Geometry.Point(
              root.components[i + 1].x,
              root.components[i + 1].y
            )
          ];
          const line = new SuperMap.Geometry.LineString(points);
          createMeasureSvr(true, line, measureRes => {
            const distance = parseFloat(measureRes.result.distance.toFixed(2));
            vm.distanceTotal += distance;
            const points = JSON.parse(
              measureRes.object.options.params.point2Ds.replace(/'/g, '"')
            );
            const style = superMapDrawStyle();
            style.fontColor = "#ff3300";
            style.labelAlign = "rt";
            // 添加每段长度标签
            const point = new SuperMap.Geometry.Point(points[1].x, points[1].y);
            const label = new SuperMap.Feature.Vector(point);
            label.style = style;
            label.style.label = `${distance}米`;
            label.data.key = key;
            label.data.type = "distancecal";
            vm.drawLayer.addFeatures(label);
            vm.distanceLabels.push(label);
            vm.distanceLabelsCal.push({
              point: point,
              label: label
            });
            vm.labelCollection[vm.labelCollection.length - 1] += 1;
            if (vm.distanceLabelsCal.length === 1) {
              // 第一个添加起点标签
              const pointStart = new SuperMap.Geometry.Point(
                root.components[0].x,
                root.components[0].y
              );
              const label = new SuperMap.Feature.Vector(pointStart);
              const labelStyle = superMapDrawStyle();
              labelStyle.fontColor = "#ff3300";
              labelStyle.labelAlign = "rb";
              labelStyle.label = "起点";
              label.style = labelStyle;
              label.data.key = key;
              label.data.type = "distancecal";
              vm.drawLayer.addFeatures(label);
              vm.distanceLabels.push(label);
              vm.labelCollection[vm.labelCollection.length - 1] += 1;
            }
            if (vm.distanceLabelsCal.length === l - 1) {
              // 更新最后一个标签显示总长度
              vm.distanceLabelsCal.map(item => {
                if (
                  item.point.x === root.components[l - 1].x &&
                  item.point.y === root.components[l - 1].y
                ) {
                  item.label.style.label = `${
                    item.label.style.label
                  }，共${vm.distanceTotal.toFixed(2)}米`;
                  vm.drawLayer.redraw();
                }
              });
            }
          });
        }
      },
      false,
      { multi: true }
    );
    //vm.drawDisLine.activate()激活
  }

• 面积测算(多边形)

  export function measureArea(id, vm) {
    vm.smap = initMap(id);
    vm.drawLayer = initDrawLayer();
    vm.baseLayer = initBaseLayer(vm.smap, [vm.drawLayer]);
    vm.mapAreaLabels = vm.mapAreaLabels || [];
    vm.mapLabelCollection = vm.mapLabelCollection || [];
    vm.areaMeasure = drawFeature(
      vm.smap,
      vm.drawLayer,
      "Polygon",
      f => {
        const ft = f;
        const key = GUID();
        ft.data.key = key; //添加唯一key
        ft.data.type = "areacal";
        // 获得图层几何对象
        const geometry = ft.geometry;
        const root = geometry.components[0];
        if (!root) {
          return;
        }
        createMeasureSvr(false, geometry, (measureRes) => {
          const area = measureRes.result.area;
          console.log(measureRes);
          const points = JSON.parse(
            measureRes.object.options.params.point2Ds.replace(/'/g, '"')
          );
          const style = superMapDrawStyle();
          style.fontColor = "#ff3300";
          style.labelAlign = "rt";
          // 添加面积标签
          const point = new SuperMap.Geometry.Point(points[0].x, points[0].y);
          const label = new SuperMap.Feature.Vector(point);
          label.style = style;
          label.style.label = `${area.toFixed(2)}平方米`;
          label.data.key = key;
          label.data.type = "areacal";
          vm.drawLayer.addFeatures(label);
          vm.mapAreaLabels.push(label);
          vm.mapLabelCollection[vm.mapLabelCollection.length - 1] += 1;
        })
      },
    );
    //vm.areaMeasure.activate()激活
  }

地址匹配

//地址匹配
export function addressMatch(vm) {
  vm.addrMatchSvr = new SuperMap.REST.AddressMatchService(
    superMapAddressGeoCodingUrl,//匹配服务地址
    { data: "11" }	//可选参数
  );

  const geoCodeParam = new SuperMap.GeoCodingParameter({
    address: "地址",  //匹配关键字
    fromIndex: 0,
    toIndex: 99,
    maxReturn: 100,
    prjCoordSys: "{epsgcode: 4326}",
  })

  //匹配成功回调
  const matchCb = (m) => {
    const res = [];
    m.result.map((item) => {
      res.push({
        unitName: item.address,
        coord: `${item.location.x},${item.location.y}`,
        filters: item.filters.join(","),
      });
    });
    console.log(res);
  }
  vm.addrMatchSvr.code(geoCodeParam, matchCb)
}

清除(撤销)绘制

marker撒点，markerLayer.removeMarker(marker)指定移除，markerLayer.clearMarkers()清空

矢量绘制，vectorLayer.removeFeatures(Array[feature])指定移除，vectorLayer.removeAllFeatures()清空

Anchored浮动弹窗, popWin.destroy() 销毁，销毁不会删除该对象，清空变量需要手动赋值

逐步撤销功能需要记录绘制的对象调用对应的移除方法

截图

1. 引入MapToImg.js

2. MapToImg.excute(超图实例, "容器父id");

3. 设置预览样式:

   // 超图截图预览
   .supermap-screenshot-preview {
     .preview-tool {
       display: flex;
       background-color: #fff;
       border: solid 1px #999;
       border-radius: 3px;
       height: 30px;
       overflow: hidden;
       position: absolute;
       right: 15px;
       top: 15px;
       z-index: 1;
       .button {
         background-color: #fff;
         border-right: dashed 1px #999;
         color: #666;
         display: block;
         flex-shrink: 0;
         font-size: 14px;
         height: 30px;
         line-height: 30px;
         margin: 0;
         padding: 0;
         text-align: center;
         width: 50px;
         input {
           background-color: rgba(0, 0, 0, 0);
           border: none;
         }
       }
       .button:last-child {
         border-right-width: 0;
       }
       .button:hover {
         background-color: #eaeaea;
       }
     }
   }

注意:

1.创建底图图层时第四个参数必须要有useCORS: true 允许跨域

2.截图工具是绝对定位，父容器最好相对定位不会变形。

3.超图的z-index尽量小于截图工具的2使工具能覆盖之上

百度地图

// 8、百度地图
/*
 * 初始化地图
 * @param id 地图domId
 * @param mapStyle 地图样式
 */
export function initMap(id, mapStyle) {
  const options = {
    minZoom: 10,
    maxZoom: 19,
    enableMapClick: false,
    enableAutoResize: true
  };
  // eslint-disable-next-line
  const map = new BMap.Map(id, options);
  if (mapStyle) {
    map.setMapStyleV2({ styleJson: mapStyle });
  }
  map.enableAutoResize();
  map.disableDoubleClickZoom();
  map.enableScrollWheelZoom();
  map.enableInertialDragging();
  return map;
}
/*
 * 设置地图中心点
 * @param map 地图对象
 * @param lng 经度
 * @param lat 纬度
 * @param zoom 缩放比例
 */
export function setMapCenter(map, lng, lat, zoom = 10) {
  // eslint-disable-next-line
  const point = new BMap.Point(lng, lat);
  map.centerAndZoom(point, zoom);
}
/*
 * 创建地图点
 * @param lon 经度
 * @param lat 纬度
 */
export function newMapPoint(lon, lat) {
  // eslint-disable-next-line
  return new BMap.Point(lon, lat);
}
/*
 * 清空地图覆盖物
 * @param map 地图对象
 * @param type 覆盖物类型
 */
export function clearMapOverlays(map, type) {
  if (type) {
    const overlays = map.getOverlays();
    overlays.map(overlay => {
      if (overlay.toString() === type) {
        map.removeOverlay(overlay);
      }
    });
  } else {
    map.clearOverlays();
  }
}
/*
 * 添加地图marker
 * @param map 地图对象
 * @param point 点位
 * @param img 图片
 * @param imgHeight 图片高度
 * @param imgWidth 图片宽度
 */
export function addMapMarker(map, point, img, imgHeight, imgWidth) {
  const imgObj = require(`../assets/img/map-point/${img}@3x.png`);
  // eslint-disable-next-line
  const size = new BMap.Size(imgWidth, imgHeight);
  // eslint-disable-next-line
  const icon = new BMap.Icon(imgObj, size, { imageSize: size });
  // eslint-disable-next-line
  const marker = new BMap.Marker(point, { icon: icon });
  map.addOverlay(marker);
  return marker;
}
/*
 * 清空地图marker
 * @param map 地图对象
 * @param markers marker集
 */
export function clearMapMarkers(map, markers) {
  markers.map(marker => {
    if (marker.id !== null) {
      marker.id = null;
    }
    if (marker.name !== null) {
      marker.name = null;
    }
    if (marker.marker) {
      marker.marker.removeEventListener("click");
      marker.marker = null;
    }
    if (marker.infoWindow) {
      map.closeInfoWindow(marker.infoWindow);
      marker.infoWindow = null;
    }
    if (marker.isAlarm !== undefined && marker.isAlarm !== null) {
      marker.isAlarm = null;
    }
    if (marker.isShow !== undefined && marker.isShow !== null) {
      marker.isShow = null;
    }
  });
  clearArrayAfter(markers);
  clearMapOverlays(map, "[object Marker]");
}
/*
 * 添加地图线
 * @param map 地图对象
 * @param points 点
 * @param strokeColor 填充颜色
 */
export function addMapPolyline(map, points, strokeColor) {
  // eslint-disable-next-line
  const polyline = new BMap.Polyline(points, {
    strokeColor: strokeColor
  });
  map.addOverlay(polyline);
  return polyline;
}
/*
 * 添加驾车线路
 * @param map 地图对象
 * @param pointStart 开始点
 * @param pointEnd 结束点
 * @param strokeColor 填充颜色
 * @param complete 规划驾车路线完成
 * @param driveLineI 驾车路线动画计时器
 */
export function addMapDriveLine(
  map,
  pointStart,
  pointEnd,
  strokeColor,
  complete,
  driveLineI = null
) {
  // eslint-disable-next-line
  const drv = new BMap.DrivingRoute(pointEnd, {
    onSearchComplete: res => {
      // eslint-disable-next-line
      if (drv.getStatus() == BMAP_STATUS_SUCCESS) {
        const plan = res.getPlan(0);
        const time = plan.getDuration(true);
        const distance = plan.getDistance(true);
        if (complete && typeof complete === "function") {
          complete(time, distance);
        }
        let linePoints = [];
        let i = 0;
        for (i = 0; i < plan.getNumRoutes(); i++) {
          const route = plan.getRoute(i);
          linePoints = linePoints.concat(route.getPath());
        }
        if (!driveLineI) {
          // 添加线路
          addMapPolyline(map, linePoints, strokeColor);
        } else {
          // 添加线路动画
          const l = linePoints.length;
          let start = 3;
          driveLineI = setInterval(() => {
            addMapPolyline(map, linePoints.slice(0, start), strokeColor);
            start += 1;
            if (start > l) {
              // 清空驾车路线
              // clearMapDriveLine(map);
              start = 3;
              stopMapDriveLine(driveLineI);
            }
          }, 10);
        }
      }
    }
  });
  drv.search(pointStart, pointEnd);
}
/*
 * 清空驾车路线
 * @param map 地图对象
 */
export function clearMapDriveLine(map) {
  clearMapOverlays(map, "[object Polyline]");
}
/*
 * 停止驾车路线动画
 * @param driveLineI 驾车路线动画定时器
 */
export function stopMapDriveLine(driveLineI) {
  if (driveLineI) {
    clearInterval(driveLineI);
    driveLineI = null;
  }
}
/*
 * 添加地图信息窗口
 * @param data 数据
 */
export function addMapInfoWindow(data) {
  // 弹窗内容
  const infoHtml = [];
  infoHtml.push("<div class='infow-h-box1'>");
  infoHtml.push("<div class='infow-h'>");
  /* 标题 */
  infoHtml.push("<div class='inf-top'>");
  infoHtml.push("<div class='inf-top-icon'></div>");
  infoHtml.push(`<div class='inf-top-title'>${data.name}</div>`);
  infoHtml.push(
    `<div class='inf-top-state${
      parseInt(data.isAlarm) === 1 ? " inf-top-state-abnormal" : ""
    }'>${parseInt(data.isAlarm) === 1 ? "异常" : "正常"}</div>`
  );
  infoHtml.push("</div>");
  /* 标题 */
  /* 内容 */
  infoHtml.push("<div class='inf-bottom'>");
  infoHtml.push(
    `<a id='goNavMap_${data.id}' class='inf-btn' style='margin-right: 25px; background: #3CC4AC;'>导航</a>`
  );
  infoHtml.push(
    `<a id='goView_${data.id}' class='inf-btn' style='background: #FF9800;'>查看</a>`
  );
  infoHtml.push("</div>");
  /* 内容 */
  infoHtml.push("</div>");
  // 箭头
  infoHtml.push("<div class='inf-triangle'></div>");
  infoHtml.push("</div>");
  // 弹窗大小
  const options = {
    width: 220,
    height: 162
  };
  // 创建信息窗口对象
  // eslint-disable-next-line
  const infoWindow = new BMap.InfoWindow(
    infoHtml.join(""),
    options
  );
  return infoWindow;
}
/*
 * 地图路线规划调用app地址
 * @param destination 终点坐标
 */
export function mapDirection(destination) {
  return `${isIOS() ? "baidumap" : "bdapp"}://map/direction?destination=${
    destination.lat
  },${destination.lng}&mode=driving&src=${
    isIOS() ? "ios" : "andr"
  }.baidu.openAPIdemo`;
}
/*
 * 调用第三方地图程序导航
 * @param pointStart 起点坐标
 * @param pointEnd 终点坐标
 * @param pointEndName 终点名称
 */
export function callNav(pointStart, pointEnd, pointEndName = "") {
  if (pointStart && pointEnd) {
    if (!window.plus) {
      window.open(
        mapDirection({ lng: pointEnd[0], lat: pointEnd[1] }),
        "_blank"
      );
      return;
    }
    // eslint-disable-next-line
    if (plus.os.name === "Android" && navigator.userAgent.indexOf("StreamApp") > 0) {
      // eslint-disable-next-line
      // plus.nativeUI.toast("当前环境暂不支持地图插件");
      window.open(
        mapDirection({ lng: pointEnd[0], lat: pointEnd[1] }),
        "_blank"
      );
      return;
    }
    // 设置目标位置坐标点和其实位置坐标点
    // eslint-disable-next-line
    const dst = new plus.maps.Point(pointEnd[0], pointEnd[1]);
    // eslint-disable-next-line
    const src = new plus.maps.Point(pointStart[0], pointStart[1]);
    // 调用系统地图显示
    // eslint-disable-next-line
    plus.maps.openSysMap(dst, pointEndName, src);
  }
}

样式覆盖

// 百度地图样式
//隐藏logo，版权标识
.anchorBL > a,
.BMap_cpyCtrl {
  display: none;
}
//比例尺
.BMap_scaleCtrl {
  transform: translate(-56px, -6px);
}

自定义信息框

InfoWindow样式单一，使用InfoBox可高度定制样式:

//marker为点击撒点的maeker实例
//将创建的infoBox保存到对应的点数据中，方便调用`close`清除弹窗
point.infoBox = new BMapLib.InfoBox(map, html, {
  boxStyle: {
    width: "auto",
    height: "auto"
  },
  offset: new this.BMap.Size(0, 16),
  enableAutoPan: true,
  // eslint-disable-next-line
  align: INFOBOX_AT_TOP
});
point.infoBox.open(marker);

需要引入百度地图和InfoBox

地址匹配

const _this = this;
const local = new BMap.LocalSearch(map, {
  pageCapacity: 20,
  onSearchComplete: function(res) {
    res.Br.map(item => {
      _this.searchList.push({
        address: item.title,
        coord: item,
        filters: item.address
      });
    });
    _this.loading = false;
  }
});
local.search("关键字");

距离测算

const start = new this.BMap.Point(lngS, latS);
const end = new this.BMap.Point(lngE, latE);
map.getDistance(start, end) //默认单位是m

绘制线条

有两种方式:

• 使用PolyLine类或vue-baidu-map的bm-polyline组件，监听线条点击和lineupdate切换编辑状态。监听地图点击增加点，双击结束编辑:

  clickMap(e) {
    if (!this.drawPolylineEdit) return;
    if (this.dbTimer) {
      //双击，结束编辑,自带的dbclick事件在编辑时失效
      clearTimeout(this.dbTimer);
      this.dbTimer = null;
      return (this.drawPolylineEdit = false);
    }
    this.dbTimer = setTimeout(() => {
      clearTimeout(this.dbTimer);
      this.dbTimer = null;
      this.drawPolyline.push(e.point);
      if (this.drawPolyline.length > 1) {
        this.$emit(
          "drawFinish",
          this.drawPolyline.map(item => {
            return [item.lng, item.lat];
          })
        );
      }
      this.initDrawPolylineDistances();
    }, 200);
  },
  //点击线开始编辑
  clickDrawLine(e) {
    this.drawPolylineEdit = true;
    e.domEvent.stopPropagation();
  },
  // 编辑线
  updatePolyline(e) {
    this.drawPolyline = e.target.getPath();
    this.initDrawPolylineDistances();
    this.$emit(
      "drawFinish",
      this.drawPolyline.map(item => {
        return [item.lng, item.lat];
      })
    );
  },
  // 清空画线

• 使用DrawingManager，绘制管理，除画线外还支持其他矢量图形

  //需要引入百度地图及其DrawingManager.js
  export const BMAP_DRAWING_MARKER = "marker";
  export const BMAP_DRAWING_POLYLINE = "polyline";
  export const BMAP_DRAWING_CIRCLE = "circle";
  export const BMAP_DRAWING_RECTANGLE = "rectangle";
  export const BMAP_DRAWING_POLYGON = "polygon";
  export function drawingManager(map, BMap) {
    // 绘制框的样式设置
    // http://api.map.baidu.com/library/DrawingManager/1.4/docs/symbols/BMapLib.DrawingManager.html
    let styleOptions = {
      strokeColor: "", // 边线颜色。
      fillColor: "#1989fa", // 填充颜色。当参数为空时，圆形将没有填充效果。
      strokeWeight: 2, // 边线的宽度，以像素为单位。
      // strokeOpacity: 0.8,     //边线透明度，取值范围0 - 1。
      fillOpacity: 0.2, // 填充的透明度，取值范围0 - 1。
      strokeStyle: "solid" // 边线的样式，solid或dashed。
    };
    /* global BMapLib */
    return new BMapLib.DrawingManager(map, {
      isOpen: false, // 是否开启绘制模式
      enableDrawingTool: false, // 是否显示工具栏
      // drawingType: BMAP_DRAWING_CIRCLE,
      enableCalculate: false, // 绘制是否进行测距
      drawingToolOptions: {
        anchor: "BMAP_ANCHOR_TOP_RIGHT", // 位置
        offset: new BMap.Size(5, 5), // 偏离值
        scale: 0.8, // 工具栏缩放比例
        drawingTypes: [
          // BMAP_DRAWING_MARKER, // 画点
          // BMAP_DRAWING_CIRCLE, // 画圆
          BMAP_DRAWING_POLYLINE // 画线
          // BMAP_DRAWING_POLYGON, // 画多边形
          // BMAP_DRAWING_RECTANGLE // 画矩形
        ]
      },
      rectangleOptions: styleOptions, // 矩形的样式
      circleOptions: styleOptions, // 圆形的样式
      polygonOptions: styleOptions // 多边形的样式
    });
  }
  //绘制完成事件中，通过overlay.getPath()获取点集

每次增加点需要进行距离测算叠加，在前后两点重点显示距离；为避免标注太多杂乱，可设置小于一定值不显示，若最终都没有显示就取首位两个点的中点显示

其他

缩放等级

使用百度地图过程中，发现地图的最大缩放等级最多为19，20m级，怎么设置maxZoom都没用；但是官方示例中却能缩放到5m级？

可以设置全局变量解决:

//定义后默认最大缩放等级就是maxZoom，不同实例可以自行再加限制
const maxZoom = 21; //最大层级重定义，默认19
window.BMAP_NORMAL_MAP.m.u4 = window.BMAP_NORMAL_MAP.m.qc = window.BMAP_NORMAL_MAP.m.maxZoom = window.BMAP_PERSPECTIVE_MAP.m.u4 = window.BMAP_PERSPECTIVE_MAP.m.qc = window.BMAP_PERSPECTIVE_MAP.m.maxZoom = window.BMAP_SATELLITE_MAP.m.u4 = window.BMAP_SATELLITE_MAP.m.qc = window.BMAP_SATELLITE_MAP.m.maxZoom = window.BMAP_HYBRID_MAP.m.u4 = window.BMAP_HYBRID_MAP.m.qc = window.BMAP_HYBRID_MAP.m.maxZoom = maxZoom;   

一般情况下不要超过20，底图会是空白。

思极地图

• js api文档：https://lbs.sgmap.cn/products/docs/#/guide/quick-quickstart

• 导入样式和js文件

  <link rel="stylesheet" type="text/css" href="https://lbs.sgmap.cn/api/epgis-1.5.0.css" />
  <script src="https://lbs.sgmap.cn/api/epgis-js-1.5.0.min.js"></script>

公共

// 思极地图账号
export const epmapKey = "keyxxxxxxxxxxxx";
export const epmapSN = "snxxxxxxxxxxxx";

// 思极地图默认中心点
export const epMapDefCenter = [108.94327000000001, 34.338660000000004];

// 思极地图地址匹配过滤条件
export const epMapSearchPlaceFilters = "陕西省";

/**
 * 地图服务登录
 * @param {Function}} callback 登录成功回调
 */
export function epLogin(callback) {
  epgis.tokenTask.login(epmapKey, epmapSN).then(function() {
    //所有操作都需要在登录后
    callback && callback();
  });
}

/**
 * 初始化地图
 * @param {String} container 容器id
 * @param {Number} zoom 默认缩放
 * @param {Array} center 中心点
 * @param {Function} cb 地图初始渲染完成回调
 */
export function initMap(container, zoom, center = epMapDefCenter, cb) {
  //创建地图，
  const map = new epgis.Map({
    container,
    style: "aegis://styles/aegis/Streets", //指定底图样式: 这是标准底图(适合pc) 还有栅格版(适合移动端),卫星影像版
    zoom,
    center,
    localIdeographFontFamily: "Microsoft YoHei" //默认字体
  });
  cb && map.on("load", cb); //添加图层等操作需要在load回调后
  //添加比例尺控件
  map.addControl(
    new epgis.ScaleControl({
      maxWidth: 80,	//比例尺显示的最大长度px
      unit: "metric"//距离单位 metric-米
  }))
  return map;
}

示例

//设置中心后立即改变缩放会失效，需要使用定时器间隔
//设置中心点
map.panTo(new epgis.LngLat(lon, lat))//LngLat创建经纬度对象

//设置缩放级别
map.zoomTo(number)

/**
 * 添加marker
 * @param {Object} map 地图实例
 * @param {Array} coord 经纬度坐标
 * @param {Object} options marker配置
 */
export function addMarker(map, coord, className, options = {anchor: "bottom"}) {
  const mkDom = document.createElement("div");
  mkDom.className = className; //必须在marker创建前添加class，可自定义样式的同时让其内部进行区分，若创建后再设置改dom元素className撒点位置会偏移
  
  const marker = new epgis.Marker(mkDom, options);
  marker.setLngLat(coord).addTo(map); //添加到地图
  //marker.getElement(); //获取撒点的html元素,方便添加事件和dom操作
  return marker;
}

/**
 * 自定义信息弹窗
 * @param {Object} target 目标实例： 地图实例-直接addTo到地图,需要自定义点击显示隐藏   marker实例-与marker绑定(setPopup)点击marker自动显示隐藏,不用传coord
 * @param {Array} coord 经纬度坐标
 * @param {String} html 弹窗内容字符串
 * @param {Object} options popup配置项
 */
export function addPop(target, coord, html, options) {
  const infoWin = new epgis.Popup({
    // 是否显示关闭按钮
    closeButton: false,
    // 是否单击地图关闭信息框
    closeOnClick: false,
    ...options
    // className: "自定义class",//方便自定义样式
    // offset: { //弹窗相对于点像素偏移
    //   bottom: [x, y]
    // }
  });
  infoWin.setHTML(html);
  if (target.addControl) {
    //说明是地图实例
    infoWin.setLngLat(coord).addTo(target);
  } else {
    //绑定到marker上不用再setLngLat设置坐标
    target.setPopup(infoWin);
  }

  return infoWin;

  //直接addTo到地图上: infoWin.remove()移除
  //setPopup绑定到marker的：通过marker.getPopup()获取绑定的popup, marker.setPop(undefined/null)永久销毁, marker.remove()移除
  //infoWin.getElement()或infoWin._content获取弹窗内容dom元素 绑定到marker上getElement获取不到
}

//添加矢量图形
/**
 * 绘制线条(不可编辑,比DrawPolylineHandler可设置更多样式)
 * @param {Object} map 地图实例
 * @param {String} id 唯一标识
 * @param {Array[]} coordinates 二维数组，多个点坐标描述线条
 * @param {Object} layout 线条布局配置
 * @param {Object} paint 线条样式配置
 */
export function addLine(map, id, coordinates, layout = {}, paint = {}) {
  map.addLayer({
    id, //图层唯一标识
    type: "line",
    source: {
      type: "geojson",
      data: {
        type: "FeatureCollection",
        features: [
          {
            type: "Feature",
            geometry: {
              type: "LineString",
              coordinates //多个点坐标描述线条
            }
          }
        ]
      }
    },
    layout: {
      //线末端样式，butt-方形(默认，仅绘制到端点) round-圆形(超出端点线宽1/2) square-方形(超出端点线宽1/2)
      "line-cap": "round",
      //线交叉时样式,miter-尖形交角(默认) round-圆型交点 bevel-方型交点
      "line-join": "round",
      ...layout
    },
    paint: {
      "line-color": "#f60", //线条颜色
      "line-width": 10, //线宽 - px
      "line-opacity": 0.8, //线不透明度
      ...paint
    }
  });
}
/**
 * 绘制线条标注
 * @param {Object} map 地图实例
 * @param {String} id 唯一标识
 * @param {Array[]} coordinates 二维数组，多个点坐标描述线条
 * @param {String} name 标注文字
 * @param {Object} layout 标注布局配置
 * @param {Object} paint 标注样式配置
 */
export function addLineTag(
  map,
  id,
  coordinates,
  name,
  layout = {},
  paint = {}
) {
  map.addLayer({
    id,
    type: "symbol",
    source: {
      type: "geojson",
      data: {
        type: "FeatureCollection",
        features: [
          {
            type: "Feature",
            geometry: {
              type: "LineString",
              coordinates //多个点坐标描述要标注的线条
            },
            properties: {
              name
            }
          }
        ]
      }
    },
    layout: {
      "text-font": ["Microsoft YaHei Regular"], //标注字体
      "symbol-placement": "line", //标注相对于几何要素的位置, line-边线上 point-点上(默认)
      "text-ignore-placement": true, //其他注记碰到此文本标注是否会显示
      "text-field": "{name}", //设置标注的字段，对应properties内的属性值将作为标注
      "text-size": 12, //字体大小 - px
      "text-allow-overlap": true, //此文本标注碰到其他注记是否显示
      "text-max-width": 50, //文本换行的最大宽 - px
      "text-anchor": "top", //文本停靠到点的位置
      ...layout
    },
    paint: {
      "text-color": "#fc6766", //文本颜色
      "text-halo-color": "#ffffff", //文本光晕颜色
      "text-halo-width": 1.33333, //光晕离字体轮廓的距离，最大为字体大小1/4
      ...paint
    }
  });
}

//删除绘制
//getLayer返回图层对象或undefined; removeLayer移除图层,图层不存在会派发错误事件
/**
 * 删除图层
 * @param {Object} map 地图实例
 * @param {String} layerId 图层唯一标识
 */
export function removeLayer(map, layerId) {
  map.getLayer(layerId) && map.removeLayer(layerId);
}
//source同理
/**
 * 删除数据源
 * @param {Object} map 地图实例
 * @param {String} sourceId 数据源唯一标识
 */
export function removeSource(map, sourceId) {
  map.getSource(sourceId) && map.removeSource(sourceId);
}

//编辑矢量图形
/**
 * 画线(可编辑)
 * @param {Object} map 地图实例
 * @param {String} id 标识
 * @param {Array[]} coordinates 二维数组，多个坐标描述线条
 * @param {Object} option DrawPolylineHandler配置项
 */
export function addPolyLine(map, id, coordinates, option = {}) {
  const drawPolyline = new epgis.DrawPolylineHandler({
    map,
    enableEdit: true,
    featuresList: [
      {
        type: "Feature",
        geometry: {
          type: "LineString",
          coordinates
        },
        properties: {
          id
        }
      }
    ],
    drawColor: "#68a1e7",
    editColor: "#fcc25d",
    ...option
  });
  return drawPolyline;
}
//添加绘制事件，绘制事件可以是: "draw.polyline.addPoint"-添加节点 "edit.polyline.start"-编辑开始
//"edit.polyline.change"- 编辑变更 "edit.polyline.end"-编辑结束 "draw.polyline.end"-画线结束
drawPolyLine.on("绘制事件", callback)
//没找到点击事件，可在编辑开始事件回调加入`setTimeout(() => drawPolyline.endDraw(), 0)`立即结束编辑模拟点击事件，不用setTimeout异步包一层endDraw会失效
drawPolyline.getFeatures()//获取绘制的矢量信息,包括坐标集
drawPolyline.endDraw()//手动结束编辑
drawPolyline.startDraw()//手动开始编辑
drawPolyline.clearDataById(id) //根据id清空画线，对应创建时featuresList.properties中的id
drawPolyline.clearData()//清除所有画线
drawPolyline.remove()//删除实例

/**
 * 地址匹配
 * @param {String} query 匹配字段
 * @param {Function} callback 搜索回调
 */
export function addrMatch(query, callback) {
  query.trim && (query = query.trim());
  if (!query) return;
  //PlaceSearchTask创建关键字查询服务
  const placeSearchTask = new epgis.PlaceSearchTask();
  placeSearchTask
    .searchPlace({
      query,
      region: epMapSearchPlaceFilters, //搜索行政区名，配合cityLimit限制此区域内查询
      cityLimit: true,
      pageIndex: 1, //起始页码(默认1)
      pageSize: 30, //返回数量(默认10)
      isEncode: false //数据是否编码,编码后坐标不能直接使用
    })
    .then(result => {
      const resAddr = [];
      result.pois.map(item => {
        resAddr.push({
          address: item.text,
          coord: item.center,
          filters: item.place_name
        });
      });
      callback && callback(resAddr);
    });
}

其他

样式注意

// 思极地图隐藏自带logo
.epgis-logo,
.epgis-attribution {
  visibility: hidden;
}
// 思极地图比例尺位置
.epgis-ctrl-scale2 {
  left: 5px;
}

地图坐标转换

各方定位经纬度格式有区别，可能造成定位偏移不准确，需要判断经纬度格式并进行转换

可以使用coordtransform.js

设备中获取经纬度(GPS)

//百度sdk默认是DB-09,也可以是GCJ-02
//高德sdk是GCJ-02
//ios原生定位是WGC

互联网在线地图

GCJ-02:
  IOS地图(高德)
  Gogole地图
  搜搜，阿里云，高德
BD-09:
  百度
WGS84:
  国际标准，谷歌国外地图，osm等国外一般都是这个，supermap应该也是

赏

谢谢你请我吃糖

支付宝

微信

• 本文作者： MR-QXJ
• 本文链接： https://mr-qxj.github.io/2021/06/07/其他/地图总结/
• 版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！