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>

 

 

 

鑽研不易，轉載請注明出處......