<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>显示已绘制的多边形区域</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/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>
<div style="height: 30px;bottom: 110px;left:10px;position: absolute;">
<input type="button" onclick="startDraw()" style="background-color: red;" value="startDraw">
</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiZXRlcm5pdHkteHlmIiwiYSI6ImNqaDFsdXIxdTA1ODgycXJ5czdjNmF0ZTkifQ.zN7e588TqZOQMWfws-K0Yw';
/* eslint-disable */
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/satellite-v9', //hosted style id
center: [106.874, 38.760], // starting position
zoom: 12 // starting zoom
});
var draw = new MapboxDraw({
displayControlsDefault: true,
controls: {
polygon: true,
trash: true
}
});
console.log("drawdrawdrawdraw");
console.log(draw);
map.addControl(draw, "top-right");
map.on('draw.modechange', (e) => {
const data = draw.getAll();
console.log("datadata")
console.log(data);
console.log(draw.getMode());
if (draw.getMode() == 'draw_polygon') {
if (data.features.length > 1) {
draw.deleteAll();
}
}
});
function startDraw() {
console.log("startDraw startDraw startDraw ");
draw.changeMode('draw_point')
};
// map.on('load', function () {
//
// var feature = {
// "type": "FeatureCollection",
// "features": [
// {
// "type": "Feature",
// "properties": {},
// "geometry": {
// "type": "Polygon",
// "coordinates": [
// [
// [
// 106.02524414062499,
// 38.03381399664
// ],
// [
// 106.958984375,
// 38.03381399664
// ],
// [
// 106.9589843,
// 38.8150065789119
// ],
// [
// 106.02524414062499,
// 38.8150065789119
// ],
// [
// 106.02524414062499,
// 38.03381399664
// ]
// ]
// ]
// }
// }
// ]
// };
// var featureIds = draw.add(feature);
//
// });
//----------------------------------------------------------------------------------------------
// map.on('draw.create', updateArea);
// map.on('draw.delete', updateArea);
// map.on('draw.update', updateArea);
//
// function updateArea(e) {
// console.log("updateAreaupdateAreaupdateAreaupdateArea")
// 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>
浙公网安备 33010602011771号