我的openLayers案例地址：http://cyclv.gitee.io/openlayers/

实现效果:

1.绘制点，线，多边形。

2.绘制对象添加相对应的信息，

3.选中绘画的上的矢量图层，并弹出信息.

3.存入数据库中。

绘制

官网api

不一一列举，官网api地址 https://openlayers.org/en/latest/apidoc/module-ol_interaction_Draw-Draw.html （如果失效，请访问官网，搜索Draw）

绘制样式控制

1.new Draw（），新建绘画时，type（点，线....)，source（绘制的目标源），Style（绘制的样式）

draw = new Draw({type:'Point',stopClick:true
});

stopClick:阻止绘画期间的单机，双击操作

绘制流程控制

2 绘图监测事件 drawstart，drawend；

drawstart 再绘画前（每一次绘画都会触发）

draw.on('drawstart',(e)=>{console.log('绘画前')
})

drawend之后获取到绘画的信息。(经纬度）

draw.on('drawend',(e)=>{const longLat = e.feature.getGeometry().getCoordinates()console.log(longLat)
})

完整代码

addInteraction=()=> {draw = new ol.Draw({source: source,type: 'LineString',});map.addInteraction(draw);draw.on('drawstart', (evt) => {lengthShow = true;listData = [];//清空上一个绘画的数据})draw.on('drawend', (evt) => {lengthShow = falseolData = evt.feature.getGeometry().getCoordinates()myData(olData)})
}

右键结束绘画

监听地图右击事件，点击后结束绘画

map.on("contextmenu", function (event) {event.preventDefault();draw.removeLastPoint(); //移除绘画最后一个点draw.finishDrawing();  //结束绘画
});

选中

Select Api ：https://openlayers.org/en/latest/apidoc/module-ol_interaction_Select-Select.html；

主要使用的就是 hitTolerance 在线段过细的情况下，扩大选中范围。

        var selectSingleClick = new Select({hitTolerance:10 /* 选中范围控制 */});this.setState({selectFeature:selectSingleClick})mapEvent.addInteraction(selectSingleClick);/*获取到选中的信息*/selectSingleClick.on('select', (e)=>{// features为选中的内容var features= e.target.getFeatures().getArray();})

鼠标悬浮

当鼠标在地图上移动时，碰到自己的绘画的矢量图时，鼠标样式变成pointer

        // 监测鼠标放到屏幕上的事件map.on('pointermove', function(e) {var pixel=map.getEventPixel(e.originalEvent);var feature=map.forEachFeatureAtPixel(pixel,function (feature) {return feature;},{hitTolerance:10}) if(feature === undefined){map.getTargetElement().style.cursor="auto"}else{map.getTargetElement().style.cursor="pointer"}});

OpenLayers 绘制，选中，鼠标悬浮相关推荐

鼠标悬浮选中单选按钮事件
鼠标悬浮事件 onmouseover 鼠标悬浮单选框就选中鼠标悬浮显示注释框鼠标悬浮单选框就选中 <el-radio-group v-model="algorithmRadio&q ...
[译] CSS 变量实现炫酷鼠标悬浮效果
原文: Stunning hover effects with CSS variables 我的博客:[译] CSS 变量实现炫酷鼠标悬浮效果我最近从Grover网站上的有趣的悬停动画中获得灵感.将 ...
ZedGraph5.1.5源码分析去掉鼠标悬浮内容闪烁问题(附源码下载)
场景在使用ZedGraph绘制曲线图时,将鼠标悬浮时内容闪烁,且频率很高. 找到其源码,发现不论鼠标移动的范围大小,甚至乎不论鼠标是否移动,都要刷新一次Tooltip. 注: 博客主页: https ...
html鼠标悬浮更换图片,Vue.js鼠标悬浮更换图片功能
最近自己做的项目中设计师要求分类栏中鼠标悬停更换图片,大致实现出来的效果就是这样: 这个在jQuery中是个很简单的事,但是在vue中我还是第一次实现. 首先将所有的选中后图片都覆盖到没选中图片上 c ...
Vue中实现鼠标悬浮完成图片替换
最近在做一个小项目,要实现的功能是在一个六边形中,实现一个鼠标悬浮不同的区域该区域的颜色和背景均发生改变,且点击对应区域并能完成链接跳转,跳转到不同的页面.闲话少说,具体实现如下. 1.需求具体需求 ...
web自动化时，怎么定位鼠标悬浮时才出现的元素
web自动化时,怎么定位鼠标悬浮时才出现的元素如图所示, 想要定位"修改密码",必须先鼠标悬浮在头像位置,才能看到修改密码,然后按正常操作在F12里就没办法定位"修改 ...
vue 富文本编辑器 quill （含代码高亮、自定义字体、汉化、鼠标悬浮提示、组件封装等）
基本使用安装依赖 npm i quill .vue文件 <div ref="editor" :style="finalStyle"></di ...
echarts y轴文本过长，设置超出隐藏，然后显示省略号，并且鼠标悬浮上之后显示全部
Echarts 标签中文本内容太长的时候怎么办 ? 看如下两块有分别说明: 具体代码如下:  <script src="${ctx}/tiles/ ...
CSS实现鼠标悬浮时背景图片拉近且增加遮罩层效果
效果预览点击查看效果我们在浏览网站时会发现有一些图片在鼠标悬浮在上时会有放大拉近的效果. 想要实现这个效果有两种方法,第一种方法是控制背景图片,第二种方法是控制插入的图片,我们这里介绍第一 ...
网页精美动效/动画制作按钮鼠标悬浮动效的注意点 02《炫彩网页 iVX 无代码动效/动画制作》
一.按钮动效的使用在上一节中,我们创建了一个动效,但是并没有使用,在此我们给按钮设置一个悬浮事件,当鼠标悬浮在按钮之上后就调用该动效,点击按钮添加事件: 点击按钮添加事件后将会出现一个事件编辑框,在 ...

OpenLayers 绘制，选中，鼠标悬浮