我通过单击按钮将 geojson 多边形添加到地图中。我还在mousedowngeojson 和 x/y 坐标对（geojson 几何体）打印到控制台，通过 API 上的 queryRenderedFeatures 调用访问它。
我现在想让多边形像多边形上的mousedown事件上的点示例（下面的链接）一样可拖动，并且能够在地图上移动它，在整个mousedown事件中更新多边形节点的 x/y 坐标，但保持geojson 大小在整个拖动过程中保持不变。
直接mapbox-gl-js是这样做的方法，还是我应该将预先配置的 geojson 多边形输入到mapbox-gl-draw -在用户的操作上绘制多边形模式？
有什么建议或例子吗？
我正在读取GeoJSON 文件并将多边形（和其他东西）导入 mapbox-gl draw 使用draw.set(geoJSON). 如何通过要素属性中的属性为单个多边形着色。例子：
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
//"id": "the most unique id in the world",
"properties": {
"class_id": 1
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
79.30961608886719,
61.57192958204744
],
[
79.34309005737303,
61.57192958204744
],
[
79.34309005737303,
61.57871162332267
],
[
79.30961608886719,
61.57871162332267
],
[
79.30961608886719,
61.57192958204744
]
]
]
}
},
{
"type": "Feature",
"properties": {
"class_id": 2
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
79.35201644897461,
61.58271478278019 …我尝试使用以下代码更改 line-dasharray 设置，
'line-dasharray': [
"case",
['==', ['get', "user_class_id"], 'laneway'],[0.2,2],[0.3,2]
]
它给出了这个错误，
Error: layers.gl-draw-line-active.hot.paint.line-dasharray[2][0]: Expression name must be a string, but found number instead. If you wanted a literal array, use ["literal", [...]].
所以我根据错误建议修复了代码，
'line-dasharray': [
"case",
['==', ['get', "user_class_id"], 'laneway'],['literal',[0.2,2]],['literal',[0.3,2]]
]
它给了我这个错误，
evented.js:136 Error: layers.gl-draw-line-active.hot.paint.line-dasharray: data expressions not supported
有谁知道如何解决这个问题？
将 css 添加到 angular-cli.json
"../node_modules/@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css"
成分
import { Component } from '@angular/core';
import * as mapboxgl from 'mapbox-gl';
import * as MapboxDraw from '@mapbox/mapbox-gl-draw';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
static t;
ngOnInit() {
mapboxgl.accessToken = 'Token';
AppComponent.t.map= new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v9',
zoom: 5,
center: [-78.880453, 42.897852]
});
const draw = new MapboxDraw({
displayControlsDefault: false,
controls: {
polygon: true,
trash: true
}
});
AppComponent.t.map.addControl(draw);
}
}
它的显示 …
我在地图盒上看到了一些动画线的例子，但我还没有发现任何在两点之间创建线性线的例子。我可以在地图上创建标记，也可以在这些标记之间画一条线。但是，我想慢慢地创建从原点（开始）到目的地（结束）的那条线。这是在两个坐标之间画线的代码。我只想慢慢地（动画地）制作它，然后重复该动画。
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Animate a line</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
#route {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 1s linear alternate infinite;
}
@keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken =
"pk.eyJ1IjoiaHllb25namlua2ltIiwiYSI6ImNpZXh4dXp5eDA2YjFzaGtyOGR2dnBza2oifQ.a5K673tSr0cOcYoX1rpPhg";
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: …我正在使用mapbox-gl-draw向我的地图添加可移动功能。除了移动性功能，我需要旋转/变换-Ability为特色，功能类似于Leaflet.Path.Transform。
目前，我唯一的选择是创建自定义模式吗？
例如：
map.on('load', function() {
Draw.changeMode('transform');
});
我无法将我的地图及其功能转换mapbox-gl-leaflet为实现，Leaflet.Path.Transform因为失去旋转/轴承/俯仰支撑不是一种选择。
我正在使用 mapbox draw 来绘制多边形。我希望它一次只能在屏幕上绘制一个多边形。例如，用户绘制一个多边形，然后再次单击多边形绘制按钮，第一个多边形将被删除。我曾尝试使用 draw.modechange 来做到这一点，但在某处编码方式存在错误。当我单击多边形绘制按钮时，现有的多边形被删除，但是当我尝试绘制新多边形时，什么都没有。
this.map.on('draw.modechange', (e) => {
const data = draw.getAll();
console.log(draw.getMode());
if (draw.getMode() == 'draw_polygon') {
if (data.features.length > 1) {
draw.deleteAll();
}
}
});
我想在应用程序中使用 Mapbox-GL-Draw，但希望从 Mapbox 地图容器外部存在的按钮触发多边形绘制，而不显示正常的绘制控件。
一种简单的方法是在创建按钮后简单地移动按钮，但是有没有一种简单、干净的方法来开始绘制过程呢？
mapbox-gl ×6
mapbox-gl-js ×6
mapbox ×5
javascript ×2
angular ×1
geojson ×1
package.json ×1
react-map-gl ×1