Vue中使用Openlayers加载Geoserver发布的ImageWMS

短命女 2023-01-14 01:38 535阅读 0赞

# 场景 #

Openlayers下载与加载geoserver的wms服务显示地图：

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/114320531][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_114320531]

在上面使用Openlayers加载wms服务显示地图的基础上，如果想要在Vue中使用Openlayers加载地图怎么用。

在上面使用图层预览后可以直接在网页中显示wms地图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

## ImageWMS与TileWMS的区别 ##

相同点：都是加载WMS服务。  
不同点：TitleWMS会把当前可视窗口根据网格（开发者可以在调用OpenLayers api的时候自定义）切分，一片一片地返回回来，在前端进行整合。而ImageWMS则不会进行切割，每次请求都是只会返回一个当前窗口可见地地图图片。如果WMS服务对应地数据比较大并且网络条件不是很好的时候，TileWMS交互体验更好一点（因为做了切割，每次返回回来的图片大小都比较小），而ImageWMS是返回一整个图片，看起来会有较大的卡顿时间，交互感觉不好。

切片方式（TileWMS）：动态地图在GIS Server生成后，以切片的方式返回到前端，优点是将地图切分，每个切片的数据量很小，便于数据的传输，适用于网络状况不佳的环境；缺点是在地图切片的过程中，可能会造成我遇到的 标注多次出现的问题。  
图像方式（ImageWMS）：地图生成后，直接以一个整体返回到前端显示，优点是不会出现标注重复出现的问题，确定是对网络状况不佳的环境，可能出现请求失败的问题。

注：

博客：  
[https://blog.csdn.net/badao\_liumang\_qizhi][https_blog.csdn.net_badao_liumang_qizhi]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

# 实现 #

首先搭建一个Vue项目，这里使用快速开发框架搭建如下

若依前后端分离版手把手教你本地搭建环境并运行项目：

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/108465662][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_108465662]

Vue中安装Openlayers

npm install ol

然后我们新建一个组件olMapImageWMS.vue

在此组件中首先增加一个div用来显示地图

并且设置id，后面用来渲染地图用，然后设置一些样式

然后导入一些相关模块

//导入基本模块
    import "ol/ol.css";
    import Map from "ol/Map";
    import View from "ol/View";
    //导入相关模块
    import ImageWMS from "ol/source/ImageWMS";
    import Image from "ol/layer/Image";

然后在mounted方法中执行地图初始化的方法initMap

mounted() {
        this.initMap();
      },

在地图初始化的方法中

首先新建一个layers图层名为image

var image = new Image({
            source: new ImageWMS({
              //不能设置为0，否则地图不展示。
              ratio: 1,
              url: "http://localhost:8000/geoserver/nyc/wms",
              params: {
                LAYERS: "nyc:nyc_roads",
                STYLES: "",
                VERSION: "1.1.1",
                FORMAT: "image/png",
              },
              serverType: "geoserver",
            }),
          });

注意这里的参数要与自己上面使用geoserver发布的wms预览中的一致

url就是预览地址中的问号前面部分

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1][]

params中的相关参数，可以在预览界面中查看源代码获取

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 2][]

注意这里的FORMAT是image/png

然后新建地图对象

this.map = new Map({
            //地图容器ID
            target: "map",
            //引入地图
            layers: [image],
            view: new View({
              //地图中心点
              center: [987777.93778, 213834.81024],
              zoom: 12,
              // minZoom:1, // 地图缩放最小级别
            }),
          });

这里需要主要的是target的参数值对应的是上面div的id，用来设置地图容器的id

然后layers设置图层时就是上面新建的image图层对象

然后就是设置地图的中心点，可以在预览界面中获取要显示地图时的中心点

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 3][]

组件完整代码

<template>
      <div id="map" class="map"></div>
    </template>
    
    <script>
    //导入基本模块
    import "ol/ol.css";
    import Map from "ol/Map";
    import View from "ol/View";
    //导入相关模块
    import ImageWMS from "ol/source/ImageWMS";
    import Image from "ol/layer/Image";
    export default {
      name: "olMapImageWMS",
      data() {
        return {
        };
      },
      mounted() {
        this.initMap();
      },
      methods: {
        initMap() {
          var image = new Image({
            source: new ImageWMS({
              //不能设置为0，否则地图不展示。
              ratio: 1,
              url: "http://localhost:8000/geoserver/nyc/wms",
              params: {
                LAYERS: "nyc:nyc_roads",
                STYLES: "",
                VERSION: "1.1.1",
                FORMAT: "image/png",
              },
              serverType: "geoserver",
            }),
          });
    
          this.map = new Map({
            //地图容器ID
            target: "map",
            //引入地图
            layers: [image],
            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">
          <olMapImageWMS></olMapImageWMS>
        </el-row>
        <el-divider />
      </div>
    </template>
    
    <script>
    import olMapImageWMS from "@/components/olMap/olMapImageWMS";
    export default {
      name: "index",
      components: {
        olMapImageWMS,
      },

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 4][]

[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_114320531]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/114320531
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: /images/20221022/125ddce675ff4d62b3f65280a9a4578b.png
[https_blog.csdn.net_badao_liumang_qizhi]: https://blog.csdn.net/badao_liumang_qizhi
[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_108465662]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1]: /images/20221022/1b2282f0790842cfac8e784c76138034.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 2]: /images/20221022/7cba7d6e88fc4c088eb58b75e405aabe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 3]: /images/20221022/66462631b53f4b1aa5118393107a5451.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 4]: /images/20221022/e08407ccd72046c990d9000581b5ea83.png