小白一星期搞定GIS Demo(下)（gis小程序）

一、 GIS Demo

上面了解了GIS的方方面面，下面就进入GIS Demo的开发过程。

根据技术栈所述，我选择了arcGis作图，geoserver+openlayers+postGIS这种技术栈。

总体技术架构：（借用arcgis体系架构，我认为这张图最有代表性，Web Server由我们后台服务器代替，GIS server由geoserver代替，Data由PostGIS代替，作图可以使用arcMap 或 qGIS ）

（1） 工具安装

a. arcGIS安装：安装版本10.2，建议安装最新版本，老版本某些时段操作反应慢。

b. geoserver:官网下载最新版本。

http://localhost:8080/geoserver

admin/geoserver

c. postGIS：需先安装pregresql，然后再安装postGIS扩展。

d. openlayers:前提条件node。

具体安装过程略，请自行搜索。

（2） 地图的下载

可通过多种方式进行下载，本文是通过osm的方式进行南京部分地图的下载。下载文件可通过acrMap插件转化为shape文件。也在通过在线地址进行转化，在线地址转化细节有丢失。

（3） gisMap制图

可导入shape文件，并进行图形的编辑，由于点、线、面编辑后坐标问题（导入geoserver无法解析，先放下这个），gisMap制图所需的专业知识还是需学习的。下面放一张图：

（4） geoserver发布

shape文件可直接导入geoserver，也可导入postGIS，再通过postGIS导入到geoserver中。

Geoserver的操作流程：工作空间----存储仓库----图层----图层组----图层预览。

图层组的界面为：

图层预览（失真了）：

（5） openlayers显示

OpenLayers是一个开源的Web GIS引擎，使用了JavaScript、最新的HTML5技术及CSS技术，支持dom，canvas和webgl三种渲染方式。在地图数据源方面，支持各种类型的瓦片地图，既支持在线的，也支持离线的。比如OSM, Bing, MapBox, Stamen等等；还支持各种矢量地图，比如GeoJSON，TopoJSON，KML，GML等等。

代码为：

import './style.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import TileWMS from 'ol/source/TileWMS';

const map = new Map({
target: 'map',
layers: [
// new TileLayer({
// source: new OSM()
// }),
new TileLayer({
source: new TileWMS({
//不能设置为0，否则地图不展示。
ratio: 1,
url: "http://localhost:8088/geoserver/hxh/wms",
params: {
LAYERS: "hxh:nanjing",
STYLES: "",
VERSION: "1.1.1",
FORMAT: "image/png",

exceptions: "application/vnd.ogc.se_inimage"
},
serverType: "geoserver",
}),
}),
],
view: new View({
center: [118.74538, 31.97193],
projection: 'EPSG:4326',
zoom: 12
})
});

界面显示：

以上只是demo，只供参考，放一张GIS应用架构图。

后记：由于时间关系，很遗憾本篇没有实现管网的自定义显示，有点文不对题了，另外实现的demo太丑了，后面再优化。