mapbox-draw编辑shp矢量数据以及绘制的面积
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Draw a polygon and calculate its area</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<link href="https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.css" rel="stylesheet" />
<script src="https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.js"></script>
<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, 0.9);
padding: 15px;
text-align: center;
}
p {
font-family: "Open Sans";
margin: 0;
font-size: 13px;
}
</style>
<script src="https://unpkg.com/@turf/turf@6/turf.min.js"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.4.0/mapbox-gl-draw.js"></script>
<link
rel="stylesheet"
href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.4.0/mapbox-gl-draw.css"
type="text/css"
/>
<div id="map"></div>
<div class="calculation-box">
<p>Click the map to draw a polygon.</p>
<div id="calculated-area"></div>
</div>
<script>
mapboxgl.accessToken =
"pk.eyJ1IjoiY2hlbjAxMDkiLCJhIjoiY2xubXNjbGZtMWtvaTJqbDhvNmlyenB5eCJ9.bM4BujoTWEIU5f21UMGv2w"
const map = new mapboxgl.Map({
container: "map", // container ID
// Choose from Mapbox's core styles, or make your own style with Mapbox Studio
style: "mapbox://styles/mapbox/satellite-v9", // style URL
center: [-67.13734, 45.13745], // starting position [lng, lat]
zoom: 12, // starting zoom
})
const draw = new MapboxDraw({
displayControlsDefault: false,
// Select which mapbox-gl-draw control buttons to add to the map.
controls: {
polygon: true,
trash: true,
point: true,
line_string: true,
},
// Set mapbox-gl-draw to draw by default.
// The user does not have to click the polygon control button first.
defaultMode: "draw_polygon",
})
map.addControl(draw)
map.on("draw.create", updateArea)
map.on("draw.delete", updateArea)
map.on("draw.update", updateArea)
// 添加数据
draw.add({
type: "Polygon",
// These coordinates outline Maine.
coordinates: [
[
[-67.13734, 45.13745],
[-66.96466, 44.8097],
[-68.03252, 44.3252],
[-69.06, 43.98],
[-70.11617, 43.68405],
[-70.64573, 43.09008],
[-70.75102, 43.08003],
[-70.79761, 43.21973],
[-70.98176, 43.36789],
[-70.94416, 43.46633],
[-71.08482, 45.30524],
[-70.66002, 45.46022],
[-70.30495, 45.91479],
[-70.00014, 46.69317],
[-69.23708, 47.44777],
[-68.90478, 47.18479],
[-68.2343, 47.35462],
[-67.79035, 47.06624],
[-67.79141, 45.70258],
[-67.13734, 45.13745],
],
],
})
function updateArea(e) {
const data = draw.getAll()
const answer = document.getElementById("calculated-area")
if (data.features.length > 0) {
const area = turf.area(data)
// Restrict the area to 2 decimal points.
const rounded_area = Math.round(area * 100) / 100
answer.innerHTML = `
${rounded_area}square meters
`
} else {
answer.innerHTML = ""
if (e.type !== "draw.delete") alert("Click the map to draw a polygon.")
}
}
// 编辑
map.on("draw.selectionchange", function (e) {
console.log("draw.selectionchange", e.features)
})
</script>
</body>
</html>