在Mapbox中編輯通過map.addLayer添加的多邊形

Question

我想編輯在mapbox上使用map.addLayer（）添加的多邊形。

編碼：

map.addLayer({
    'id': 'maine'+id,
    'type': 'fill',
    'source': {
        'type': 'geojson',
        'data': {
            'type': 'Feature',
            'geometry': {
                'type': 'Polygon',
                'coordinates': coords
            }
        }
    },
    'layout': {},
    'paint': {
        'fill-color': '#088',
        'fill-opacity': 0.8
    }
});

Answer 1

Mapbox GL圖形庫用於繪制/編輯形狀。

您已將多邊形添加為地圖圖層。 似乎無法直接在繪圖模式下編輯圖層。 這是一種可能的方法

您需要先隱藏圖層。
從圖層源獲取多邊形數據
初始化繪圖模式，並使用多邊形數據將新的多邊形添加到繪圖管理器
編輯完成后，使用圖形管理器中編輯的多邊形數據更新圖層源
從圖形管理器中刪除多邊形
顯示更新的圖層

您需要使用add方法繪制現有形狀。

draw.add({
            'id': 'polygon-3355',
            'type': 'Feature',
            'properties': {},
            'geometry': {
                'type': 'Polygon',
                'coordinates': [[[-67.13734351262877, 45.137451890638886],
                    [-66.96466, 44.8097],
                    [-68.03252, 44.3252],
                    [-69.06, 43.98],
                    [-70.11617, 43.68405],
                    [-70.64573401557249, 43.090083319667144],
                    [-70.75102474636725, 43.08003225358635],
                    [-70.79761105007827, 43.21973948828747],
                    [-70.98176001655037, 43.36789581966826],
                    [-70.94416541205806, 43.46633942318431],
                    [-71.08482, 45.3052400000002],
                    [-70.6600225491012, 45.46022288673396],
                    [-70.30495378282376, 45.914794623389355],
                    [-70.00014034695016, 46.69317088478567],
                    [-69.23708614772835, 47.44777598732787],
                    [-68.90478084987546, 47.184794623394396],
                    [-68.23430497910454, 47.35462921812177],
                    [-67.79035274928509, 47.066248887716995],
                    [-67.79141211614706, 45.702585354182816],
                    [-67.13734351262877, 45.137451890638886]]]
            }
        });

圖書館鏈接： https : //github.com/mapbox/mapbox-gl-draw

API方法參考： https : //github.com/mapbox/mapbox-gl-draw/blob/master/docs/API.md

 <!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <title>Show drawn polygon area</title> <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script> <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' /> <style> body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } </style> </head> <body> <style> .calculation-box { height: 75px; width: 150px; position: absolute; bottom: 40px; left: 10px; background-color: rgba(255, 255, 255, .9); padding: 15px; text-align: center; } p { font-family: 'Open Sans'; margin: 0; font-size: 13px; } </style> <script src='https://api.tiles.mapbox.com/mapbox.js/plugins/turf/v3.0.11/turf.min.js'></script> <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.0.9/mapbox-gl-draw.js'></script> <link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.0.9/mapbox-gl-draw.css' type='text/css'/> <div id='map'></div> <div class='calculation-box'> <p>Draw a polygon using the draw tools.</p> <div id='calculated-area'></div> </div> <script> mapboxgl.accessToken = 'pk.eyJ1IjoiZWRlbnJheWdhcmRuZXIiLCJhIjoiRlZRVlhqOCJ9.tDrWaeNRbMCtXAovQLYuzA'; /* eslint-disable */ var map = new mapboxgl.Map({ container: 'map', // container id style: 'mapbox://styles/mapbox/streets-v8', center: [-70.11617, 43.68405], zoom: 5 }); var draw = new MapboxDraw({ displayControlsDefault: false, controls: { polygon: true, trash: true } }); map.addControl(draw); map.on('draw.create', updateArea); map.on('draw.delete', updateArea); map.on('draw.update', updateArea); draw.add({ 'id': 'polygon-3355', 'type': 'Feature', 'properties': {}, 'geometry': { 'type': 'Polygon', 'coordinates': [[[-67.13734351262877, 45.137451890638886], [-66.96466, 44.8097], [-68.03252, 44.3252], [-69.06, 43.98], [-70.11617, 43.68405], [-70.64573401557249, 43.090083319667144], [-70.75102474636725, 43.08003225358635], [-70.79761105007827, 43.21973948828747], [-70.98176001655037, 43.36789581966826], [-70.94416541205806, 43.46633942318431], [-71.08482, 45.3052400000002], [-70.6600225491012, 45.46022288673396], [-70.30495378282376, 45.914794623389355], [-70.00014034695016, 46.69317088478567], [-69.23708614772835, 47.44777598732787], [-68.90478084987546, 47.184794623394396], [-68.23430497910454, 47.35462921812177], [-67.79035274928509, 47.066248887716995], [-67.79141211614706, 45.702585354182816], [-67.13734351262877, 45.137451890638886]]] } }); function updateArea(e) { var data = draw.getAll(); var answer = document.getElementById('calculated-area'); if (data.features.length > 0) { var area = turf.area(data); // restrict to area to 2 decimal points var rounded_area = Math.round(area*100)/100; answer.innerHTML = '<p><strong>' + rounded_area + '</strong></p><p>square meters</p>'; } else { answer.innerHTML = ''; if (e.type !== 'draw.delete') alert("Use the draw tools to draw a polygon!"); } } </script> </body> </html>

在Mapbox中編輯通過map.addLayer添加的多邊形

問題描述

1 個解決方案

解決方案1
3 已采納 2018-10-27 11:23:17

在Mapbox中編輯通過map.addLayer添加的多邊形

問題描述

1 個解決方案

解決方案1 3 已采納 2018-10-27 11:23:17

解決方案1
3 已采納 2018-10-27 11:23:17