openlayers绘制自定义点线面样式,带清除功能Vue版_openlayers+ vue 绘制线条后怎么清除

相关文章推荐

想发财的大脸猫 · 利用Clover、QTTabBar，像浏览器 ...· 1 月前 ·

追风的机器猫 · 懂车老王的个人空间-懂车老王个人主页-哔哩哔哩视频· 2 月前 ·

逃课的紫菜汤 · 热点回应-教育局：江苏2024年高考报名时间发布· 6 月前 ·

微醺的小熊猫 · 兔子耳后视镜_头条· 12 月前 ·

玩命的馒头 · 注意！零跑的策略绝不是降价这么简单！|元_新 ...· 1 年前 ·

初学openlayers 有不足之处还望轻喷,多谢
项目用的是vue,elementUI,以及scss
啊…本来点线面都录制了一个gif图,因为某些原因只剩下一个线的了,将就看着吧

在画线和面的时候,双击地图为停止绘制,也可以通过切换绘制属性手动停止绘制,具体内容注释里有
还有我的点用的图片是static/img/marker.png,请根据情况替换路径

< template > < div id = "map_box" > < div id = "map" > < / div > < div class = "btn_box" > < el - radio - group v - model = "onTool" > < el - radio - button label = "none" > < / el - radio - button > < el - radio - button label = "Point" > 点 < / el - radio - button > < el - radio - button label = "LineString" > 线 < / el - radio - button > < el - radio - button label = "Polygon" > 面 < / el - radio - button > < / el - radio - group > < / div > < div class = "clearBtn" > < el - button @click = "clearFeature('Point')" > 清除点 < / el - button > < el - button @click = "clearFeature('LineString')" > 清除线 < / el - button > < el - button @click = "clearFeature('Polygon')" > 清除面 < / el - button > < / div > < / div > < / template > < script > export default { props : [ ] , data ( ) { return { onTool : 'none' , map : { } , draw : { } , toolLayer : { } mounted ( ) { this . initMap ( ) this . initToolLayer ( ) methods : { // 初始化地图 initMap ( ) { let self = this let center = [ 119.17 , 31.95 ] ; let mapLayer = new ol . layer . Tile ( { source : new ol . source . XYZ ( { // 本人项目中的地图服务为内网这里替换官网的地图 url : `https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey=0e6fc415256d4fbb9b5166a718591d71` } ) , // 数据源坐标系 // projection: 'EPSG:3858', // 初始化地图样式 this . map = new ol . Map ( { target : document . getElementById ( 'map' ) , // 数据源数组 layers : [ mapLayer view : new ol . View ( { // projection: projection.getCode(), // EPSG:4326 // 地图盒子坐标系 // 依稀记得低版本是不支持4326的这里用的是5.2 是支持的 // 本人项目中数据源坐标是3858 但给我的坐标数据是4326的于是设置地图盒子的坐标系为4326 projection : 'EPSG:4326' , center : center , zoom : 12 } ) , // 地图交互 https://openlayers.org/en/latest/apidoc/module-ol_interaction.html interactions : ol . interaction . defaults ( { // 关闭双击缩放地图默认true doubleClickZoom : false , // 是否能拖动默认true,那我为啥写?玩! dragPan : true } ) ; self . map . on ( 'click' , function ( e ) { console . log ( e ) ; // 初始化工具图层 initToolLayer ( ) { // 将图形的数据层包上一层图层放入地图 // 点层样式 this . toolLayer . Point = new ol . layer . Vector ( { source : new ol . source . Vector ( { wrapX : false } ) , zIndex : 9 , style : new ol . style . Style ( { // 设置线颜色\宽度 image : new ol . style . Icon ( { // anchor: markSettings.markAnchor, //点图片偏移量 src : 'static/img/marker.png' , // 图片路径 // 线层样式 this . toolLayer . LineString = new ol . layer . Vector ( { source : new ol . source . Vector ( { wrapX : false } ) , zIndex : 9 , style : new ol . style . Style ( { // 设置线颜色\宽度 stroke : new ol . style . Stroke ( { width : 4 , color : "#119aff" // 图形层样式 this . toolLayer . Polygon = new ol . layer . Vector ( { source : new ol . source . Vector ( { wrapX : false } ) , zIndex : 9 , style : new ol . style . Style ( { // 设置线颜色\宽度 stroke : new ol . style . Stroke ( { width : 4 , color : "#119aff" } ) , // 图形区域内颜色 fill : new ol . style . Fill ( { color : "rgba(57,160,255,0.5)" // 点线面图层放入地图盒子 for ( let k in this . toolLayer ) { this . map . addLayer ( this . toolLayer [ k ] ) // 绘制点线面 interaction ( ) { if ( this . onTool !== 'none' ) { //this.onTool的值即为绘制的类型 this . draw = new ol . interaction . Draw ( source : this . toolLayer [ this . onTool ] . getSource ( ) , // 绘制类型点线面 type : this . onTool , // 绘制时停止点击事件 stopClick : true this . map . addInteraction ( this . draw ) this . draw . on ( "drawend" , ( evt ) => { if ( evt . feature != null ) { //通过改变onTool的值间接触发removeInteraction函数可以结束绘制 // this.onTool = 'none' // 绘制结束之后绘制出的点线面数据 evt . feature . getGeometry ( ) . getCoordinates ( ) } , this ) ; // 手动停止绘制 removeInteraction ( ) { this . map . removeInteraction ( this . draw ) // 清除数据 clearFeature ( layer ) { this . toolLayer [ layer ] . getSource ( ) . clear ( ) watch : { onTool ( val ) { this . removeInteraction ( ) this . interaction ( ) < / script > < style lang = "scss" > #map_box { height : 100 % ; #map { width : 100 % ; height : 100 % ; . btn_box { position : fixed ; top : .5 em ; right : .5 em ; . ol - zoom { top : auto ; left : auto ; right : .5 em ; bottom : .5 em ; . ol - attribution { display : none ; . clearBtn { position : fixed ; top : 5.5 rem ; right : .5 rem ; < / style > openlayers绘制自定义点线面样式,带清除功能初学openlayers 有不足之处还望轻喷,多谢项目用的是vue,elementUI,以及scss啊…本来点线面都录制了一个gif图,因为某些原因只剩下一个线的了,将就看着吧在画线和面的时候,双击地图为停止绘制,也可以通过切换绘制属性手动停止绘制,具体内容注释里有<template> <div id="ma... <link rel=stylesheet href=<%= BASE_URL %>./css/gr-ol.css type=text/css> [removed]./js/ol.js type=text/javascript>[removed] 这里地图为公共组件，方法写在公共组件的init方法里，kpst._this为地图对象 //测距/面 var draw = me. var ces = new ol.source.Vector(); cesguan = new ol.Feature({ geometry: new ol.geom.Point([113.7538, 31.0008]), ces.addFeature(cesguan); cesLayer1 = new ol.layer.Vector({ source: ces, style: new ol.style.Style({ image: new ol.style.Icon({ // colo

Vue 是一个流行的JavaScript框架，用于构建用户界面。 OpenLayers 是一个开源的地理信息系统（GIS）库，用于在网页上展示和处理地理空间数据。 Vue OpenLayers 6是将这两个技术结合起来使用的一个项目。 Vue OpenLayers 6的核心是利用 Vue 组件化的特点，将 OpenLayers 的地图组件集成到 Vue 应用中。使用 Vue 的语法和特性，可以更方便地管理地图相关的状态和交互。在 Vue OpenLayers 6项目中，可以创建一个地图组件，使用 OpenLayers 提供的API来配置地图的样式、图层、控件等。通过 Vue 的数据驱动机制，可以根据应用状态的改变，动态更新地图的展示内容。此外， Vue OpenLayers 6还充分利用 Vue 的生命周期钩子函数，提供了方便的地图管理功能。在组件的created钩子函数中，可以初始化地图实例；在组件的mounted钩子函数中，可以将地图渲染到指定的DOM元素上。同时，提供了其他钩子函数和方法，以便在地图组件的生命周期中处理一些逻辑或更新地图的状态。总结来说， Vue OpenLayers 6是一个使用 Vue 框架和 OpenLayers 库开发地理信息应用的工具。它通过集成和充分利用 Vue 和 OpenLayers 的特性，提供了方便的地图管理和交互的能力，在开发体验和效果上都有很大的提升。