【干货】新中地GIS开发夏令营文档（5）webGIS开发概述

2022-08-05 16:44 作者:新中地职业培训学校 0人读过 | 我要投稿

第一章: webGIS开发概述

一. 开发概述

1 核心概念

在GIS开发中, 最核心的概念有两个

●地图
●数据

数据中包括一些基本的要素(Feature)

●点
●线
●面(区)
●体

一句话总结

GIS开发, 就是在地图上某一个坐标点上显示对应的要素

2 整体流程

首先要加载地图做为底图, 底图比较常见的有瓦片, 地图文档 , 天地图

因此, 开发的第一步是能够通过web加载底图

不同的要素需要不同的图层承载, 而图层是附着在底图上, 和底图配合.

因此, 开发的第二步是图层操作

在每个图层上有不同的要素, 在图层的基础上进一步对要素进行操作

因此, 开发的第三步是要素操作

总结

1加载底图
2图层操作
3要素操作

二. 产品介绍

1 产品体系

2 开发流程

对于webGIS的二次开发, 主要是分为三步

1)数据处理

在MapGIS客户端进行数据处理

●瓦片裁剪
●生成失量地图
●生成地图文档
●添加各种要素, 编辑要素的属性

2)数据发布

通过server manger将数据上传到IG Server

●发布瓦片
●发布失量地图
●发布地图文档

3)数据显示

在web端, 通过JavaScript SDK调用接口对接IG Server, 进行地图和数据的可视化操作

架构分析

流程分析

3 Javascript SDK

可以理解为GIS Server的web客户端

原生的web客户端有4个著名的开源库, 其中广泛使用的主要是下面两个

●Cesuim: 主要处理3D渲染
●OpenLayers: 主要处理2D渲染

1) 什么是SDK

4种不同的开源框架有各自独立的API, 为了统一, 中地数码上开源框架基础上进行再次封装, 提供更方便好用的接口, 简化开发

2) 学什么

在我们本次培训中, 主要以OpenLayer为例给大家讲解

3) 具体内容

1地图服务
○加载各种地图(瓦片, 失量地图, 地图文档, 第三方地图[天地图]...)
○地图常用控件(放大, 缩小, 比例尺, 鹰眼...)
2目录服务
○图层与目录树(控制图层的显示与隐藏)
3要素服务
○各种要素(点, 线, 面)的操作
4分析服务
○空间分析, 拓扑分析...

三. 环境准备
1 安装配置IGServer
一、登录官网
http://www.smaryun.com/

1、完成注册和登录
2、在个人中心完成邮箱和手机号的验证

二、下载IG Server
http://www.smaryun.com/dev/download_detail.html#/download689
下载MapGIS IGServer开发包, 并安装

三、升级成开发者
http://www.smaryun.com/dev/

四. 安装IGServer
下载MapGIS IGServer开发包, 并安装

右键, 使用管理员运行

如果被阻止, 展开, 选择"仍要运行"

注意
1关闭所有的杀毒软件(360, qq管家)
2windows自带的保护程序, 点击仍要运行

选择"下一步"会提示安装缺少组件

选择路径(安装路径不要改变)

五、获取授权

授权码: http://www.smaryun.com/dev/dev_auth_detail.php
下载授权文件(这里我申请了高级授权, 基础开发授权也可以使用)

扫描下面这个二维码

安装key写入注册表

启动MapGIS IGServer服务

可以通过localhost:9999访问服务

点击帮助, 自动填入用户名/密码, 登录

可以通过web访问server manager页面

http://localhost:9999

六、解绑
http://www.smaryun.com/dev-space/#/dev-enviro/myauth

2 申请天地图Key

https://jingyan.baidu.com/article/9c69d48f6d1ab753c9024ecf.html

1 注册天地图用户
2 在天地图网站主页登录之后，点击右上角自己的用户名，然后点击右上角的开发资源按钮，如下图所示：

3 在开发资源页面，点击“控制台”，如下图所示：

4 点击“申请成为个人开发者”界面中的“去申请”，如下图所示：

5 勾选“同意天地图服务条款”，点击提交按钮，如下图所示：

6 出现申请成功提示对话框后，单击确定按钮，如下图所示：

7 点击“创建新应用”按钮，如下图所示：

8 填写相关信息，勾选“同意天地图服务条款”，点击提交按钮，如下图所示：

9 出现“创建应用成功”对话框后，单击确定按钮，如下图所示：

10 在应用管理列表中，红框部分的字符串即是之后需要使用的Key，如下图所示：

我这里申请的Key是: 11dce887d8c343629fe8efcf0c60caec

3 下载web SDK

http://develop.smaryun.com:8899/#/total/download

下载精简包

四. 主要参考文档

Openlayers示例: http://develop.smaryun.com:81/API/JS/OL5InterfaceDemo/index.htm

IGServer API文档: http://develop.smaryun.com:81/API/JS/IGS JavaScript API v02/index.htm

Openlayers文档: https://openlayers.org/en/latest/apidoc/