Vue+OpenLayers学习系列（三）OpenLayers 读取 GeoServer 发布的地图服务

最新推荐文章于 2024-06-07 15:42:15 发布

爱睡懒觉的老舅

最新推荐文章于 2024-06-07 15:42:15 发布

阅读量2.2k

点赞数 2

分类专栏：前端 Vue 文章标签： OpenLayers GeoServer

本文链接：https://blog.csdn.net/Ocean111best/article/details/107437870

版权

前端同时被 2 个专栏收录

19 篇文章 17 订阅

订阅专栏

Vue

16 篇文章 1 订阅

订阅专栏

一、首先用 GeoServer 发布地图服务

可以用 GeoServer 发布 Shapefile 数据（参见https://zhuanlan.zhihu.com/p/73644445）

也可以用 GeoServer 发布 PostGIS 数据（参见https://zhuanlan.zhihu.com/p/73870146）

注意：GeoServer 可能会产生跨域问题，网上很多办法都不靠谱，解决办法在这里：https://www.jianshu.com/p/9773ec789ba4?tdsourcetag=s_pctim_aiomsg

二、OpenLayers 读取 GeoServer 发布的地图服务

<template>
  <div id="map" ref="rootmap">
  </div>
</template>
<script>
  import 'ol/ol.css';
  import Map from 'ol/Map';
  import View from 'ol/View';
  import {Tile as TileLayer, Image as ImageLayer} from 'ol/layer';
  import {OSM, ImageArcGISRest,TileWMS,ImageWMS} from 'ol/source';
  export default{
    name: 'OlGeoserve',
    data(){
      return{
          map: null
      };
    },
    mounted(){
      let url = 'http://localhost:8080/geoserver/ocean/wms';
      this.map = new Map({
        target: "map",
        layers: [
          new TileLayer({
            source: new OSM()   //这个会出现底图
          }),
          new ImageLayer({     //TileLayer、ImageLayer
            source: new ImageWMS({    //TileWMS、ImageWMS
              ratio: 1,
              params: {
                //'FORMAT': 'image/jpeg',   //如果加了这行，地图底图将会被遮住
                'VERSION': '1.1.0',
                'LAYERS': 'ocean:GDSJ',
                'STYLES': '',
              },
              url: url
            })
          })
        ],
        view: new View({
          projection: 'EPSG:4326',
          center: [-10997148, 4569099],
          zoom: 4
        })
      });

    }
  };

</script>

<style>
  #map{
    height:800px;
    width: 1400px;
  }
  /*隐藏ol的一些自带元素*/
  .ol-attribution,.ol-zoom { display: none;}

</style>

三、结果图