mapbox图形绘画以及polygon信息提取
1. 在可视化地图上绘画图形
基于某些功能要求，⽤户可能希望在可视化地图上绘画不同的polygon来整合和规划不同的地区，因此mapbox官⽅提供了mapbox-gl-draw来帮助⽤户对地图进⾏⾃定义绘画。今天，我们将介绍如何在vue.js项⽬中配置绘画区域以及实现提取绘画图形的geojson地理信息
2. 配置绘画区域
⾸先，基于的基础上。我们需要在terminal或者cmd中运⾏下⾯的命令，在项⽬中下载mapbox-gl-draw所需要的module。
npm install mapbox-gl-draw
下载成功之后，我们需要在App.vue的
import MapboxDraw from'mapbox-gl-draw'
之后，我们在原来代码的基础上，在初始化init()⽅法中定义绘画区域以及定义相应的⽅法
var draw =new MapboxDraw({
displayControlsDefault:false,
controls:{
polygon:true,
trash:true
}
});
map.addControl(draw);
定义完绘画区域之后，我们项⽬中所显⽰的地图右侧上⽅会多出两个按钮，当⽤户需要绘画时，必须先点击第⼀个按钮进⼊绘画模式，之后通过两点的⽅式绘画polygon。如果⽤户希望重置绘画区域，可以点击第⼆个删除按钮，清空所画的图形
不仅上述所说的两种点击事件，当⽤户点击地图进⾏绘画时，地图也会进⾏相应的update事件，所以api⼀共提供了我们三个地图点击事件。由此，我们⼜可以⾃⾏定义不同的回调⽅法分别和这三个事件进⾏绑定以实现不同的功能效果。为了测试图形效果，我们引进了turf.js 来可视化地图上保存所绘制的图形，并计算相应的⾯积⼤⼩。配置⽅法和mapbox-gl-draw⼀样，先在项⽬的terminal中运⾏下⾯的命令下载turf.js的module，之后在script中进⾏引⽤。
npm install turf
<('ate', updateArea);
<('draw.delete', updateArea);
<('draw.update', updateArea);
function updateArea(e){
var data = All();
borderboxvar answer = ElementById('calculated-area');
if(data.features.length >0){
var area = turf.area(data);
// restrict to area to 2 decimal points
var rounded_area = und(area *100)/100;
answer.innerHTML ='<p><strong>'+ rounded_area +'</strong></p><p>square meters</p>';
}else{
answer.innerHTML ='';
pe !=='draw.delete')
alert('Use the draw tools to draw a polygon')
}
}
3. 提取所绘画的geojson地理信息
为了保存⽤户在mapbox可视化地图上绘画的polygon信息，我们可以导出相应的geojson地理数据信息并做相应的存储。
⾸先我们在中定义⼀个button，然后在
// extract GeoJson from featureGroup
var data = All();
if(data.features.length >0){
// Stringify the GeoJson
var convertedData ='text/json;charset=utf-8,'+encodeURIComponent(JSON.stringify(data))
// create export
}
else{
alert("Wouldn't you like to draw some data")
}
}
⽤户可以绘画多个polygon之后，点击export按钮，把所有polygon的geojson信息提取出来，并下载。
4. 代码测试使⽤
完整代码
<template>
<div id="app">
<div >
<div ref="mapbox" ></div>
<pre id='info'></pre>
<!--<pre id='coordinates'class='coordinates'></pre>-->
</div>
<div class="calculation-box">
<p>Draw a polygon using the draw tools.</p>
<a ref="#" id="export">export</a>
<div id="calculated-area"></div>
</div>
</div>
</template>
<script>
import mapboxgl from'mapbox-gl'
import MapboxDraw from'mapbox-gl-draw'
import turf from'turf'
export default{
data(){
return{
}
},
mounted(){
this.init()
},
methods:{
// 初始化
init(){
// access key from mapbox
mapboxgl.accessToken ='pk.eyJ1IjoicGVhcnBsdXMiLCJhIjoiY2thaDR4cm5kMDFibzJxcHlmNjgxYTJrayJ9.LZ0Fn5iA6SobVFv4R4gByw' var coordinates = ElementById('coordinates');
// initialize map
const map =new mapboxgl.Map({
// refs tag for accessing the DOM element in the code
container:this.$refs.mapbox,
style:'mapbox://styles/mapbox/streets-v9',
center:[12.550343,55.665957],// 设置地图中⼼
zoom:8,// 设置地图⽐例
})
})
// drawable area
var draw =new MapboxDraw({
displayControlsDefault:false,
controls:{
polygon:true,
trash:true
}
});
map.addControl(draw);
<('ate', updateArea);
<('draw.delete', updateArea);
<('draw.update', updateArea);
function updateArea(e){
console.pe)
var data = All();
var answer = ElementById('calculated-area');
if(data.features.length >0){
var area = turf.area(data);
// restrict to area to 2 decimal points
var rounded_area = und(area *100)/100;
answer.innerHTML ='<p><strong>'+ rounded_area +'</strong></p><p>square meters</p>';
}else{
answer.innerHTML ='';
pe !=='draw.delete')
alert('Use the draw tools to draw a polygon')
}
}
// extract GeoJson from featureGroup
var data = All();
if(data.features.length >0){
// Stringify the GeoJson
var convertedData ='text/json;charset=utf-8,'+encodeURIComponent(JSON.stringify(data))
// create export
else{
alert("Wouldn't you like to draw some data")
}
}
// create a draggable maker
var marker =new mapboxgl.Marker({
draggable:true
}).setLngLat([12.550343,55.665957])
.addTo(map);
// defend a method for dragging the marker
function onDragEnd(){
console.log("test11")
var lngLat = LngLat();
coordinates.style.display ='block';
coordinates.innerHTML ='Longitude: '+ lngLat.lng +'<br />Latitude: '+ lngLat.lat;
}
// bind the onDragEnd method with the marker
<('dragend', onDragEnd);
<('dragend', onDragEnd);
// 使⽤定位模块
map.addControl(new mapboxgl.GeolocateControl({
positionOptions:{
enableHighAccuracy:true
},
trackUserLocation:true,
showUserLocation:true,
zoom:14,
}))
// // 建⽴⼀个标记点
// var marker = new mapboxgl.Marker({
// draggable: true
// })
//
// function onDragEnd() {
// var lngLat = LngLat();
/
/ coordinates.style.display = 'block';
// coordinates.innerHTML = 'Longitude: ' + lngLat.lng + '<br />Latitude: ' + lngLat.lat;
// }
// ('dragend', onDragEnd);
map.addControl(new mapboxgl.MapboxGeocoder({
accessToken: mapboxgl.accessToken
}));
}
},
computed:{
},
}
</script>
<style>
@import"api.tiles.mapbox/mapbox-gl-js/v1.1.1/mapbox-gl.css";
@import"api.mapbox/mapbox-gl-js/plugins/mapbox-gl-draw/v1.0.9/mapbox-gl-draw.css"; #app {
font-family:'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top:60px;
}
.coordinates {
background:rgba(0,0,0,0.5);
color: #fff;
position: absolute;
bottom:10px;
left:10px;
padding:5px 10px;
margin:0;
font-size:11px;
line-height:18px;
border-radius:3px;
display: none;
}
body { margin:0; padding:0;}
#map { position:absolute; top:0; bottom:0; width:100%;}
.calculation-box {
height:75px;
width:150px;
position: absolute;
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;
}
#export{
background-color: black;
color: white;
padding:6px;
border-radius:4px;
cursor:pointer;
font-size:12px;
height:20px;
width:20px;
}
</style>
参考⽂档
1. mapbox
2. turf.js
3. — Dan Swick
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论