Skip to content

DXnima/WebGIStest

BranchesTags

Repository files navigation

WebGIStest 是基于 Vue+SpringBoot 使用开源GIS技术的相关用例功能实现项目。

项目地址

技术：

  • 前端：Vue | Element | Axios | OpenLayers | Mapbox-GL | Echarts

  • 后端：SpringBoot | Mybaits | Redis | Postgres+PostGIS+PgRouting | GeoTools | GDAL v3.5.2

  • 地图服务端： GeoServer

项目展示

空间分析模块

项目说明

实现功能说明

  1. OpenLayers

    • 实现图层切换
      • openStreetMap
      • 百度地图
      • 天地图
      • WMS Image服务
      • WMS Tile服务
      • WMS Grid服务
      • WMTS服务
      • WFS服务
    • 实现图层多选控件
    • 鼠标移动获取经纬度
    • 请求数据接口渲染点要素图层
    • 要素样式修改
    • 地图悬浮窗体
    • 地图覆盖饼状图
    • 加载GeoJSON数据
    • 加载wkts数据
    • 加载GeoServer发布的wms服务
    • 加载GeoServer发布的WFS服务
      • 加载WFS服务
      • 添加WFS服务图层
      • 修改WFS服务图层
      • 删除WFS服务
    • 点要素选中高亮
    • 点线面要素在线绘制、编辑
    • 点线面要素保存PostgesSQL数据库
    • PostGIS实现矢量切片
    • 综合例子：高校数据显示与查询

  2. GeoTools

    • 启动Quickstart例子
    • Geojson转Shapefile
    • Shapefile转Geojson
    • 读取Shapefile
    • Shapefile进行Intersect计算
    • Shapefile坐标转换
    • 创建XML格式的SLD
    • 空间关系判断
    • 空间分析
      • 叠加分析
      • 合并分析
      • 差异分析
      • 缓冲区分析
      • 最短路径分析（网络分析）

  3. Geoserver REST

    • 实现PostGIS数据源地图发布
    • 实现Shapefile数据源地图发布
    • 实现SLD样式发布
    • 实现PostGIS数据编辑
    • 实现Geoserver REST数据编辑

  4. GDAL

    • 实现读取.gdb数据
    • 实现将.gdb数据转GeoJSON数据

快速启动

1. Docker Hub拉取镜像安装

# 拉取镜像
docker pull dxnima/webgistest:v1.0
# 启动容器
docker run -p 28080:28080 -p 28081:28081 -p 28085:28085 --name webgistest -itd dxnima/webgistest:v1.0

容器启动后可以查看项目：

前端打开：http://localhost:28080

后端打开：http://localhost:28081/webgisapi/doc.html

geoserver打开：http://localhost:28085/geoserver, 用户名：admin 密码：geoserver

tips：容器中还启动了postgres数据库，可以使用-p 5432:5432将postgres数据库映射出来

2. 手动创建镜像并安装

git clone https://gitee.com/dxnima/WebGIStest.git
# git clone https://github.com/DXnima/WebGIStest.git
cd WebGIStest
# 构建镜像
docker build -f Dockerfile -t dxnima/webgistest .
# 启动容器
docker run -p 28080:28080 -p 28081:28081 -p 28085:28085 --name webgistest -itd dxnima/webgistest

项目打开方式同上

手动启动

1. 安装Postgres+PostGIS+PgRouting

Windows系统安装相关教程参考

  1. 安装Postgres + PostGIS: https://zhuanlan.zhihu.com/p/62157728

  2. 安装PgRouting: https://zhuanlan.zhihu.com/p/82408769

Linux系统安装相关教程参考

CentOS安装参考：https://blog.csdn.net/qq_40953393/article/details/116203749

  1. CentOS安装PgRouting:
# 在CentOS中
sudo yum install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-7-x86_64/pgdg-redhat-repo-latest.noarch.rpm
yum install -y postgresql12-server
sudo /usr/pgsql-12/bin/postgresql-12-setup initdb
yum install -y postgis3_12
yum install -y pgrouting_12   #12代表装的postgresql的版本
  1. Ubuntu安装PostGres+PostGIS+PgRouting:
# 在Ubuntu中
sudo echo "deb http://apt.postgresql.org/pub/repos/apt/ bionic-pgdg main" > /etc/apt/sources.list.d/pgdg.list
sudo apt-get update
sudo apt-get install -y postgresql-12-postgis-3
sudo apt-get install -y postgresql-12-pgrouting #12代表装的postgresql的版本

2. 安装Redis

