问题描述
我使用MapBox,我的目标是从bounds
创建一个矩形。我还将地图集中到bounds
中。
虽然MapBox可以找出fitBounds
的所有四个坐标,但它对直线的作用不同。而是将线画为两点之间的线。
我如何...
- ...改为绘制矩形?
- ...计算所需的另外两个坐标?
部分代码
const bounds = [
[17.76069212,59.22761885],[18.20001876,59.44007814],];
var map = new mapBoxgl.Map({
container: "map",style: "mapBox://styles/mapBox/streets-v11",});
map.fitBounds(bounds,{
padding: 16,});
map.on("load",() => {
map.addSource("route",{
type: "geojson",data: {
type: "Feature",properties: {},geometry: {
type: "Linestring",coordinates: bounds,},});
map.addLayer({
id: "route",type: "line",source: "route",layout: {
"line-join": "round","line-cap": "round",paint: {
"line-color": "#888","line-width": 8,});
});
解决方法
有了一对边界坐标,您总是可以在mapbox中创建一个没有任何库的矩形...这是使用左下/右上的数据创建4个角的问题。
Mapbox需要创建一个与初始点相同的第五点。
您可以使用自己的功能创建要添加到线层的功能,它将绘制一个矩形...就像这样:
{
"geometry": {
"coordinates": [
[
[
17.76069212,59.22761885
],[
17.76069212,59.44007814
],[
18.20001876,59.22761885
]
]
],"type": "Polygon"
},"type": "Feature","properties": {}
}