轉載：https://doc.bimo.world/shpwen-jian-zai-gao-de-di-tu-zhan-shi/
前言
本文的目標是將shp空間數(shù)據(jù)展示在高德地圖上，這里面涉及了火星坐標轉換，WMS地圖圖層發(fā)布，坐標系轉換等問題。
流程圖
未命名文件.png
準備環(huán)境
- 系統(tǒng)：win10 2004
- PostgreSQL：Docker鏡像環(huán)境
包含：PostgreSQL 12.2毕箍、GEOS 3.8.0、Proj 6.3.1、PostGIS 3.0.1 - Postgis window版本：下載zip版本判耕，使用其中的數(shù)據(jù)導入功能。
- Navicat Premium 15：必須使用15以上的版本翘骂，否則無法查看數(shù)據(jù)壁熄。
- Geoserver：Docker鏡像環(huán)境
安裝PostgreSQL
docker run -d --name bimo-postgresql -p 5432:5432 -e POSTGRES_PASSWORD=postgres geographica/postgis:latest
使用Navicat連接數(shù)據(jù)庫
-
初始數(shù)據(jù)庫、用戶名碳竟、密碼都為postgres
微信截圖_20200707140908.png
準備Shp數(shù)據(jù)
-
文件組成
微信截圖_20200707140417.png -
文件信息
微信截圖_20200707140452.png
使用shp2pgsql-gui工具將Shp文件導入數(shù)據(jù)庫
-
工具位置
微信截圖_20200707141234.png -
打開工具添加文件草丧，注意文件名稱和目錄不能包含中文
微信截圖_20200707141420.png -
連接數(shù)據(jù)庫：下方出現(xiàn)Connection succeeded表示數(shù)據(jù)庫連接成功。
微信截圖_20200707141808.png
微信截圖_20200707141829.png
-
設置文件參數(shù)：SRID設置文件的值即可莹桅。點擊Options可以設置其他參數(shù)昌执。
微信截圖_20200707141530.png
微信截圖_20200707141938.png -
導入成功后可以使用Navicat查看數(shù)據(jù)是否導入成功：包含形狀字段表示導入成功。
微信截圖_20200707142113.png
坐標系轉換：WGS84——>GCJ02（火星坐標）
- 在Navicat新建查詢统翩，創(chuàng)建postgis對象
create extension postgis
- 導入坐標轉換函數(shù)：地址
新建查詢仙蚜，將geoc-pg-coordtransform.sql內容復制到查詢中，點擊回車厂汗，函數(shù)添加成功委粉。
微信截圖_20200707143125.png - 調用坐標轉換函數(shù)：新建gaode表，將原表數(shù)據(jù)和轉換后的數(shù)據(jù)存入
create table gaode as SELECT t.id, t.gridcode, geoc_wgs84togcj02(st_setsrid(geom,4326)) As geometry from yuncheng t;
發(fā)布WMS服務
- 安裝Geoserver
docker run --name "geoserver" -p 8080:8080 -d -t kartoza/geoserver
- 登錄網(wǎng)址：http://localhost:8080/geoserver娶桦，賬號/密碼：admin/geoserver
微信截圖_20200707144644.png -
建立工作區(qū)
微信截圖_20200707144956.png
微信截圖_20200707145039.png -
創(chuàng)建數(shù)據(jù)存儲
微信截圖_20200707144848.png
微信截圖_20200707144912.png
微信截圖_20200707145216.png -
創(chuàng)建圖層
微信截圖_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
