superMap之标绘

superMap之标绘

superMap样例中有一个标绘demo:

https://iclient.supermap.io/examples/leaflet/editor.html#drawAndModify

原理: leaflet.draw组件

    详细api:https://www.npmjs.com/package/leaflet-draw

代码:

    addDraw()
    var editableLayers
    function addDraw() {
        editableLayers = new L.FeatureGroup();
        map.addLayer(editableLayers);
        var options = {
            position: 'topleft',
            draw: {
                polyline: {},
                polygon: false, // 设为false可关闭面绘制工具
                circle: {},
                rectangle: {},
                marker: {},
                remove: {}
            },
            edit: {
                featureGroup: editableLayers,
                remove: true
            }
        };
        var drawControl = new L.Control.Draw(options);
        map.addControl(drawControl);
        map.on(L.Draw.Event.CREATED, function (e) {
            var layer = e.layer;
            editableLayers.addLayer(layer);
        });
    }

获取标绘的features:

function getFeat() {
        console.log(editableLayers)
        console.log(editableLayers.getLayers())
    }

注意:使用时需要引入leaflet.draw组件,否则会报错:L.Control.Draw is not a...

  引入:

    <script type="text/javascript" include="leaflet.draw" src="../../dist/leaflet/include-leaflet.js"></script>

钻研不易,转载请注明出处......

原文地址:https://www.cnblogs.com/s313139232/p/12964167.html