Javascript 如何从地图外部将对象拖放到Mapbox地图中？

如何在外部创建可以拖动到其中的元素？例如，假设我想要呈现页面上的位置列表。每个位置都是带有自定义标记或图标的React组件

此位置列表旁边是地图框地图。位置列表不会在地图内渲染。虽然我知道可以拖动这些单独的位置组件，但是否可以将它们拖放到Mapbox地图中，并将其识别为地图上具有纬度/经度坐标的实际标记？如果是，我该怎么做

以下是我尝试过的代码中的相关源文件：

index.js

import dynamic from "next/dynamic";
import { useSelector } from "react-redux";
import Plant from "../../components/Plant";

const MapboxMap = dynamic(() => import("../../components/MapboxGLMap"), {
  ssr: false,
});

const Blueprint = () => {
  const plants = useSelector((state) => state.plants);

  const showPlants = () => {
    return (
      <React.Fragment>
        {plants.map((plant) => (
          <Plant plant={plant} />
        ))}
      </React.Fragment>
    );
  };

  return (
    <React.Fragment>
      <div className="ui container centered grid blueprint">
        <div className="three wide column scrollable">
          <div className="ui link one cards">{showPlants()}</div>
        </div>
        <div className="twelve wide column">
          <MapboxMap />
        </div>
      <style jsx>{`
        .scrollable {
          height: calc(100vh);
          overflow-x: auto;
        }
      `}</style>
    </React.Fragment>
  );
};

export default Blueprint;

从“下一个/动态”导入动态；
从“react redux”导入{useSelector}；
从“../../components/Plant”导入设备；
const MapboxMap=dynamic（（）=>import（“../../components/MapboxGLMap”）{
ssr：错，
});
常量蓝图=（）=>{
const plants=useSelector（（state）=>state.plants）；
const showPlants=（）=>{
返回(
{plants.map（（plant）=>(
))}
);
};
返回(
{showPlants（）}
{`
.可滚动{
高度：计算（100vh）；
溢出-x：自动；
}
`}
);
};
导出默认蓝图；

Plant.jsx

import React from "react";
import { useDrag } from "react-dnd";

const ItemTypes = {
  PLANT: "plant",
};

const Plant = ({ plant }) => {
  const [{ isDragging }, drag] = useDrag({
    item: { type: ItemTypes.PLANT },
    collect: (monitor) => ({
      isDragging: !!monitor.isDragging(),
    }),
  });
  return (
    <div
      ref={drag}
      style={{
        opacity: isDragging ? 0.1 : 1,
        cursor: "move",
      }}
      key={plant.id}
      className="card"
    >
      <div className="image">
        <img src="/white-image.png" />
      </div>
      <div className="content">
        <div className="center aligned">{plant.common_name}</div>
      </div>
    </div>
  );
};

export default Plant;

import React, { useEffect, useRef, useState } from "react";
import mapboxgl from "mapbox-gl";
import MapboxGeocoder from "@mapbox/mapbox-gl-geocoder";
import MapboxDraw from "@mapbox/mapbox-gl-draw";

const MAPBOX_TOKEN = "xxx";

const styles = {
  width: "100%",
  height: "100%",
  position: "absolute",
};

