[Mapbox GL]创建一个可拖拽的点

最新推荐文章于 2023-05-07 17:43:19 发布

龙虾天天

最新推荐文章于 2023-05-07 17:43:19 发布

阅读量1.7k

点赞数

分类专栏： Mapbox 文章标签： Mapbox

Mapbox 专栏收录该内容

40 篇文章 6 订阅

订阅专栏

拖拽一个点到地图上的新位置然后显示它的坐标位置

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></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.29.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<style>
.coordinates {
    background: rgba(0,0,0,0.5);
    color: #fff;
    position: absolute;
    bottom: 10px;
    left: 10px;
    padding:5px 10px;
    margin: 0;
    font-size: 11px;
    line-height: 18px;
    border-radius: 3px;
    display: none;
}
</style>

<div id='map'></div>
<pre id='coordinates' class='coordinates'></pre>

<script>
mapboxgl.accessToken = '<your access token here>';
// Holds mousedown state for events. if this
// flag is active, we move the point on `mousemove`.
var isDragging;

// Is the cursor over a point? if this
// flag is active, we listen for a mousedown event.
var isCursorOverPoint;

var coordinates = document.getElementById('coordinates');
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [0, 0],
    zoom: 2
});

var canvas = map.getCanvasContainer(); /* <canvas> 标签定义图形，比如图表和其他图像。<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。getCanvasContainer()获取包含地图上<canvas>元素的HTML元素，如果你打算添加non-GL的overlay时，需要附加到这个元素上 */

var geojson = {
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [0, 0]
        }
    }]
};

function mouseDown() {
    if (!isCursorOverPoint) return;

    isDragging = true;

    // Set a cursor indicator
    canvas.style.cursor = 'grab';  /* 张开的手背朝上的小手样式 */

    // Mouse events
    map.on('mousemove', onMove);   /* 鼠标移动事件 */
    map.once('mouseup', onUp);     /* 鼠标松开事件 */
}

function onMove(e) {
    if (!isDragging) return;
    var coords = e.lngLat;  /* e.lngLat获取事件的位置 */

    // Set a UI indicator for dragging.
    canvas.style.cursor = 'grabbing';  /* 设置光标样式，手背向上，抓住东西的小手样式 */

    // Update the Point feature in `geojson` coordinates
    // and call setData to the source layer `point` on it.
    geojson.features[0].geometry.coordinates = [coords.lng, coords.lat]; /* 修改Geojson数据 */
    map.getSource('point').setData(geojson);  /* 重新设置data：getSource(id):获取对应id的source，setData(data):设置source的data，基于该source的layer随data的改变，位置发生变化 */
}

function onUp(e) {
    if (!isDragging) return;
    var coords = e.lngLat;

    // Print the coordinates of where the point had
    // finished being dragged to on the map.
    coordinates.style.display = 'block';  /* 设置样式是“显示”，显示坐标数据 */
    coordinates.innerHTML = 'Longitude: ' + coords.lng + '<br />Latitude: ' + coords.lat;
    canvas.style.cursor = '';
    isDragging = false;

    // Unbind mouse events
    map.off('mousemove', onMove);  /* 移除mousemove监听器 */
}

map.on('load', function() {

    // Add a single point to the map
    map.addSource('point', {
        "type": "geojson",
        "data": geojson
    });

    map.addLayer({
        "id": "point",
        "type": "circle",
        "source": "point",
        "paint": {
            "circle-radius": 10,
            "circle-color": "#3887be"
        }
    });

    // If a feature is found on map movement,
    // set a flag to permit a mousedown events.
    map.on('mousemove', function(e) {
        var features = map.queryRenderedFeatures(e.point, { layers: ['point'] });

        // Change point and cursor style as a UI indicator
        // and set a flag to enable other mouse events.
        if (features.length) {
            map.setPaintProperty('point', 'circle-color', '#3bb2d0'); /* 设置id为point的layer的circle-color的属性值 */
            canvas.style.cursor = 'move';
            isCursorOverPoint = true;
            map.dragPan.disable();   /* 去使能DragPanHandler，此时拖拽时地图不动 */
        } else {
            map.setPaintProperty('point', 'circle-color', '#3887be');
            canvas.style.cursor = '';
            isCursorOverPoint = false;
            map.dragPan.enable();
        }
    });

    // Set `true` to dispatch the event before other functions call it. This
    // is necessary for disabling the default map dragging behaviour.
    map.on('mousedown', mouseDown, true);
});
</script>

</body>
</html>

原文： https://www.mapbox.com/mapbox-gl-js/example/drag-a-point/

龙虾天天

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
[Mapbox GL]创建一个可拖拽的点

拖拽一个点到地图上的新位置然后显示它的坐标位置 body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } .coordinates { backgro
复制链接

扫一扫