Vue中访问Geoserver发布的openlayer中wms地图服务

野性酷女 2021-08-31 00:24 1274阅读 0赞

# 一，geoserver发布地图服务 #

详见：[https://blog.csdn.net/qq\_40323256/article/details/104964048][https_blog.csdn.net_qq_40323256_article_details_104964048]

# 二，引入ol #

cnpm i ol -S

# 三，根据图层预览中的URL，配置以下代码 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

**（注意：如果没有显示出来，按F12查看有没有报错。如果没有报错，那么其原因极有可能是zoom设置小了，把zoom设为15等比较大的数再试试！！）**

URL：[http://localhost:8090/geoserver/ws-world/wms?service=WMS&version=1.1.0&request=GetMap&layers=ws-world%3Amychina&bbox=73.4412841796875%2C18.159912109375%2C135.0869140625%2C53.5618896484375&width=768&height=441&srs=EPSG%3A4326&format=application/openlayers][http_localhost_8090_geoserver_ws-world_wms_service_WMS_version_1.1.0_request_GetMap_layers_ws-world_3Amychina_bbox_73.4412841796875_2C18.159912109375_2C135.0869140625_2C53.5618896484375_width_768_height_441_srs_EPSG_3A4326_format_application_openlayers]

<template>
      <div id="map"></div>
    </template>
    
    <script>
    import "ol/ol.css";
    import Map from "ol/Map";
    import View from "ol/View";
    import TileLayer from "ol/layer/Tile";
    import TileWMS from "ol/source/TileWMS";
    
    export default {
      data() {
        return {
          map: null
        };
      },
      methods: {
        init() {
          var layers = [
            new TileLayer({
              extent: [// 边界
                73.4412841796875,
               18.159912109375,
               135.0869140625,
                53.5618896484375
              ],
    		  // http://localhost:8090/geoserver/ws-world/wms?service=WMS&version=1.1.0&request=GetMap&layers=ws-world%3Amychina&bbox=73.4412841796875%2C18.159912109375%2C135.0869140625%2C53.5618896484375&width=768&height=441&srs=EPSG%3A4326&format=application/openlayers
              source: new TileWMS({
                //上线后，记得要把url: 'http://localhost:8090/geoserver/ws-world/wms'中的localhost换成云服务器的ip地址！！ 
                url: "http://localhost:8090/geoserver/ws-world/wms",
                // Layers需要指定要显示的图层名
                params: { LAYERS: "ws-world:mychina", TILED: true },
               	// serverType明显为geoserver
                serverType: "geoserver",
                // Countries have transparency, so do not fade tiles:
                transition: 0
              })
            })
          ];
          this.map = new Map({
            layers: layers,
            target: "map",
            view: new View({
              projection: "EPSG:4326",
              center: [115, 39],
              zoom: 4
            })
          });
        }
      },
      mounted() {
        this.init();
      }
    };
    </script>
    
    <style scoped>
    #map {
      height: 100vh;
      width: 100vw;
    }
    </style>

# 四，展示 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1][]

## 如果还想叠加地图，代码实现如下： ##

<template>
    	<div id="map"></div>
    </template>
    <script>
    import 'ol/ol.css';
    import Map from 'ol/Map';
    import View from 'ol/View';
    import TileLayer from 'ol/layer/Tile';
    import TileWMS from 'ol/source/TileWMS';
    import OSM from 'ol/source/OSM';
    import { defaults as defaultControls } from 'ol/control';
    import ZoomSlider from 'ol/control/ZoomSlider';
    
    export default {
    	name: '',
    	data() {
    		return {
    			map: null
    		};
    	},
    	mounted() {
    		this.initMap();
    	},
    	methods: {
    
    		// 初始化地图
    		initMap() {
    			let view = new View({
    				projection: 'EPSG:4326',
    				center: [115, 39],
    				zoom: 4
    			});
    			let layer = new TileLayer({
    				source: new OSM(),
    				visible: true,
    				zIndex: 1,
    				name: 'OSM'
    			});
    			this.map = new Map({
    				layers: [],
    				target: 'map',
    				view: view,
    				controls: defaultControls().extend([new ZoomSlider()])
    			});
    			this.map.addLayer(layer);
    
    			// 加载 GeoServer 发布的 wms 服务
    			let wmsLayer = new TileLayer({
    				extent: [
    					// 边界
    					73.4412841796875,
    					18.159912109375,
    					135.0869140625,
    					53.5618896484375
    				],
    				source: new TileWMS({
                        //上线后，记得要把url: 'http://localhost:8090/geoserver/ws-world/wms'中的localhost换成云服务器的ip地址！！ 
    					url: 'http://localhost:8090/geoserver/ws-world/wms',
    					// Layers需要指定要显示的图层名
    					params: { LAYERS: 'ws-world:mychina', TILED: true },
    					// serverType明显为geoserver
    					serverType: 'geoserver',
    					// Countries have transparency, so do not fade tiles:
    					transition: 0
    				}),
    				visible:true,
    				zIndex: 2,
    				className: 'wms'
    			});
    			this.map.addLayer(wmsLayer);
    
    		}
    	}
    };
    </script>
    <style scoped>
    #map {
      height: 100vh;
      width: 100vw;
    }
    </style>

**注意：上线后，记得要把url: 'http://localhost:8090/geoserver/ws-world/wms'中的localhost换成云服务器的ip地址！！ **

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2][]

如果想要点击查看各个要素的属性，那么可以将这个shp数据发布为geojson数据，再进行访问，具体代码参考：[openlayer中加载geojson的几种方式][openlayer_geojson]  （[https://blog.csdn.net/qq\_40323256/article/details/107817399][openlayer_geojson]）

这是加载的shp矢量地图，如果想要加载tiff格式的影像栅格地图，那么在选择数据来源时选Geotiff格式，然后前端访问影像数据的代码和访问矢量数据的代码一样，只不过矢量可以用geojson访问，而影像不能用geojson访问

这个shp数据最好是4326的，因为在用3857测试时时访问不到数据，不知道为什么，但是4326是可以正常访问加载的

[https_blog.csdn.net_qq_40323256_article_details_104964048]: https://blog.csdn.net/qq_40323256/article/details/104964048
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/fbd7cf247f544b688d909aaa4e3773d6.png
[http_localhost_8090_geoserver_ws-world_wms_service_WMS_version_1.1.0_request_GetMap_layers_ws-world_3Amychina_bbox_73.4412841796875_2C18.159912109375_2C135.0869140625_2C53.5618896484375_width_768_height_441_srs_EPSG_3A4326_format_application_openlayers]: http://localhost:8090/geoserver/ws-world/wms?service=WMS&version=1.1.0&request=GetMap&layers=ws-world%3Amychina&bbox=73.4412841796875%2C18.159912109375%2C135.0869140625%2C53.5618896484375&width=768&height=441&srs=EPSG%3A4326&format=application/openlayers
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: /images/20210725/92e8fb5577464829acd6f251afed6456.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2]: /images/20210725/515e33699a14418db225b0e1336da000.png
[openlayer_geojson]: https://blog.csdn.net/qq_40323256/article/details/107817399