Vue中使用Openlayers加载Geoserver发布的TileWMS
场景
Openlayers下载与加载geoserver的wms服务显示地图:
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/114320531
Vue中使用Openlayers加载Geoserver发布的ImageWMS:
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/115867709
在上面已经加载ImageWMS的基础上,想要加载TileWMS
ImageWMS与TileWMS的区别
相同点:都是加载WMS服务。
不同点:TitleWMS会把当前可视窗口根据网格(开发者可以在调用OpenLayers api的时候自定义)切分,一片一片地返回回来,在前端进行整合。而ImageWMS则不会进行切割,每次请求都是只会返回一个当前窗口可见地地图图片。如果WMS服务对应地数据比较大并且网络条件不是很好的时候,TileWMS交互体验更好一点(因为做了切割,每次返回回来的图片大小都比较小),而ImageWMS是返回一整个图片,看起来会有较大的卡顿时间,交互感觉不好。
切片方式(TileWMS):动态地图在GIS Server生成后,以切片的方式返回到前端,优点是将地图切分,每个切片的数据量很小,便于数据的传输,适用于网络状况不佳的环境;缺点是在地图切片的过程中,可能会造成我遇到的 标注多次出现的问题。
图像方式(ImageWMS):地图生成后,直接以一个整体返回到前端显示,优点是不会出现标注重复出现的问题,确定是对网络状况不佳的环境,可能出现请求失败的问题。
注:
博客:
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。
实现
首先搭建一个Vue项目,这里使用快速开发框架搭建如下
若依前后端分离版手把手教你本地搭建环境并运行项目:
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662
Vue中安装Openlayers
npm install ol
然后我们新建一个组件olMapTileWMS.vue
在此组件中首先增加一个div用来显示地图
<template><div id="map" class="map"></div>
</template>
并且设置id,后面用来渲染地图用,然后设置一些样式
<style scoped>
.map {width: 100%;height: 800px;
}
</style>
然后导入一些相关模块
//导入基本模块
import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
//导入相关模块
import { Tile as TileLayer } from 'ol/layer'
import { TileWMS } from 'ol/source'
然后在mounted方法中执行地图初始化的方法initMap
mounted() {this.initMap();},
在地图初始化的方法中
首先新建一个layers图层名为image
var layer = new TileLayer({source: new TileWMS({//不能设置为0,否则地图不展示。ratio: 1,url: "http://localhost:8000/geoserver/nyc/wms",params: {LAYERS: "nyc:nyc_roads",STYLES: "",VERSION: "1.1.1",tiled: true},serverType: "geoserver",}),});
注意这里的参数要与自己上面使用geoserver发布的wms预览中的一致
url就是预览地址中的问号前面部分
然后新建地图对象
this.map = new Map({//地图容器IDtarget: "map",//引入地图layers: [layer],view: new View({//地图中心点center: [987777.93778, 213834.81024],zoom: 12,// minZoom:1, // 地图缩放最小级别}),});
这里需要主要的是target的参数值对应的是上面div的id,用来设置地图容器的id
然后layers设置图层时就是上面新建的layer图层对象
然后就是设置地图的中心点,可以在预览界面中获取要显示地图时的中心点
组件完整代码
<template><div id="map" class="map"></div>
</template><script>
//导入基本模块
import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
//导入相关模块
import { Tile as TileLayer } from 'ol/layer'
import { TileWMS } from 'ol/source'
export default {name: "olMapImageWMS",data() {return {};},mounted() {this.initMap();},methods: {initMap() {var layer = new TileLayer({source: new TileWMS({//不能设置为0,否则地图不展示。ratio: 1,url: "http://localhost:8000/geoserver/nyc/wms",params: {LAYERS: "nyc:nyc_roads",STYLES: "",VERSION: "1.1.1",tiled: true},serverType: "geoserver",}),});this.map = new Map({//地图容器IDtarget: "map",//引入地图layers: [layer],view: new View({//地图中心点center: [987777.93778, 213834.81024],zoom: 12,// minZoom:1, // 地图缩放最小级别}),});},},
};
</script><style scoped>
.map {width: 100%;height: 800px;
}
</style>
然后在需要显示地图的页面引入并显示组件
<template><div class="app-container home"><el-row :gutter="20"><olMapTileWMS></olMapTileWMS></el-row><el-divider /></div>
</template><script>
import olMapTileWMS from "@/components/olMap/olMapTileWMS";
export default {name: "index",components: {olMapTileWMS,},
然后启动项目,访问页面查看效果
Vue中使用Openlayers加载Geoserver发布的TileWMS相关推荐
- Vue中使用Openlayers加载Geoserver发布的TileWMS时单击获取shp文件的坐标信息
场景 Vue中使用Openlayers加载Geoserver发布的TileWMS: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/ ...
- Vue中使用Openlayers加载Geoserver发布的ImageWMS
场景 Openlayers下载与加载geoserver的wms服务显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/114 ...
- Vue+Openlayers加载Geoserver发布的TileWMS后更换shp数据源的流程
场景 Vue中使用Openlayers加载Geoserver发布的TileWMS: Vue中使用Openlayers加载Geoserver发布的TileWMS_BADAO_LIUMANG_QIZHI的 ...
- Vue中使用Openlayers加载OSM(Open Street Map)显示街道地图
场景 Openlayers下载与加载geoserver的wms服务显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/114 ...
- openlayers 加载geoserve发布的WMS数据
一.导入相关的包 import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js'; import {XYZ,TileWMS,V ...
- ArcGIS JS API加载GeoServer发布的WFS服务
文章目录 前言 主要代码 总结 参考链接 前言 WFS(Web Feature Service),OGC标准下的要素服务.其支持的主要操作如下: GetCapabilities (discovery ...
- 高德地图 sdk 加载 geoserver 发布的瓦片地图服务
前言 最近,碰到了需求,想要在高德 sdk 中使用在 geoserver 里面发布的瓦片地图. 还好经过一番研究,在其官方文档中发现,从新版本(v1.4.3开始)的高德 sdk 开始,已经支持加载第三 ...
- vue中通过js加载图片显现
在vue开发中会遇到这样的问题:有时需要在img中加载多个静态资源的图片,如果我们将src的路径整个定义成一个变量,会发现img加载不出来正个图片的路径,其实此时需要require()来加载静态资源的 ...
- bug解决-Vue中img图片加载失败解决方案
Vue 中img图片加载失败解决方案 bug:assets文件下的图片动态取得话,显示不出来. 解决方法:把图片放到public文件夹下 public是直接原封不动打包到dist里面
最新文章
- Nacos源码系列——第一章(Nacos核心源码主线剖析上)
- mysql执行语句_实时查看MySQL执行的语句
- js php 时间格式化字符串,JS怎么实现字符串与日期的互相转换及日期的格式化
- docker搜索镜像
- 使用node中的express解决vue-cli加载不到dev-server.js的问题
- 循环语句与条件语句_在PHP中混合条件语句和循环
- java通讯录工程_JAVA通讯录管理小项目
- Interop type 'jmail.POP3Class' cannot be embedded. Use the applicable interface instead.
- MYSQL问题解决方案:Access denied for user ‘root‘@‘localhost‘ (using password:YES)
- [转+]C语言复杂声明
- 影音先锋 android下载地址,影音先锋手机版-影音先锋下载v5.8.2 安卓手机版-西西软件下载...
- matlab改变图片尺寸及像素与尺寸的转换
- 【去广告插件推荐】AdBlock让浏览器清净
- matlab中zi filtic b a,实验七离散系统分析的matlab实现.doc_蚂蚁文库
- 剖析抖音快速涨粉的文案号,了解大佬运营技巧,学以致用
- 电子计算机开关及清屏键,计算机清屏键是什么
- 解决vue/es6语法低版本安卓手机显示白屏的兼容性问题
- Ubuntu配置流水账
- 探索网易大型自动化测试解决方案 看这里看这里
- 2022-2028全球与中国电子门禁系统市场现状及未来发展趋势
热门文章
- 初学__Python——Python 变量的作用域
- Windows下LaTeX安装及使用,使用VS Code改善LaTeX编辑环境
- 王道计算机考研 计算机组成原理 第一章、计算机系统概述
- AcWing算法基础课 Level-2 第三讲 搜索与图论
- 四种保留小数后两位输出方法
- 导出PDF和Zip文件的工具类
- java二叉堆_为什么二叉堆利用数组存储?
- x3m文件怎么转换成mp3_视频中的音频怎么单独提取出来转换成mp3格式
- python项目部署nginx_详解使用Nginx和uWSGI配置Python的web项目的方法
- java 等待几秒_Java并发编程synchronized相关面试题总结