const MapboxGLMap = () => {
  const [map, setMap] = useState(null);
  const [lng, setLng] = useState(null);
  const [lat, setLat] = useState(null);
  const [plant, setPlant] = useState(null);

  const mapContainer = useRef(null);

  useEffect(() => {
    mapboxgl.accessToken = MAPBOX_TOKEN;
    const initializeMap = ({ setMap, mapContainer }) => {
      const map = new mapboxgl.Map({
        container: mapContainer.current,
        style: "mapbox://styles/mapbox/satellite-v9", // stylesheet location
        center: [0, 0],
        zoom: 5,
      });

      map.on("load", () => {
        setMap(map);
        map.resize();
      });

      map.on("click", (e) => {});

      map.addControl(
        new MapboxGeocoder({
          accessToken: MAPBOX_TOKEN,
          mapboxgl: mapboxgl,
        })
      );

      const draw = new MapboxDraw({
        displayControlsDefault: false,
        controls: {
          polygon: true,
          trash: true,
        },
      });
      map.addControl(draw);

      map.on("draw.create", (e) => {
        console.log("e =>", e);
        console.log("draw.getAll()", draw.getAll());
      });

      map.on("mousemove", (e) => {
        // console.log(e.point);
        setLng(e.lngLat.wrap().lng);
        setLat(e.lngLat.wrap().lat);
      });
    };

    if (!map) initializeMap({ setMap, mapContainer });
  }, [map]);

  return <div ref={(el) => (mapContainer.current = el)} style={styles} />;
};

export default MapboxGLMap;

从“React”导入React；
从“react dnd”导入{useDrag}；
常量项类型={
植物：“植物”，
};
常量植物=（{Plant}）=>{
常量[{isDraging}，拖动]=使用拖动({
项：{type:ItemTypes.PLANT}，
收集：（监视器）=>({
IsDraging:！！monitor.IsDraging（），
}),
});
返回(
{plant.common_name}
);
};
出口默认设备；

MapboxGLMap.jsx

import React from "react";
import { useDrag } from "react-dnd";

const ItemTypes = {
  PLANT: "plant",
};

const Plant = ({ plant }) => {
  const [{ isDragging }, drag] = useDrag({
    item: { type: ItemTypes.PLANT },
    collect: (monitor) => ({
      isDragging: !!monitor.isDragging(),
    }),
  });
  return (
    <div
      ref={drag}
      style={{
        opacity: isDragging ? 0.1 : 1,
        cursor: "move",
      }}
      key={plant.id}
      className="card"
    >
      <div className="image">
        <img src="/white-image.png" />
      </div>
      <div className="content">
        <div className="center aligned">{plant.common_name}</div>
      </div>
    </div>
  );
};

export default Plant;

import React, { useEffect, useRef, useState } from "react";
import mapboxgl from "mapbox-gl";
import MapboxGeocoder from "@mapbox/mapbox-gl-geocoder";
import MapboxDraw from "@mapbox/mapbox-gl-draw";

const MAPBOX_TOKEN = "xxx";

const styles = {
  width: "100%",
  height: "100%",
  position: "absolute",
};

const MapboxGLMap = () => {
  const [map, setMap] = useState(null);
  const [lng, setLng] = useState(null);
  const [lat, setLat] = useState(null);
  const [plant, setPlant] = useState(null);

  const mapContainer = useRef(null);

  useEffect(() => {
    mapboxgl.accessToken = MAPBOX_TOKEN;
    const initializeMap = ({ setMap, mapContainer }) => {
      const map = new mapboxgl.Map({
        container: mapContainer.current,
        style: "mapbox://styles/mapbox/satellite-v9", // stylesheet location
        center: [0, 0],
        zoom: 5,
      });

      map.on("load", () => {
        setMap(map);
        map.resize();
      });

      map.on("click", (e) => {});

      map.addControl(
        new MapboxGeocoder({
          accessToken: MAPBOX_TOKEN,
          mapboxgl: mapboxgl,
        })
      );

      const draw = new MapboxDraw({
        displayControlsDefault: false,
        controls: {
          polygon: true,
          trash: true,
        },
      });
      map.addControl(draw);

      map.on("draw.create", (e) => {
        console.log("e =>", e);
        console.log("draw.getAll()", draw.getAll());
      });

      map.on("mousemove", (e) => {
        // console.log(e.point);
        setLng(e.lngLat.wrap().lng);
        setLat(e.lngLat.wrap().lat);
      });
    };

    if (!map) initializeMap({ setMap, mapContainer });
  }, [map]);

  return <div ref={(el) => (mapContainer.current = el)} style={styles} />;
};

export default MapboxGLMap;

