一、首先用 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>
三、结果图