openlayer
迷茫的小猿
一只学后端但必须做前端工作的程序猿
展开
-
vue+openlayer加载geojson通过地图的singleclick事件实现要素的选中高亮以及再次点击取消选中
思考:选中: 通过singleclick事件可以获取坐标点,openlayer中Feature有个getGeometry().getClosestPoint§方法,就是feature根据这个p坐标可以获取到里这个点最近的坐标点,然后咱们通过这个点和点击的点的距离进行比较,并且咱们也可以进一步的进行限定(判定点击的坐标在feature的边界内),这样做还是有问题,就是你还有可能选中不相关的点或者线,咱们可以做一个工具,也是使用openlayer加载geojson,然后通过选中你想要进行标定的要素,将这些块的原创 2020-07-01 17:41:51 · 1977 阅读 · 0 评论 -
vue+openlayers加载geojson 限定(过滤)一些feature(要素)不能被选中或者指定某些feature能够被选中
需求:公司场所对工位、办公室、会议室等进行标定,选中时不能选中灯管,地毯,无关的线和点思考:咱们可以获取到所有的要素(feature),通过AutoCAD打开cad文件时你可以发现,要素是有类型的,然后咱们使用openlay加载geojson时在控制台打印feature会发现feature.values_.RefName这个字段和autocad里面发现的类型是一致的,ok,可以开始完成了解决方案:你可以做一个工具,也是使用openlayer加载geojson,然后通过选中你想要进行标定的要素,将这些原创 2020-07-01 17:32:19 · 1893 阅读 · 0 评论 -
openlayers.js加载地图添加多个数字标记
思路:首先创建一个数字标记图层,然后在涂层上面添加数字标记原创 2020-06-16 18:19:53 · 1310 阅读 · 2 评论 -
vue+openlayers设置地图背景颜色(本例子为背景颜色设置为黑色)
思考:我之前用的是JavaScripts+openlayers,在网上搜了很多资料,自己也尝试了很多次,都没有设置成功,貌似不可行,估计需要拿过来的地图就是黑色的,这个可以去找黑色地图(我没找啊,因为后来需求变了,需要将openlayers集成到vue中,于是我就改变策略了),vue+openlayers设置背景颜色其实很简单,只需要设置地图所在的div的背景颜色即可代码:<template> <div id="map" class="mapStyle" ref="rootma原创 2020-05-22 16:16:32 · 6991 阅读 · 0 评论 -
vue+openlayers添加点击事件进行图片标记
思考:首先肯定是先创建一个图层,然后在该图层点击的位置添加一个feature(图片)代码实现: //创建矢量容器,当点击时将图标feature放进去 var iconVector = new VectorSource({ features:[] }) //创建图层 var iconLayer = new VectorLayer({ source:iconVector }) //将图层添加到地图上 this.map.addLayer(iconLayer) this.ma原创 2020-05-22 16:03:15 · 4181 阅读 · 0 评论 -
vue集成openlayers(vue+openlayers)加载geojson并实现点击弹窗教程
第一步:安装vue-clicnpm install -g @vue/cli第二步:新建一个项目1.新建项目 (vue-openlayers为项目名),并选择default模版vue create vue-openlayers2.安装openlayerscnpm i -S ol第三步:写业务代码1.删除掉HelloWorld.vue 新建 olmap.vue组件components/olmap.vue代码:<template> <div id="map" r原创 2020-05-21 18:17:22 · 2630 阅读 · 0 评论 -
Geoserver配置以及发布geojson服务教程
第一步:下载文件原创 2020-05-13 14:41:12 · 9773 阅读 · 10 评论 -
openlayers.js加载geojson时绑定单击事件,点击空白处选中最接近的要素(比如一个线性图形下面有个多边形,在线性图形空白处点击时会选中多边形,而你想要选中线性图形)
背景:之前我写过一篇文章解决这个问题的点击此处查看,所以就不在这里详细介绍问题了,但是呢不够官方,是我自己凭空想象而来的,下面我要介绍的就比较官方了,因为是比对官方文档api来获取的第一步:首先咱们依旧需要遍历所有feature这次参考官方apiol/source/Vector的getFeatures()方法去获取所有feature直接获取是获取不到的,我也说不了这个是异步的还是说图层加载完成之后才能获取,所以我干脆就直接来个定时器代码:if(timer){ clearInterval(ti原创 2020-05-13 11:23:11 · 419 阅读 · 1 评论 -
openlayers.js加载geojson时绑定单击事件,点击空白处选中最接近的要素(比如一个线性图形下面有个多边形,在线性图形空白处点击时会选中多边形,而你想要选中线性图形)
第一步:问题分析当你在使用openlayers加载geojson时,使用ol.interaction.Select给map添加单击事件选中要素时,比如一个线性图形下面有个多边形,在线性图形空白处点击时会选中多边形,而不会选中线性图形,这应该怎么解决呢?代码: var selectSingleClick = new ol.interaction.Select(); map.addIntera...原创 2020-05-08 14:24:13 · 609 阅读 · 0 评论 -
opnelayers.js加载geojson实现选中一个块(要素)高亮所有相同的块(要素)
分析思路:首先实现选中一个要素,然后打印出一个Feature,然后在控制台看看不同的要素之间有什么区别,相同的要素之间有什么相同属性第一步:绑定单击事件,选中一个要素代码:var selectSingleClick = new ol.interaction.Select();map.addInteraction(selectSingleClick);selectSingleClick....原创 2020-05-07 10:02:20 · 360 阅读 · 0 评论 -
openlayers.js通过map遍历所有图层中的feature
具体API参考openlayer代码:var map = new ol.Map({ layers: [gaodeMapLayer], view: new ol.View({ center: [0.281830008803421,0.245858887676368], projection: 'EPSG:4326', zoom: 1...原创 2020-05-06 14:38:09 · 3042 阅读 · 1 评论 -
使用openlayer显示geojson的时候,使用openlayers中interaction的select方法单击选中要素
直接上代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>高德地图+ol</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.co...原创 2020-04-26 14:59:29 · 545 阅读 · 1 评论