openlayers6实现可拖拽点位，点位可拖拽移动点击移动

最新推荐文章于 2025-04-16 16:26:19 发布

snobodyx

最新推荐文章于 2025-04-16 16:26:19 发布

阅读量4.8k

点赞数 1

分类专栏： openlayers 地图文章标签： javascript reactjs html

本文链接：https://blog.youkuaiyun.com/songxiao1124/article/details/108316092

版权

本文介绍如何在openlayers6中实现点位的拖拽和点击移动功能，结合react和高德地图底图，详细阐述了从初始化地图容器、创建地图到增加地图选点方法的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

openlayers6实现可拖拽点位

实现功能：需要实现地图上点击出现点位，此点位可拖拽，并且点击移动，从而实现地图选点的功能

使用技术：openlayers6 + react + 高德地图底图

1. 第一步：初始化地图容器

html代码：新增dom节点

<div id="testMap" style={
    {width: '100vw', height: '100vh'}}></div>

2. 第二步：初始化地图

js代码：初始化时调用方法初始化高德地图

loadMap = () =>{
   
    // 添加点位图层
    var vectorSource = new VectorSource({
   
        features: [],
    });
    this.vectorLayer = new VectorLayer({
   
        source: vectorSource,
        zIndex: 100
    });

    // 需要转换坐标系 - 将4326转化为3857坐标系
    let m_center = [lngCenter, latCenter];//地图中心点-经纬度坐标
    m_center = olProj.transform(m_center, 'EPSG:4326', 'EPSG:3857');
    // 使用高德道路图
    this.map = new Map({
   
        target: 'testMap',
        layers: [
            new TileLayer({
   
                source: new XYZ({
   
                    url: mapURL["aMap-vec-d"]
                })
            }),
            this.vectorLayer
        ],
        view: new View({
   
            center: m_center,
            zoom: 10,
            minZoom: 5,
            maxZoom: 18,
            expandZoomRange: true,
            projection: 'EPSG:3857'
        }),
    });
    // 调用选点方法
    this.mapClick();
}

3. 第三步：增加地图选点方法

mapClick = () => {
   
    this.map.on('singleclick', (e) => {
   
        // 获取当前点位坐标
        let point = e.coordinate;
        if(this.iconFeature){
   
            // 将地图回中
            // this.map.getView().setCenter(point);
            // 将点位清除再绘制