一、将shx通过postgis导入
1、创建数据库
image.png
2、右键-->新建对象-->新建扩展
image.png
image.png
image.png
image.png
3、菜单栏点击插件-->打开postgis 也可通过开始菜单
注意点：文件路径不可有中文，文件格式应为utf-8
image.png
image.png
刷新之后会出现新的数据表
image.png
二、设置geoserver
1、新建工作区
image.png
2、创建数据存储
image.png
image.png
image.png
3、创建样式
image.png
image.png
image.png
image.png
4、发布图层
步骤：1、新建图层点击发布-->2、设置边框-->3、点击第三张图的发布-->4、选择line-->5、点击保存-->6、照以上步骤以布其余的图层
image.png
image.png
image.png
image.png
5、预览图层
找到创建的图层点击openlayers进行预览
image.png
image.png
image.png
三、openlayer
vue2+openlayer6
<template>
<div class="home">
<div id="map" ref="map"></div>
</div>
</template>
<script>
import "ol/ol.css";
import ImageWMS from "ol/source/ImageWMS";
import Map from "ol/Map";
import OSM from "ol/source/OSM";
import View from "ol/View";
import { Image as ImageLayer, Tile as TileLayer } from "ol/layer";
export default {
name: "Home",
data() {
return {
map: ""
};
},
methods: {
// 初始化一个openLayers的视图
initMap() {
var layers = [
new TileLayer({
source: new OSM()
}),
new ImageLayer({
extent: [-13884991, 2870341, -7455066, 6338219],
source: new ImageWMS({
url: "http://localhost:8080/geoserver/web_map/wms",
params: {
FORMAT: "image/png",
VERSION: "1.1.1",
tiled: true,
STYLES: "",
LAYERS: "web_map:ne_110m_admin_0_countries"
},
ratio: 1,
serverType: "geoserver"
})
})
];
this.map = new Map({
layers: layers,
target: "map",
view: new View({
center: [-74.047185, 40.679648],
zoom: 2,
code: "EPSG:4326",
units: "degrees"
})
});
}
},
mounted() {
this.initMap();
}
};
</script>
<style lang="less">
#map {
width: 100%;
height: 80vh;
}
</style>
image.png
推荐视频：使用PostGIS，GeoServer和Openlayer构建简单的web地图应用_哔哩哔哩_bilibili
