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

2024-01-22 02:32
文章标签 实现 拖拽 点击 移动 点位 openlayers6

本文主要是介绍openlayers6实现可拖拽点位，点位可拖拽移动点击移动，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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);// 将点位清除再绘制// this.vectorLayer.getSource().clear();// 直接修改点位位置this.iconFeature.setGeometry(new Point([point[0], point[1]]));// 将点位转成EPSG:4326坐标系let clickPoint = olProj.transform(point, 'EPSG:3857', 'EPSG:4326');console.log(clickPoint);}else{// 新增点位Featurethis.iconFeature = new Feature({   geometry: new Point([point[0], point[1]]),name: 'Map Point',population: 4000,rainfall: 500,})// 为Feature增加样式let iconStyle = new Style({image: new Icon({anchor: [0.5, 1],// 图片地址src: require('./../../image/map_point.png'),}),});this.iconFeature.setStyle(iconStyle);// 在点位layer中加上Featurethis.vectorLayer.getSource().addFeature(this.iconFeature);// 增加可移动点位元素let iconTranslate = new PointerTranslate({features: new Collection([this.iconFeature])})this.map.addInteraction(iconTranslate);// 为元素增加事件iconTranslate.on("translateend", () => {let clickPoint = this.iconFeature.getGeometry().flatCoordinates;// 将点位转成EPSG:4326坐标系clickPoint = olProj.transform(clickPoint, 'EPSG:3857', 'EPSG:4326');console.log(clickPoint);})}})
}

效果图
点击出现点位
点击打印出点位，拖拽点位也打印出点位
控制台

全部代码

