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({
        //地图容器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 {
  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,
  },

然后启动项目,访问页面查看效果

 

 

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:成长之路 设计师:Amelia_0503 返回首页

打赏作者

霸道流氓气质

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值