Shp文件在高德地图展示

前言

本文的目标是将shp空间数据展示在高德地图上，这里面涉及了火星坐标转换，WMS地图图层发布，坐标系转换等问题。

流程图

未命名文件.png

准备环境

• 系统：win10 2004
• PostgreSQL：Docker镜像环境
  包含：PostgreSQL 12.2、GEOS 3.8.0、Proj 6.3.1、PostGIS 3.0.1
• Postgis window版本：下载zip版本，使用其中的数据导入功能。
• Navicat Premium 15：必须使用15以上的版本，否则无法查看数据。
• Geoserver：Docker镜像环境

安装PostgreSQL

docker run -d --name bimo-postgresql -p 5432:5432 -e POSTGRES_PASSWORD=postgres  geographica/postgis:latest

使用Navicat连接数据库

• 初始数据库、用户名、密码都为postgres

  
  
  

  微信截图_20200707140908.png

准备Shp数据

• 文件组成

  
  
  

  微信截图_20200707140417.png

• 文件信息

  
  
  

  微信截图_20200707140452.png

使用shp2pgsql-gui工具将Shp文件导入数据库

• 工具位置

  
  
  

  微信截图_20200707141234.png

• 打开工具添加文件，注意文件名称和目录不能包含中文

  
  
  

  微信截图_20200707141420.png

• 连接数据库：下方出现Connection succeeded表示数据库连接成功。

  
  
  

  微信截图_20200707141808.png

微信截图_20200707141829.png

• 设置文件参数：SRID设置文件的值即可。点击Options可以设置其他参数。

  
  
  

  微信截图_20200707141530.png
  
  
  

  微信截图_20200707141938.png

• 导入成功后可以使用Navicat查看数据是否导入成功：包含形状字段表示导入成功。

  
  
  

  微信截图_20200707142113.png

坐标系转换：WGS84——>GCJ02（火星坐标）

• 在Navicat新建查询，创建postgis对象

create extension postgis

• 导入坐标转换函数：地址
  新建查询，将geoc-pg-coordtransform.sql内容复制到查询中，点击回车，函数添加成功。
  
  

  微信截图_20200707143125.png
• 调用坐标转换函数：新建gaode表，将原表数据和转换后的数据存入

create table gaode as SELECT t.id, t.gridcode, geoc_wgs84togcj02(st_setsrid(geom,4326)) As geometry from yuncheng t;

发布WMS服务

• 安装Geoserver

docker run --name "geoserver" -p 8080:8080 -d -t kartoza/geoserver

• 登录网址：http://localhost:8080/geoserver，账号/密码：admin/geoserver
  
  

  微信截图_20200707144644.png

• 建立工作区

  
  
  

  微信截图_20200707144956.png
  
  
  

  微信截图_20200707145039.png

• 创建数据存储

  
  
  

  微信截图_20200707144848.png
  
  
  

  微信截图_20200707144912.png
  
  
  

  微信截图_20200707145216.png

• 创建图层

  
  
  

  微信截图_20200707145357.png

微信截图_20200707145431.png

微信截图_20200707145526.png

在高德中引用图层

let guan = new AMap.TileLayer.WMS({
          url: 'http://39.101.136.194:1001/geoserver/bslt/wms',
          blend: false,
          tileSize: 256,
          params: {
                 tiled: true,
                 FORMAT: 'image/png',
                 VERSION: '1.3.0',
                 LAYERS: 'bslt:gaode'
                    }
                });

 map.add(guan);

最终效果

微信截图_20200707145943.png

扩展资料

• PostGIS文档
• GeoServer文档
• OGC标准规范