• 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 {
       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,
      },

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

    博客园: https://www.cnblogs.com/badaoliumangqizhi/ 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。
  • 相关阅读:
    java8之lambda表达式(默认方法)
    结合 CSS3 & Canvas 模拟人行走的效果
    使用 SVG 实现一个漂亮的页面预加载效果
    借助 CSS Colorguard 来避免使用重复的颜色
    网站制作素材:创意的404错误页面下载
    使用 CSS3 打造一组质感细腻丝滑的按钮
    经典!HTML5 Canvas 模拟可撕裂布料效果
    实用工具:检测过时的浏览器并提醒用户更新
    Hya.io – 基于 Web 的数字音频工作站
    SlidesJS
  • 原文地址:https://www.cnblogs.com/badaoliumangqizhi/p/14682538.html
Copyright © 2020-2023  润新知