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

最新推荐文章于 2025-09-12 11:45:50 发布

原创最新推荐文章于 2025-09-12 11:45:50 发布 · 2.4k 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#OpenLayers #GeoServer

前端同时被 2 个专栏收录

19 篇文章

订阅专栏

Vue

16 篇文章

订阅专栏

本文详细介绍了如何使用GeoServer发布Shapefile和PostGIS数据为地图服务，并通过OpenLayers在Web应用中读取这些服务。文章提供了具体的代码示例，展示了如何在OpenLayers中配置并显示GeoServer的地图层。

一、首先用 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>

三、结果图