import React，{useffect，useRef，useState}来自“React”；
从“mapbox gl”导入mapboxgl；
从“@mapbox/mapbox gl geocoder”导入MapboxGeocoder；
从“@mapbox/mapbox gl draw”导入MapboxDraw；
const MAPBOX_TOKEN=“xxx”；
常量样式={
宽度：“100%”，
高度：“100%”，
位置：“绝对”，
};
常量MapboxGLMap=（）=>{
const[map，setMap]=useState（null）；
const[lng，setLng]=useState（空）；
const[lat，setLat]=useState（null）；
const[plant，setPlant]=useState（null）；
const mapContainer=useRef（null）；
useffect（（）=>{
mapboxgl.accessToken=MAPBOX\u标记；
const initializeMap=（{setMap，mapContainer}）=>{
常量映射=新的mapboxgl.map({
容器：mapContainer.current，
样式：“mapbox://styles/mapbox/satellite-v9“，//样式表位置
中间：[0,0]，
缩放：5，
});
map.on（“加载”，（）=>{
setMap（map）；
map.resize（）；
});
map.on（“点击“，（e）=>{}）；
map.addControl(
新MapboxGeocoder({
accessToken:MAPBOX\u标记，
mapboxgl:mapboxgl，
})
);
const draw=新建MapboxDraw({
displayControlsDefault:false，
控制：{
多边形：是的，
垃圾：没错，
},
});
map.addControl（draw）；
映射到（“绘制.创建”，（e）=>{
log（“e=>”，e）；
log（“draw.getAll（），draw.getAll（））；
});
map.on（“mousemove”，（e）=>{
//控制台日志（e.point）；
设置液化天然气（如液化天然气包裹）；
setLat（e.lngLat.wrap（）.lat）；
});
};
if（！map）初始化映射（{setMap，mapContainer}）；
}，[地图]；
return（mapContainer.current=el）}style={styles}/>；
};
导出默认MapboxGLMap；

事实上，根据你的相关标签，我想象你想把像pin这样的东西从外面拖放到地图区域。您使用

reactjs

标记，这意味着您想通过使用reactjs来实现

为此，您应通过npm或以下方式安装Mapbox：

npm install mapbox-gl --save

或

然后，应将贴图框区域包装在放置区域中。为此，您可以使用。通过以下命令安装它：

npm install react-dropzone --save

或

将以下行添加到HTML模板：

然后按如下方式使用：

从“React”导入React；
从“react Dropzone”导入Dropzone；
从“mapbox gl”导入mapboxgl；
mapboxgl.accessToken='MAPBOX\u ACCESS\u TOKEN'；
类MapComponent扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
液化天然气：5，
拉脱维亚：34，
缩放：2，
};
}
componentDidMount（）{
常量映射=新的mapboxgl.map({
容器：this.mapContainer，
风格：'mapbox://styles/mapbox/streets-v11',
中心：[this.state.lng，this.state.lat]，
zoom:this.state.zoom，
});
map.on（'move'，（）=>{
这是我的国家({
lng:map.getCenter（）.lng.toFixed（4），
lat:map.getCenter（）.lat.toFixed（4），
缩放：map.getZoom（）.toFixed（2），
});
});
}
render（）{
返回(
{（{getRootProps，getInputProps}）=>(
{
this.mapContainer=el；
}}
/>
)}
);
}
}

通过使用这种方法，您可以放置一些图像并获得它，然后根据放置位置将其显示在地图上

---

注意：将捕获的文件类型减少为图像文件类型，如

jpg

/

png

您必须将您尝试过的代码从您的endHey发布。您是如何使用Mapbox获得

react dnd

的？我可以看到您在组件上使用了拖动，但是您如何管理地图上的拖放操作？谢谢。这将允许他们将对象拖到地图中的特定点上吗？@通配符，事实上，这是可能的，但地图中的特定点应该在视图端口中。一旦将其拖到地图中的特定点上，如何在该特定点上显示标记？我不确定地图是否正确