Mapboxトリビア

正直なところ、あまり使いやすくはない。ドキュメント的なものはほとんどない。
mapbox-gl-drawプラグイン。デフォルトは使いたくない。
要件は、カスタム・ドロー、追加、編集である。
初めての人、何か問題があればアドバイスしてほしい。
カスタム描画領域の概要：

使用する独自のイベントを定義します：

 :
draw = new MapboxDraw({
 displayControlsDefault: false,
 controls: {
 // polygon: true,
 // trash: true,
 },
 });
 map.addControl(draw);
 map.on("draw.create", this.updateArea);
 
 クリックして追加する：ドロー.changeMode("draw_polygon");
 クリックして編集する：ドロー.changeMode("simple_select");
 updateArea(e){
 
 }
 
 
 以下の2つは、クエリー時のレンダリングに使用できる。
 
 <!-- 編集可能なドロー>
draw.add({
 id: "polygon-3355",
 type: "Feature",
 properties: {},
 geometry: {
 type: "Polygon",
 coordinates: [
 [
 [110.45665844376919, 39.05322570269783],
 [110.46253784592864, 39.05572513719673],
 [110.46682938035315, 39.05249251846436],
 [110.46017750199667, 39.04945972100103],
 [110.45665844376919, 39.05322570269783],
 ],
 ],
 },
 });
 
 <!-- ポリゴンを描くための新しいレイヤー>
 map.addSource("draw", {
 /* geojsonタイプのソースを追加する */
 type: "geojson",
 data: {
 /* geojson  */
 type: "Feature",
 geometry: {
 type: "Polygon",
 coordinates: [
 [
 [110.45665844376919, 39.05322570269783],
 [110.46253784592864, 39.05572513719673],
 [110.46682938035315, 39.05249251846436],
 [110.46017750199667, 39.04945972100103],
 [110.45665844376919, 39.05322570269783],
 ],
 ],
 },
 },
 });
 map.addLayer({
 id: "draw",
 type: "fill" /* fillレイヤーをタイプする */,
 source: "draw",
 layout: {},
 paint: {
 "fill-color": "#088" /* fill  */,
 "fill-opacity": 0.3 /* fill透明度 */,
 },
 });
 ポリゴンを描画するが、プラグインを使用して編集することはできない。
 クエリー表示：両方
 
 この時点で問題がある。最初のものを使うと、追加時にすでに描かれているものも編集できてしまう。
 2つ目は編集に問題があり、編集できない。
 
 最終的な解決策は、ポイント編集時にレイヤーを非表示にし、描画を使用することである。.add再描画する。

新エリア追加

addDrawArea() {
// クリックイベントを消去する
 this.map.off("click", this.selectDrawInfo);
 this.draw.deleteAll();
 this.map.setLayoutProperty("draw", "visibility", "visible");
 // ダブルクリックによるズームを無効にする
 this.map.doubleClickZoom.disable();
 
 this.draw.changeMode("draw_polygon");
 this.map.on("draw.create", this.updateArea);
}

編集フィールド

 editDraw() {
 this.map.setLayoutProperty("draw", "visibility", "none");
 this.map.on("draw.update", this.updateArea);
 this.map.on("draw.create", this.updateArea);
 this.draw.changeMode("simple_select");
 this.drawData.id = "draw";
 //  
 this.draw.add(this.drawData);
 // クリックデータを取得する
 this.map.on("click", this.selectDrawInfo);
 }