鼠标手势

地图提供了

setCursor(cursor) cursor其就是css 的cursor
resetCursor() 重置地图鼠标手势

方法来设置鼠标的手势

map.setCursor("move");
//map.resetCursor();

map.setCursor("url(../assets/image/draw.png) 4 10, auto");

下面的例子里演示了当用户开始绘制时自动将鼠标手势设置为画笔,绘制结束了就重置地图手势为原来的初始状态,业务里根据自己的需求设置对应的cursor值即可

var drawTool = new maptalks.DrawTool({
  mode: "Point",
  once: true,
})
  .addTo(map)
  .disable();

drawTool.on("drawend", function (param) {
  console.log(param.geometry);
  layer.addGeometry(param.geometry);
  //绑定信息框
  param.geometry.setInfoWindow({
    content: param.geometry.getType(),
  });
  map.resetCursor();
});
drawTool.on("disable", function (param) {
  //开启地图的图形事件
  map.config("geometryEvents", true);
});
drawTool.on("enable", function (param) {
  //关闭地图的图形事件
  map.config("geometryEvents", false);
});

drawTool.on("drawstart", function (param) {
  //设置绘制图形时，图形的样式
  updateGeometrySymbol(param.tempGeometry);
});

function updateGeometrySymbol(geometry) {
  const mode = drawTool.getMode();
  if (mode === "linestring") {
    geometry.setSymbol({
      lineColor: "red",
      markerType: "ellipse",
      markerWidth: 10,
      markerHeight: 10,
      markerPlacement: "vertex",
    });
  }
  if (mode === "polygon") {
    geometry.setSymbol({
      polygonFill: "white",
      polygonOpacity: 0.7,
      lineColor: "blue",
      lineWidth: 2,
      markerType: "ellipse",
      markerWidth: 10,
      markerHeight: 10,
      markerFill: "red",
      markerPlacement: "vertex",
    });
  }
  if (mode === "point") {
    geometry.setSymbol({
      markerType: "ellipse",
      markerWidth: 10,
      markerHeight: 10,
      markerFill: "red",
    });
  }
}

var items = ["Point", "LineString", "Polygon"].map(function (value) {
  return {
    item: value,
    click: function () {
      map.setCursor("url(../assets/image/draw.png) 4 10, auto");
      drawTool.setMode(value).enable();
    },
  };
});

var toolbar = new maptalks.control.Toolbar({
  items: [
    {
      item: "Shape",
      children: items,
    },
    {
      item: "Disable",
      click: function () {
        drawTool.disable();
      },
    },
    {
      item: "Clear",
      click: function () {
        layer.clear();
      },
    },
  ],
}).addTo(map);

鼠标手势 ​

鼠标手势