使用PostGIS+GeoServer+Openlayer+Vue构建简单的web地图应用

一、将shx通过postgis导入

1、创建数据库

2、右键–>新建对象–>新建扩展




3、菜单栏点击插件–>打开postgis 也可通过开始菜单
注意点：文件路径不可有中文，文件格式应为utf-8


刷新之后会出现新的数据表

二、设置geoserver

1、新建工作区

2、创建数据存储



3、创建样式




4、发布图层
步骤：1、新建图层点击发布–>2、设置边框–>3、点击第三张图的发布–>4、选择line–>5、点击保存–>6、照以上步骤以布其余的图层




5、预览图层
找到创建的图层点击openlayers进行预览

三、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>

推荐视频：使用PostGIS，GeoServer和Openlayer构建简单的web地图应用_哔哩哔哩_bilibili