Drag and Drop

使用方法

map.on("drop", (e) => {
    const { coordinate, dataTransfer } = e;
    const url = dataTransfer.getData("data");
    //do some things
});

WARNING

这个特性要求 maptalks version>= 1.0.0-rc.28

有了个这个事件后，我们就可以往地图上拖拽图片，模型等一系列的东西了

TIP

你可以往地图上拖拽任何你的业务数据,不仅仅是图片,可以是：

模型File
JSON数据
视屏
dom元素
等

一切取决于你的业务需要，可以用来做什么功能取决于你的想象力了

例子

下面我们来演示下往地图上拖拽图标,根据图标的地址自动判断加载图标还是模型数据:

图标数据我们加到PointLayer上
模型数据我们加到GLTFLayer上
处理拖拽的数据代码如下：

map.on("drop", (e) => {
    const { coordinate, dataTransfer } = e;
    const url = dataTransfer.getData("data");
    if (!url) {
        return;
    }
    const isModel = url.includes(".gltf") || url.includes(".glb");
    if (isModel) {
        const model = new maptalks.GLTFMarker(coordinate, {
            symbol: {
                url,
                modelHeight: 34,
                rotationZ: 180,
            },
        });
        model.addTo(gltfLayer);
    } else {
        const marker = new maptalks.Marker(coordinate, {
            symbol: {
                markerFile: url,
                markerVerticalAlignment: "middle",
            },
        }).addTo(layer);
    }
});

拖拽的dom元素传递相关数据给地图容器

html

<div class="tools">
    <img
        class="dragimage"
        src="./../assets/image/star.png"
        draggable="true"
        data-url="./../assets/image/star.png"
    />
    <img
        class="dragimage"
        src="./../assets/image/alien.png"
        draggable="true"
        data-url="./../assets/data/alien.gltf"
    />
</div>

const imgs = document.querySelectorAll(".dragimage");
imgs.forEach((img) => {
    img.addEventListener("dragstart", (e) => {
        e.dataTransfer.setData("data", e.target.dataset.url);
    });
});

Drag and Drop ​

例子 ​

Drag and Drop

例子