import React from 'react';import TileGrid from "ol/tilegrid/TileGrid";
import TileImage from "ol/source/TileImage";
import Map from 'ol/Map';
import View from 'ol/View';
import XYZ from 'ol/source/XYZ';
import VectorSource from 'ol/source/Vector';
import Feature from 'ol/Feature';
import * as olProj from 'ol/proj';
import Point from 'ol/geom/Point';
import { Style, Icon } from 'ol/style';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
import { Translate as PointerTranslate } from 'ol/interaction';
import Collection from 'ol/Collection';import 'ol/src/ol.css';const lngCenter = "116.397428"
const latCenter = "39.90923"
const mapURL = {/***** 高德地图* lang可以通过zh_cn设置中文，en设置英文，size基本无作用，scl设置标注还是底图，scl=1代表注记，scl=2代表无注记，* style代表底图（矢量或者影像），style设置影像和路网，style=6为影像图，* vec——街道底图* img——影像底图* roadLabel---路网+标注*/"aMap-img-d": "http://webst0{1-4}.is.autonavi.com/appmaptile?style=6&scale=1&x={x}&y={y}&z={z}","aMap-img": "http://webst0{1-4}.is.autonavi.com/appmaptile?style=6&scale=2&x={x}&y={y}&z={z}","aMap-vec-d": "http://webrd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scl=1&style=8&x={x}&y={y}&z={z}","aMap-vec": "http://webrd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scl=2&style=8&x={x}&y={y}&z={z}","aMap-roadLabel": "http://webst0{1-4}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}"
}
class TestMap extends React.Component{constructor(props){super(props);}componentDidMount(){this.loadMap();}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();}/*** @name: mapClick* @desc: 点击地图出现点位图片 - 点位可移动*/mapClick = () => {this.map.on('singleclick', (e) => {// 获取当前点位坐标let point = e.coordinate;if(this.iconFeature){// 将地图回中// this.map.getView().setCenter(point);// 将点位清除再绘制// this.vectorLayer.getSource().clear();// 直接修改点位位置this.iconFeature.setGeometry(new Point([point[0], point[1]]));// 将点位转成EPSG:4326坐标系let clickPoint = olProj.transform(point, 'EPSG:3857', 'EPSG:4326');console.log(clickPoint);}else{// 新增点位Featurethis.iconFeature = new Feature({   geometry: new Point([point[0], point[1]]),name: 'Map Point',population: 4000,rainfall: 500,})// 为Feature增加样式let iconStyle = new Style({image: new Icon({anchor: [0.5, 1],src: require('./../../image/map_point.png'),}),});this.iconFeature.setStyle(iconStyle);// 在点位layer中加上Featurethis.vectorLayer.getSource().addFeature(this.iconFeature);// 增加可移动点位元素let iconTranslate = new PointerTranslate({features: new Collection([this.iconFeature])})this.map.addInteraction(iconTranslate);// 为元素增加事件iconTranslate.on("translateend", () => {let clickPoint = this.iconFeature.getGeometry().flatCoordinates;// 将点位转成EPSG:4326坐标系clickPoint = olProj.transform(clickPoint, 'EPSG:3857', 'EPSG:4326');console.log(clickPoint);})}})}render(){return(<div id="testMap" style={{width: '100vw', height: '100vh'}}></div>)}
}
export default TestMap

这篇关于openlayers6实现可拖拽点位，点位可拖拽移动点击移动的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

原文地址:
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.chinasem.cn/article/631583。

相关文章

使用shardingsphere实现mysql数据库分片方式

使用shardingsphere实现mysql数据库分片方式

《使用shardingsphere实现mysql数据库分片方式》本文介绍如何使用ShardingSphere-JDBC在SpringBoot中实现MySQL水平分库,涵盖分片策略、路由算法及零侵入配置... 目录一、ShardingSphere 简介1.1 对比1.2 核心概念1.3 Sharding-Sp
阅读更多...
Java+AI驱动实现PDF文件数据提取与解析

Java+AI驱动实现PDF文件数据提取与解析

《Java+AI驱动实现PDF文件数据提取与解析》本文将和大家分享一套基于AI的体检报告智能评估方案,详细介绍从PDF上传、内容提取到AI分析、数据存储的全流程自动化实现方法,感兴趣的可以了解下... 目录一、核心流程：从上传到评估的完整链路二、第一步：解析 PDF，提取体检报告内容1. 引入依赖2. 封装
阅读更多...
Java实现复杂查询优化的7个技巧小结

Java实现复杂查询优化的7个技巧小结

《Java实现复杂查询优化的7个技巧小结》在Java项目中,复杂查询是开发者面临的“硬骨头”,本文将通过7个实战技巧,结合代码示例和性能对比,手把手教你如何让复杂查询变得优雅,大家可以根据需求进行选择... 目录一、复杂查询的痛点：为何你的代码“又臭又长”1.1冗余变量与中间状态1.2重复查询与性能陷阱1.
阅读更多...
python 线程池顺序执行的方法实现

python 线程池顺序执行的方法实现

《python线程池顺序执行的方法实现》在Python中,线程池默认是并发执行任务的,但若需要实现任务的顺序执行,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋... 目录方案一：强制单线程（伪顺序执行）方案二：按提交顺序获取结果方案三：任务间依赖控制方案四：队列顺序消
阅读更多...
Redis实现分布式锁全过程

Redis实现分布式锁全过程

《Redis实现分布式锁全过程》文章介绍Redis实现分布式锁的方法,包括使用SETNX和EXPIRE命令确保互斥性与防死锁,Redisson客户端提供的便捷接口,以及Redlock算法通过多节点共识... 目录Redis实现分布式锁1. 分布式锁的基本原理2. 使用 Redis 实现分布式锁2.1 获取锁
阅读更多...
Linux实现查看某一端口是否开放

Linux实现查看某一端口是否开放

《Linux实现查看某一端口是否开放》文章介绍了三种检查端口6379是否开放的方法：通过lsof查看进程占用,用netstat区分TCP/UDP监听状态,以及用telnet测试远程连接可达性... 目录1、使用lsof 命令来查看端口是否开放2、使用netstat 命令来查看端口是否开放3、使用telnet
阅读更多...
使用SpringBoot+InfluxDB实现高效数据存储与查询

使用SpringBoot+InfluxDB实现高效数据存储与查询

《使用SpringBoot+InfluxDB实现高效数据存储与查询》InfluxDB是一个开源的时间序列数据库,特别适合处理带有时间戳的监控数据、指标数据等,下面详细介绍如何在SpringBoot项目... 目录1、项目介绍2、 InfluxDB 介绍3、Spring Boot 配置 InfluxDB4、I
阅读更多...
基于Java和FFmpeg实现视频压缩和剪辑功能

基于Java和FFmpeg实现视频压缩和剪辑功能

《基于Java和FFmpeg实现视频压缩和剪辑功能》在视频处理开发中,压缩和剪辑是常见的需求,本文将介绍如何使用Java结合FFmpeg实现视频压缩和剪辑功能,同时去除数据库操作,仅专注于视频处理,需... 目录引言1. 环境准备1.1 项目依赖1.2 安装 FFmpeg2. 视频压缩功能实现2.1 主要功
阅读更多...
使用Python实现无损放大图片功能

使用Python实现无损放大图片功能

《使用Python实现无损放大图片功能》本文介绍了如何使用Python的Pillow库进行无损图片放大,区分了JPEG和PNG格式在放大过程中的特点,并给出了示例代码,JPEG格式可能受压缩影响,需先... 目录一、什么是无损放大？二、实现方法步骤1：读取图片步骤2：无损放大图片步骤3：保存图片三、示php
阅读更多...
使用Python实现一个简易计算器的新手指南

使用Python实现一个简易计算器的新手指南

《使用Python实现一个简易计算器的新手指南》计算器是编程入门的经典项目,它涵盖了变量、输入输出、条件判断等核心编程概念,通过这个小项目,可以快速掌握Python的基础语法,并为后续更复杂的项目打下... 目录准备工作基础概念解析分步实现计算器第一步：获取用户输入第二步：实现基本运算第三步：显示计算结果进
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2