一侨赡、將shx通過postgis導(dǎo)入
1、創(chuàng)建數(shù)據(jù)庫
image.png
2、右鍵-->新建對象-->新建擴(kuò)展
image.png
image.png
image.png
image.png
3羊壹、菜單欄點(diǎn)擊插件-->打開postgis 也可通過開始菜單
注意點(diǎn)：文件路徑不可有中文蓖宦，文件格式應(yīng)為utf-8
image.png
image.png
刷新之后會出現(xiàn)新的數(shù)據(jù)表
image.png
二、設(shè)置geoserver
1油猫、新建工作區(qū)
image.png
2稠茂、創(chuàng)建數(shù)據(jù)存儲
image.png
image.png
image.png
3、創(chuàng)建樣式
image.png
image.png
image.png
image.png
4情妖、發(fā)布圖層
步驟：1睬关、新建圖層點(diǎn)擊發(fā)布-->2、設(shè)置邊框-->3毡证、點(diǎn)擊第三張圖的發(fā)布-->4电爹、選擇line-->5、點(diǎn)擊保存-->6料睛、照以上步驟以布其余的圖層
image.png
image.png
image.png
image.png
5丐箩、預(yù)覽圖層
找到創(chuàng)建的圖層點(diǎn)擊openlayers進(jìn)行預(yù)覽
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構(gòu)建簡單的web地圖應(yīng)用_嗶哩嗶哩_bilibili
