openlayers
openlayers 地图点击事件forEachFeatureAtPixel 报错
用vue3+openlayers 开发的时候，地图点击获取图层信息会报错， 找了半天，最后用map.forEachFeatureAtPixelDefault 就没报错了，也不知道是不是vue3的事，感觉应该不是，可能是openlayers版本的事。 地图用的是超图的 "@supermap/iclie ......
OpenLayers6使用天地图“经纬度投影(CGCS2000)”和“球面墨卡托投影(EPSG:3857)”WMTS服务
转自：https://blog.csdn.net/nudtcadet/article/details/1029084581.封装生成图层类/** * @fileOverview 天地图WMTS服务API * @author <a href=”https://blog.csdn.net/nudtcad ......
# openlayers 截图
openlayers 截图 OK，我承认，这篇博文是一个水文。 最新做了一个功能，就是 openlayers 展示二维 GIS 数据后，可以把当前的视角导出图片。 直接写代码吧，没啥好说的： // 截图 toImg() { if (this.map) { let canvas = this.map. ......
开源地图库OpenLayers的简单使用
地图不同于一般图表库的使用，本文介绍了OpenLayers的简单使用，包括地图的展示、放大缩小等简单的功能，以及一些简单的交互处理。 ......
在vue3中使用openlayers3实现track轨迹动画
网上太多资料代码，抄来抄去，而且版本也是OL2的，部分API已经弃用 基础知识不多说，直接讲重点 三个关键变量 // 记录开始动画的时间 const startTime = ref(0); // 轨迹分割的颗粒度，数值越小分的越细 const particle = 20; // 轨迹动画的速度，数值 ......
openlayers之wms属性查询、空间查询
openlayers之wms属性查询、空间查询 图层新建代码： let wmsSource = new ol.source.TileWMS({ url: config.dataSeverUrl, params: { 'FORMAT': 'image/png', 'VERSION': '1.1.1', ......
Vue+OpenLayers从入门到实战进阶案例汇总目录，兼容OpenLayers7和OpenLayers8
本篇作为《Vue+OpenLayers入门教程》和《Vue+OpenLayers实战进阶案例》所有文章的二合一汇总目录，方便查找。 本专栏源码是由OpenLayers结合Vue框架编写。 本专栏从Vue搭建脚手架到如何引入OpenLayers依赖的每一步详细新手教程，再到通过各种入门案例和综合性的实 ......
openlayers截图之图片跨域问题
openlayers截图之图片跨域问题 报错： Error in v-on handler: "SecurityError: Failed to execute 'toBlob' on 'HTMLCanvasElement': Tainted canvases may not be exported ......
openLayer移除Feature时报错
问题 在功能中，点击起点按钮则在地图中标记“起点”图标，当再次点击起点按钮时需要先清空之前的“起点”图标，再重新添加。 但此时控制台报错了： 错误代码： 在添加点之前，先执行了vectorSource.clear(),导致remove时，vectorSource.getFeatures()其实是空数 ......
vue+openlayers绘制线
绘制线 1 <template> 2 <div></div> 3 </template> 4 <script> 5 import VectorLayer from 'ol/layer/Vector.js'; 6 import VectorSource from 'ol/source/Vector.j ......
vue+openlayers 绘制点
绘制点使用point在绘制点的位置，使用Circle绘制点的样式 疑问：将style放在Feature上就绘制不出来样式？ <template> <div class="setting"> <div class="title">设置</div> <ul> <li> <p>边框大小：</p> <el- ......
vue2.0截图 html2canvas or dom-to-image 并解决openlayers截图空白问题
1.版本 "dom-to-image": "^2.6.0", // or "html2canvas": "^1.4.1", 2.引入 import domtoimage from 'dom-to-image'; // or import html2canvas from 'html2canvas'; ......
openlayers 5.0 当地图容器大小改变时，重新加载地图
## 问题 使用openlayers展示的地图，在对地图进行显示和隐藏时，在火狐浏览器中异常。 显示和隐藏使用了 display:'none' 和 display:'block'，对地图先隐藏，然后展示时，火狐浏览器中的map空白。 ## 解决 ``` setTimeout(function () ......
openlayers 遮罩效果
需要安装的依赖包 "ol": "^7.5.1", "ol-ext": "^4.0.11", 中国边界GEOJSON { "type": "Feature", "properties": { "adcode": 100000, "name": "中华人民共和国", "center": [ 116.36 ......
防止openlayers在draw绘制状态按shift功能失效
new Draw({ source: this.map.source, type: type, geometryFunction: geometryFunction, condition: () => { return true; }, freehandCondition: () => { retu ......
Openlayers构建指定发布图层的查询条件
const featureRequest = new ol.format.WFS().writeGetFeature({ srsName: "EPSG:4326", //这里的EPSG不要改为4326，可能无法显示？ featureNS: "http://geoserver.org/WS", //这 ......
使用vue+openLayers开发离线地图以及离线点位的展示
1 .下载 引入到需要的组件中 npm install ol 2. 需要用到的api... (根据开发需求以及实际情况进行引入) import ol from "ol"; import "ol/ol.css"; import Map from "ol/Map"; import View from " ......
openlayers海量点渲染（2w点左右）
openlayers海量点渲染（2w点左右） 此处用到了openlayers的webgl属性 import GeoJSON from 'ol/format/GeoJSON'; //用来加载矢量数据 import WebGLPointsLayer from 'ol/layer/WebGLPoints' ......
Openlayers 距离环绘制
思路：利用layer的StyleFunction 来使地图移动或者放缩的时候，使圆保持在地图中心 ```Javascript /** * 绘制距离环 * @param {number} distance 每环间隔距离，单位：米 * @param {array} texts 要显示的内容 * @des ......
Uncaught AssertionError: Assertion failed. See https://openlayers.org/en/v6.15.1/doc/errors/#25 for details.
openlayers 点击具体错误 Cannot fit empty extent provided as geometry. 这个错误信息意味着 OpenLayers 在尝试使用一个空的范围作为几何图形时出现了问题。范围(extent)表示几何图形覆盖的边界框或区域，它由四个坐标值组成：最小经度、 ......
openlayers显示图层为[0,0]
投影的问题，需要及时定义坐标几何的投影 在将要素添加到图层之前，需要将经纬度坐标转换为地图所使用的EPSG:3857投影坐标。 这里的坐标数据是经纬度转3857 const transformedCoord = ol.proj.transform([lon, lat], 'EPSG:4326', ' ......
penLayers入门教程汇总目录，OpenLayers教程，OpenLayers中文文档，OpenLayers手册，OpenLayers6文档教程，OpenLayers7中文手册
# 前言 本篇作为OpenLayers入门教程的目录，用于整理汇总专栏所有文章，方便查找。 OpenLayers是唯一可以支撑百万数据量点位的JS二维地图引擎。 ![openlayers](https://img-blog.csdnimg.cn/7f686d6fddfe4669ad417e0ff66 ......
uniapp中使用openlayers
相关链接 https://codeleading.com/article/25216143964/#google_vignette 例子 <template> <view id="map-id" class="map-class"></view> </template> <script> expor ......
OpenLayers 4326地图 根据距离设置地图分辨率
### 问题：给一个距离，如何确定4326地图缩放等级或者分辨率使地图视口范围为这个距离 1. 我本来打算计算从地图视口左上角到右下角的距离来计算地图缩放的，然后发现不好算，我也不会算，于是就计算水平方向距离的缩放。 2. 然后我发现了地图分辨率的定义使是 ： **分辨率——屏幕上一个像素代表多少地 ......
Vue+Openlayers+proj4实现坐标系转换
场景 Vue中使用Openlayers加载Geoserver发布的TileWMS： https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/115916949 在上面的基础上实现不同坐标系坐标数据的转换。 Openlayers中默认的坐标系 ......
WebGIS|使用Openlayers获取Geoserver发布的WFS和WCS服务
1、发布WFS和WCS服务 发布WFS服务 Web 要素服务（WFS） 支持对地理要素的插入，更新，删除，检索和发现服务。该服务根据HTTP客户请求返回GML数据。 其基础接口是：GetCapabilities，DescribeFeatureType，GetFeature GetCapabiliti ......
web开发报错合集（基于openlayers）
1、Uncaught TypeError: Cannot read properties of undefined (reading 'getViewport') 代码：（位于代码页最上面） 1 // 添加一个按钮，用于触发样式函数 2 var button = document.createEle ......
OpenLayers change 事件获取当前值
这里有个 change:resolution 事件 但是事件的内容没有value，只有oldValue Zc {type: 'change:resolution', target: F, key: 'resolution', oldValue: 9786.603971778399} 获取当前值的方法 ......
web开发报错笔记（基于openlayers）
本地调试报错： 1、Uncaught ReferenceError ReferenceError: hexFeatures1 is not defined 可能原因： 引用值错误/js调用顺序错误/路径错误 2、 ......