<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> mapbox_画圆 </title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
<link href="../lib/mapboxgl/mapbox-gl.css" rel="stylesheet"/>
<script src="../lib/mapboxgl/mapbox-gl.js"></script>
<script src="../lib/mapboxgl/turf.min.js"></script>
<style>
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="map" style="width: 100%; height: 100%"></div>
</div>
<script>
var map, popupDOM;
mapboxgl.accessToken = 'pk.eyJ1IjoiZXRlcm5pdHkteHlmIiwiYSI6ImNqaDFsdXIxdTA1ODgycXJ5czdjNmF0ZTkifQ.zN7e588TqZOQMWfws-K0Yw';
initMap();
function initMap() {
map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
zoom: 11,
// 地图中心点
center: [106.337428, 38.3390923],
// 地图默认字体
localIdeographFontFamily: "Microsoft YoHei",
});
}
map.on('load', () => {
map.addLayer({
id: 'circle',
// type: 'fill',
// source: 'circle',
type: 'circle',
source: {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: [{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [106.33, 38.333]
},
properties: {
name: '测试点1',
value: 60
}
}, {
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [106.33, 38.343]
},
properties: {
name: '测试点2',
value: 40
}
}]
}
},
layout: {
visibility: 'visible'
},
// paint: {
// 'fill-color': 'green', // 填充颜色
// 'fill-opacity': 0.3, // 透明度
// 'fill-outline-color': 'green' // 边缘颜色
// }
paint: {
'circle-radius': [
// 根据像素来定义半径
'interpolate',
['linear'],
['zoom'],
0,
10,
14,
30
],
'circle-color': {
property: 'value',
type: 'exponential',
stops: [
[0, 'rgba(236,222,239,0)'],
[10, 'rgb(236,222,239)'],
[20, 'rgb(208,209,230)'],
[30, 'rgb(166,189,219)'],
[40, 'rgb(103,169,207)'],
[50, 'rgb(28,144,153)'],
[60, 'rgb(1,108,89)']
]
},
'circle-opacity': 1,
'circle-stroke-color': 'red',
'circle-stroke-width': 3,
'circle-stroke-opacity': 1
}
})
// ------------------------ 其实还是多边形 画圆
map.addLayer({
id: 'circle1',
type: 'fill',
source: {
type: 'geojson',
// data: {
// type: 'Polygon',
// coordinates: [[]]
// }
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [[[106.33, 38.33308993203638],
[106.32998876252508, 38.33308949898851],
[106.32997763327357, 38.33308820401539],
[106.32996671942665, 38.33308605958838],
[106.329956126091, 38.33308308635956],
[106.3299459552865, 38.33307931296283],
[106.32993630496387, 38.333074775738204],
[106.32992726806113, 38.333069518381755],
[106.32991893160872, 38.333063591524876],
[106.3299113758913, 38.333057052246566],
[106.3299046736745, 38.33304996352383],
[106.32989888950421, 38.33304239362509],
[106.329894079085, 38.33303441545274],
[106.32989028874351, 38.33302610584106],
[106.32988755498255, 38.333017544816265],
[106.32988590412937, 38.33300881482577],
[106.32988535208219, 38.3329999999442],
[106.32988590415715, 38.33299118506371],
[106.329887555037, 38.33298245507639],
[106.32989028882257, 38.33297389405676],
[106.32989407918559, 38.33296558445202],
[106.32989888962253, 38.33295760628812],
[106.32990467380596, 38.332950036399026],
[106.32991137603085, 38.33294294768676],
[106.32991893175101, 38.332936408419336],
[106.32992726820066, 38.33293048157335],
[106.32993630509533, 38.33292522422737],
[106.32994595540481, 38.33292068701239],
[106.3299561261916, 38.33291691362411],
[106.32996671950572, 38.33291394040223],
[106.32997763332803, 38.33291179598038],
[106.32998876255283, 38.33291050101044],
[106.33, 38.33291006796364],
[106.33001123744717, 38.33291050101044],
[106.33002236667198, 38.33291179598038],
[106.33003328049429, 38.33291394040223],
[106.33004387380839, 38.33291691362411],
[106.3300540445952, 38.33292068701239],
[106.33006369490468, 38.33292522422737],
[106.33007273179932, 38.33293048157335],
[106.330081068249, 38.332936408419336],
[106.33008862396916, 38.33294294768676],
[106.33009532619404, 38.332950036399026],
[106.33010111037748, 38.33295760628812],
[106.3301059208144, 38.33296558445202],
[106.33010971117743, 38.33297389405676],
[106.330112444963, 38.33298245507639],
[106.33011409584286, 38.33299118506371],
[106.33011464791781, 38.3329999999442],
[106.33011409587063, 38.33300881482577],
[106.33011244501745, 38.333017544816265],
[106.33010971125648, 38.33302610584106],
[106.330105920915, 38.33303441545274],
[106.33010111049578, 38.33304239362509],
[106.3300953263255, 38.33304996352383],
[106.3300886241087, 38.333057052246566],
[106.3300810683913, 38.333063591524876],
[106.33007273193888, 38.333069518381755],
[106.33006369503613, 38.333074775738204],
[106.33005404471349, 38.33307931296283],
[106.330043873909, 38.33308308635956],
[106.33003328057335, 38.33308605958838],
[106.33002236672642, 38.33308820401539],
[106.33001123747492, 38.33308949898851],
[106.33, 38.33308993203638],]]
}
}]
}
},
paint: {
'fill-color': 'green', // 填充颜色
'fill-opacity': 1, // 透明度
'fill-outline-color': 'green' // 边缘颜色
}
})
/**
* radius: 半径，单位为千米，不能为0；
* center: 圆心
*/
const r = 1000 / 1000;
const g = turf.circle([106.33, 38.333], r);
console.log(g)
// map.getSource('circle1').setData(g)
})
</script>
</body>
</html>
浙公网安备 33010602011771号