场景
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 { 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({ //地图容器ID target: "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({ //地图容器ID target: "map", //引入地图 layers: [layer], view: new View({ //地图中心点 center: [987777.93778, 213834.81024], zoom: 12, // minZoom:1, // 地图缩放最小级别 }), }); }, }, }; </script> <style scoped> .map { 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, },
然后启动项目,访问页面查看效果