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

2024-01-22 02:32

本文主要是介绍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

相关文章

python使用watchdog实现文件资源监控

《python使用watchdog实现文件资源监控》watchdog支持跨平台文件资源监控,可以检测指定文件夹下文件及文件夹变动,下面我们来看看Python如何使用watchdog实现文件资源监控吧... python文件监控库watchdogs简介随着Python在各种应用领域中的广泛使用,其生态环境也

el-select下拉选择缓存的实现

《el-select下拉选择缓存的实现》本文主要介绍了在使用el-select实现下拉选择缓存时遇到的问题及解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的... 目录项目场景:问题描述解决方案:项目场景:从左侧列表中选取字段填入右侧下拉多选框,用户可以对右侧

Python pyinstaller实现图形化打包工具

《Pythonpyinstaller实现图形化打包工具》:本文主要介绍一个使用PythonPYQT5制作的关于pyinstaller打包工具,代替传统的cmd黑窗口模式打包页面,实现更快捷方便的... 目录1.简介2.运行效果3.相关源码1.简介一个使用python PYQT5制作的关于pyinstall

使用Python实现大文件切片上传及断点续传的方法

《使用Python实现大文件切片上传及断点续传的方法》本文介绍了使用Python实现大文件切片上传及断点续传的方法,包括功能模块划分(获取上传文件接口状态、临时文件夹状态信息、切片上传、切片合并)、整... 目录概要整体架构流程技术细节获取上传文件状态接口获取临时文件夹状态信息接口切片上传功能文件合并功能小

python实现自动登录12306自动抢票功能

《python实现自动登录12306自动抢票功能》随着互联网技术的发展,越来越多的人选择通过网络平台购票,特别是在中国,12306作为官方火车票预订平台,承担了巨大的访问量,对于热门线路或者节假日出行... 目录一、遇到的问题?二、改进三、进阶–展望总结一、遇到的问题?1.url-正确的表头:就是首先ur

C#实现文件读写到SQLite数据库

《C#实现文件读写到SQLite数据库》这篇文章主要为大家详细介绍了使用C#将文件读写到SQLite数据库的几种方法,文中的示例代码讲解详细,感兴趣的小伙伴可以参考一下... 目录1. 使用 BLOB 存储文件2. 存储文件路径3. 分块存储文件《文件读写到SQLite数据库China编程的方法》博客中,介绍了文

Redis主从复制实现原理分析

《Redis主从复制实现原理分析》Redis主从复制通过Sync和CommandPropagate阶段实现数据同步,2.8版本后引入Psync指令,根据复制偏移量进行全量或部分同步,优化了数据传输效率... 目录Redis主DodMIK从复制实现原理实现原理Psync: 2.8版本后总结Redis主从复制实

JAVA利用顺序表实现“杨辉三角”的思路及代码示例

《JAVA利用顺序表实现“杨辉三角”的思路及代码示例》杨辉三角形是中国古代数学的杰出研究成果之一,是我国北宋数学家贾宪于1050年首先发现并使用的,:本文主要介绍JAVA利用顺序表实现杨辉三角的思... 目录一:“杨辉三角”题目链接二:题解代码:三:题解思路:总结一:“杨辉三角”题目链接题目链接:点击这里

基于Python实现PDF动画翻页效果的阅读器

《基于Python实现PDF动画翻页效果的阅读器》在这篇博客中,我们将深入分析一个基于wxPython实现的PDF阅读器程序,该程序支持加载PDF文件并显示页面内容,同时支持页面切换动画效果,文中有详... 目录全部代码代码结构初始化 UI 界面加载 PDF 文件显示 PDF 页面页面切换动画运行效果总结主

SpringBoot实现基于URL和IP的访问频率限制

《SpringBoot实现基于URL和IP的访问频率限制》在现代Web应用中,接口被恶意刷新或暴力请求是一种常见的攻击手段,为了保护系统资源,需要对接口的访问频率进行限制,下面我们就来看看如何使用... 目录1. 引言2. 项目依赖3. 配置 Redis4. 创建拦截器5. 注册拦截器6. 创建控制器8.