需求:在地图上绘制区域圆
方法一:使用 turf
取一个点并计算给定的以度、弧度、英里或公里为半径的圆多边形
官方文档:
调试:http://jsrun.net/BuLKp/edit
方法二 使用 js 计算
<template>
<div id="map"></div>
</template>
<script>
// 根据一个点绘制圆
import mapboxgl from 'mapbox-gl'
import 'mapbox-gl/dist/mapbox-gl.css'
export default {
name: 'app',
data() {
return {
map: '',
}
},
computed: {
},
components: {},
methods: {
initMap() {
mapboxgl.accessToken = 'pk.eyJ1IjoibWVpa...............58EkNW6Ta_AQ';
this.map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [113.209711, 23.137937],
zoom: 6,
pitch: 40,
bearing: 0,
pitch: 60,
antialias: true
})
this.map.on('load', () => {
//createGeoJSONCircle参数([经度,纬度],圆的半径单位km)
this.map.addSource("polygon", this.createGeoJSONCircle([113.209711, 23.137937], 0.5));
this.map.addLayer({
"id": "polygon",
"type": "fill",
"source": "polygon",
"layout": {},
"paint": {
"fill-color": "blue",
"fill-opacity": 0.6
}
});
});
},
//绘制圆形区域的函数
createGeoJSONCircle: function(center, radiusInKm, points) {
if (!points) points = 64;
var coords = {
latitude: center[1],
longitude: center[0]
};
var km = radiusInKm;
var ret = [];
var distanceX = km / (111.320 * Math.cos(coords.latitude * Math.PI / 180));
var distanceY = km / 110.574;
var theta, x, y;
for (var i = 0; i < points; i++) {
theta = (i / points) * (2 * Math.PI);
x = distanceX * Math.cos(theta);
y = distanceY * Math.sin(theta);
ret.push([coords.longitude + x, coords.latitude + y]);
}
ret.push(ret[0]);
return {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [ret]
}
}]
}
};
},
},
mounted() {
this.initMap()
},
beforeDestroy() {}
}
</script>
<style>
#map {
margin: 0;
width: calc(100vw - 200px);
height: 100vh;
}
.mapboxgl-ctrl-bottom-right {
display: none;
}
</style>