🗺️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);

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

3D绘制 ​

有时我们想在地形或者3dtiles上绘制图形，这时需要开启3d绘制,绘制工具DrawTool上提供了 transformCoordinate 配置选项用来对当前绘制的坐标进行转换,这里演示将绘制的坐标点 转换成3dtiles下的坐标，如果想转换成其他图层的坐标点以此类推,比如地形，VT等

WARNING

该特性要求 maptalks 版本>1.0.0-rc.33

js
const layer1 = new maptalks.Geo3DTilesLayer("3dtiles", {
    geometryEvents: true,
    services: [
        {
            url: "http://resource.dvgis.cn/data/3dtiles/dayanta/tileset.json",
            maximumScreenSpaceError: 16.0,
            heightOffset: -400,
        },
    ],
});

const drawTool = new maptalks.DrawTool({
    mode: "Point",
    once: true,
    transformCoordinate: (coordinate, mapEvent) => {
        const result = layer1.identify(coordinate);
        if (result.length) {
            return new maptalks.Coordinate(result[0].coordinate);
        }
    },
})
    .addTo(map)
    .disable();

draw-3d demo

draw on terrain

3d测量 ​

有时我们想在地形或者3dtiles上测量，这时需要开启3d绘制,绘制工具DrawTool上提供了 transformCoordinate 配置选项用来对当前绘制的坐标进行转换,这里演示将绘制的坐标点 转换成3dtiles下的坐标，如果想转换成其他图层的坐标点以此类推,比如地形，VT等

WARNING

该特性要求 maptalks 版本>1.0.0-rc.33

TIP

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

js
var distanceTool = new maptalks.DistanceTool({
    symbol: {
        lineColor: "#fff",
        lineWidth: 2,
    },
    vertexSymbol: {
        markerType: "ellipse",
        markerFill: "#1bbc9b",
        markerLineColor: "#000",
        markerLineWidth: 3,
        markerWidth: 10,
        markerHeight: 10,
    },

    labelOptions: {
        textSymbol: {
            textFaceName: "monospace",
            textFill: "#fff",
            textLineSpacing: 1,
            textHorizontalAlignment: "right",
            textDx: 15,
            markerLineColor: "#b4b3b3",
            markerFill: "#000",
        },
        boxStyle: {
            padding: [6, 2],
            symbol: {
                markerType: "square",
                markerFill: "#000",
                markerFillOpacity: 0.9,
                markerLineColor: "#b4b3b3",
            },
        },
    },
    clearButtonSymbol: [
        {
            markerType: "square",
            markerFill: "#000",
            markerLineColor: "#b4b3b3",
            markerLineWidth: 2,
            markerWidth: 15,
            markerHeight: 15,
            markerDx: 20,
        },
        {
            markerType: "x",
            markerWidth: 10,
            markerHeight: 10,
            markerLineColor: "#fff",
            markerDx: 20,
        },
    ],
    language: "en-US",
    transformCoordinate: (coordinate, mapEvent) => {
        const result = layer1.identify(coordinate);
        if (result.length) {
            return new maptalks.Coordinate(result[0].coordinate);
        }
    },
}).addTo(map);

3d distance measure demo

绘制时添加自定义坐标点 ​

DrawTool 上提供了addCoordinate方法,可以动态的往绘制工具上添加一个自定义的坐标点

WARNING

该特性要求 maptalks 版本>1.0.0-rc.33

js
drawtool.addCoordinate([1, 1]);

主动结束绘制 ​

目前当绘制时如果用户双击地图表示结束绘制，有时业务里可能需要其他的方式来结束绘制，比如快捷键啥的,

DrawTool 有提供endDraw()方法，你可以使用这个方法主动的去结束绘制,如下代码演示了利用Ctrl + B to end Draw

js
document.addEventListener("keydown", (e) => {
    console.log(e);
    if (e.ctrlKey && e.key === "b") {
        drawTool.endDraw();
    }
});

This document is generated by mdpress