OpenLayers
文章平均质量分 56
OpenLayers
碰碰qaq
前端GIS领域
展开
-
geoserver2.18(9):Openlayers加载GeoServer的Vector Tiles
【代码】geoserver2.18(9):Openlayers加载GeoServer的Vector Tiles。原创 2022-09-02 17:36:39 · 730 阅读 · 0 评论 -
OpenLayers6(9):Vue中使用ol-ext插件中的PrintDialog打印控件
0 版本 OpenLayers:6.14.1 ol-ext:3.2.24(条件:"ol": ">= 5.3.0")1 相关配置// 1、安装ol-extnpm i ol-ext // 2、在main.js中引入样式import 'ol-ext/dist/ol-ext.min.css';// 3、安装jspdf用于导出pdfnpm install jspdf --save// 4、安装FileSaver.js用于导出数据npm i file-saver2原创 2022-05-18 17:25:37 · 1138 阅读 · 2 评论 -
OpenLayers6(8):引入Turf.js做缓冲区分析
1 版本 OpenLayers:6.14.1 2 相关配置//前端的地理空间分析库,处理各种地图算法npm i @turf/turf3 Openlayers图形与图形Turf之间的互相转换使用策略模式进行实现:/** * 策略模式,不同类型返回不同的Turf几何图形 */export const mCoords2TurfGeom = { Point: function (coords) { return turf.point(coords);原创 2022-05-12 16:49:20 · 1895 阅读 · 0 评论 -
OpenLayers6(7):矢量图层要素导出KML文件
1 版本 OpenLayers:6.14.1 2 相关配置/**FileSaver.js 在没有原生支持 saveAs() 的浏览器上实现了 saveAs() 接口。FileSaver.js 是在客户端保存文件的解决方案,非常适合需要生成文件,或者保存不应该发送到外部服务器的敏感信息的 web App。*/npm i file-saver3 API说明3.1 ol/format/KMLOpenlayers中用于读/写KML格式数据的要素格式类,API如下:read原创 2022-05-11 17:21:28 · 1047 阅读 · 0 评论 -
OpenLayers6(6):绘制图形工具条封装(Draw、Snap、Modify)
1 版本 OpenLayers:6.14.1 2 说明Draw:绘制图形 Snap:捕捉图形 Modify:修改图形3 绘制图形组件将绘制界面直接封装成vue单文件组件,上代码:<template> <div class="ol-draw-collapse"> <el-collapse :value="['1']"> <el-collapse-item name="12"> <temp原创 2022-04-29 09:25:39 · 2242 阅读 · 0 评论 -
OpenLayers6(5):基于kriging.js实现插值渲染图
1 版本 OpenLayers:6.4.3 2 相关配置import kriging from '@sakitam-gis/kriging';3 使用kriging.js3.1 数据准备待准备数据以通用的geojson数据格式即可待插值得矢量点数据:本例使用河南省XXX点数据 待插值的范围边界数据:本例使用河南省边界3.2 样本训练The train method in the kriging object fits your input to whatever va原创 2022-04-27 11:41:03 · 2042 阅读 · 3 评论 -
OpenLayers6(4):Vue中使用ol-ext插件中的Legend图例控件
1 版本 OpenLayers:6.4.3 ol-ext:3.2.22(条件:"ol": ">= 5.3.0")2 配置ol-ext// 1、安装ol-extnpm i ol-ext // 2、在main.js中引入样式import 'ol-ext/dist/ol-ext.min.css';3 使用Legend控件3.1 说明ol.control.Legend:Create a legend for styles. ol.legend.Legend:Legen原创 2022-04-25 16:21:31 · 4511 阅读 · 2 评论 -
OpenLayers6(3):Vue导出图片时报错“Uncaught DOMException: Failed to execute ‘toDataURL on ‘HTMLCanvasElement”
1.版本 OpenLayers:6.4.3 2.导出时候遇到报错3.原因分析原因:openlayers中加载的图层中存在不允许跨域的图层;解决:找到相应的图层,添加crossOrigin:'anonymous',处理跨域问题;// 切片-图层export function addlocalTileLayer(title, url, proj = 'EPSG:3857') { const tileLayer = new TileLayer({ ....原创 2022-04-23 12:51:17 · 1955 阅读 · 0 评论 -
OpenLayers6(2):Vue中使用ol-ext插件中的LayerSwitcher图层控制控件
1.版本 OpenLayers:6.4.3 ol-ext:3.2.22(条件:"ol": ">= 5.3.0")2.配置ol-ext// 1、安装ol-extnpm i ol-ext// 2、在main.js中引入样式import 'ol-ext/dist/ol-ext.min.css';3.使用LayerSwitcher控件3.1 先看LayerSwitcher构造函数的参数LayerSwitcher控件的构造函数参数 selection enabl原创 2022-04-22 15:08:44 · 4758 阅读 · 1 评论 -
OpenLayers6(1):访问GeoServer中GeoWebCache的WMTS切片图层
1 版本OpenLayers:6.4.32 geoserver中配置GeoWebCache详见我之前写过的文章:geoserver2.18系列(4):wms服务——影像切片缓存3 OpenLayers中以WMTS服务的形式进行访问以访问EPSG:4326的切片方案为例进行说明3.1 GeoServer中查看相应的切片方案参数3.2 Openlayers中根据切片方案参数进行参数配置const mGridset4326 = { gridNames: ['EP.原创 2022-04-20 10:33:39 · 1093 阅读 · 0 评论 -
geoserver2.18(4):wms服务——GeoWebCache影像切片缓存
1、配置GeoWebCache缓存路径打开webapps/geoserver/WEB-INF下的web.xml文件,在display-name节点后面添加一下内容: <context-param> <param-name>GEOWEBCACHE_CACHE_DIR</param-name> <param-value>D:\cache\geo_web_cache_dir</param-value>原创 2020-12-07 10:29:38 · 3388 阅读 · 6 评论 -
vue开发案例:vue、elementUI、openlayers、cesium、echarts整合开发
基于vue + elementUI + openlayers + cesium开发 功能展示:风场可视化原创 2020-11-01 13:08:57 · 2346 阅读 · 10 评论