Windows安装：https://www.runoob.com/redis/redis-install.html

Ubuntu中安装

sudo apt-get -y redis-server

3. 安装GDAL(版本要求3.5.2)

配置参考：

Windows安装：https://www.jianshu.com/p/c9c385395ada

Linux安装：https://www.jianshu.com/p/ff4cf2b59613

Ubuntu中安装

sudo apt-get -y build-essential libgdal-dev

Linux中手动安装

# 安装proj
wget http://download.osgeo.org/proj/proj-8.2.0.tar.gz
tar -zxvf proj-8.2.0.tar.gz
cd proj-8.2.0
./configure
make && make install

# 安装geos
wget https://download.osgeo.org/geos/geos-3.11.0.tar.bz2
tar -xjf geos-3.11.0.tar.bz2
cd geos-3.11.0
./configure
make && make install

# 安装swig的依赖pcre2
apt-get install libpcre2-dev
# 安装swig
wget http://prdownloads.sourceforge.net/swig/swig-4.1.0.tar.gz
tar -zxvf swig-4.1.0.tar.gz
cd swig-4.1.0
./configure
make && make install
swig -version

# 安装ant
wget https://archive.apache.org/dist/ant/binaries/apache-ant-1.10.12-bin.tar.gz
tar -zxvf apache-ant-1.10.12-bin.tar.gz
cd apache-ant-1.10.12
# ant需要配置环境变量
vi /etc/profile
export ANT_HOME=/usr/local/apache-ant-1.10.12
export PATH=$ANT_HOME/bin:$PATH
source /etc/profile
ant -version

# 安装gdal相关依赖
sudo apt-get install libgdal-dev
# 安装gdal
wget http://download.osgeo.org/gdal/3.5.2/gdal-3.5.2.tar.gz
tar -xf gdal-3.5.2.tar.gz
cd gdal-3.5.2
./configure
make && make install
gdalinfo --version

注意两点：

  1. Windows安装中环境变量不能漏
环境变量名 环境变量值
path C:\Program Files\GDAL|
GDAL_DATA C:\Program Files\GDAL\gdal-data
GDAL_DRIVER_PATH C:\Program Files\GDAL\gdalplugins
PROJ_LIB C:\Program Files\GDAL\projlib
  1. dll复制到bin目录

4. Postgres数据库恢复

PostGres+PostGIS+PgRouting都安装好了方可进行数据库恢复

webgistest.sql 是所有数据库导入文件

  1. 创建数据库(数据库名称：webgistest)
CREATE DATABASE webgistest;
  1. 添加空间扩展(必须执行)
CREATE EXTENSION postgis;
CREATE EXTENSION pgrouting;
  1. SQL下的sql文件导入数据库

详情说明如下：

文件名 说明 备注
capital.sql 数据表 必须导入
layer_edit.sql 图层编辑表 必须导入
layer_university.sql 高校数据表 必须导入
port.sql 数据表 必须导入
province.sql 省级行政区表 必须导入
mvt_test.sql 存储矢量瓦片表 非必须，包含部分矢量瓦片缓存
test_polygon.sql 存储矢量瓦片表 非必须，包含部分矢量瓦片缓存
mvt_function.sql 生成矢量瓦片重要函数 最后执行
shenzhen_roads.sql 路网导航数据表 必须导入
shenzhen_creat_network.sql 生成路网导航相关函数 最后执行

5. 启动Geoserver

注意：启动前需要安装jdk 1.8

  或

注意：

默认启动端口：28085
用户名：admin
密码：geoserver
启动地址：http://localhost:28085/geoserver

文件说明

├─geoserver     geoserver地图服务软件
├─server-web    后端项目
├─SQL           数据库恢复数据表
├─vue-ui        前端项目

相关技术参考

1. GIS开发实战图谱：https://blog.csdn.net/sinat_41310868/article/details/107010972

2. WebGIS文章汇总：https://zhuanlan.zhihu.com/p/67232451

3. PostGIS矢量瓦片创建

4. 其他矢量地图解决方案

5. 网路分析（路径导航）

6. GDAL读取gdb

一起交流

QQ群：515705676

WebGIStest交流

About

使用开源GIS技术的相关用例功能实现项目

dxnima.github.io/WebGIStest/vue-ui/dist

Topics

geoserver geotools webgis openlayers3 geoserverrest

Resources

Readme

License

View license
Activity

Stars

43 stars

Watchers

4 watching

Forks

13 forks
Report repository

Releases 5

v1.1 Latest
Sep 9, 2023
+ 4 releases

Packages

No packages published

Languages