🌍maptalks study

Appearance

目录

绘制和测量 ​

绘制方面，maptalks里提供了DrawTool类

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

TIP

DistanceTool(测距),AreaTool(测面)都是 DrawTool的子类

具体使用方法可以参考 Draw tool to draw geometries 例子
在我们平时绘制图形是遇到的问题有：

  • 怎样设置绘制图形的样式
  • 当绘制图形，可能期望关闭图形的事件，不希望绘制时触发图形的一些事件，比如绘制时因为鼠标点击了地图上已经存在的图形而触发这个图形的click事件

设置绘制图形的样式 ​

js
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",
        });
    }
}

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

绘制时关闭图形的事件,避免绘制时突然弹出一些信息框等 ​

js
//禁用事件
drawTool.on("disable", function (param) {
    //开启地图的图形事件
    map.config("geometryEvents", true);
});
//启用事件
drawTool.on("enable", function (param) {
    //关闭地图的图形事件
    map.config("geometryEvents", false);
});

调整绘制图层的层级(zIndex) ​

WARNING

该特性要求maptalks版本 version>v1.0.0-rc.25

绘制图层的默认层级(zIndex)是Number.MAX_VALUE,如果需要调整其层级可以:

  • 设置options.zIndex
js
var drawTool = new maptalks.DrawTool({
    mode: "Point",
    zIndex: 10,
})
    .addTo(map)
    .disable();
  • 通过setLayerZIndex(zIndex)来设置
js
var drawTool = new maptalks.DrawTool({
    mode: "Point",
    zIndex: 10,
})
    .addTo(map)
    .disable();
drawTool.setLayerZIndex(10);

每次绘制完清空上一次的绘制结果 ​

WARNING

该特性要求maptalks版本 version>v1.0.0-rc.25

DrawTool里有个drawprepare事件，表示预备绘制ing，其发生在drawstart之前，你可以监听这个事件在对绘制drawtool的绘制结果 进行清空

js
var drawTool = new maptalks.DrawTool({
    mode: "Point",
    zIndex: 10,
})
    .addTo(map)
    .disable();
drawTool.on("drawprepare", () => {
    drawTool.clear();
});

自定义测量的结果 ​

DistanceTool(测距),AreaTool(测面)都是 DrawTool的子类,支持用户自定义格式化测量标注的

这个参数为:formatLabelContent,创建测距或者测面时配置这个参数即可，这个参数是个函数，你可以对测量的结果做任何你需要的自定义

WARNING

该特性要求maptalks version>=1.0.0-rc.29

js
function formatLabelContent(value) {
    let m = value / 666.67;
    m = Math.round(m * 100);
    m = m / 100;
    return m + "亩";
}

const areaTool = new maptalks.AreaTool({
    formatLabelContent,
}).addTo(map);

下面我们来是个将测面结果转换为亩的例子

This document is generated by mdpress