第二章: 地图显示
一. 地图显示
1 加载瓦片
1 裁剪瓦片
使用MapGIS桌面端软件裁剪瓦片
选择工具->瓦片裁剪
1) 配置裁剪信息
裁图策略: 选择经纬度
2) 配置图层信息
将地图左上角: 设置为原点坐标
3) 配置保存路径
这里选择路径和格式
2 发布瓦片
使用IG Server manager发布瓦片数据
通过浏览器访问localhost:9999登录后台
通过发布服务发布瓦片数据
选择对应的格式. 由于导出的瓦片格式是tdf, 选择tdf
通过路径找到要加载的tdf文件
发布成功后, 可以在列表中看到
3 集成客户端
将下载的webSDK解压到lib目录下
步骤
-
引入ol库
-
创建div容器
-
实例化Map对象
示例
4 通过map的方法操作图层
示例
2 加载地图文档
1 创建地图文档
地图文档类似一个项目, 在地图文档中可以添加多个图层(二维平面地图)和场景(三维), 以树状结构显示
1) 创建GDB数据库
创建一个新GDB数据库
成功显示日志信息
2) 创建要素类
3) 编辑图层
在地图下创建新的图层(直接将要素类拖到编辑区), 双击激活, 设置为当前编辑
4) 保存成地图文档
通过开始->另存为保存地图文档
2 发布地图文档
3 通过web访问
3 加载失量图层
加载失量图层不需要通过IGServer发布, 可以直接通过URL地址加载
通过MapGIS得到URL地址
调用接口
http://develop.smaryun.com:81/API/JS/OL5InterfaceDemo/index.htm
4 加载天地图
天地图是国家地理信息公开的地图数据, 属于第三方地图
使用openlayer的接口对接, 调用对应的接口获取数据
示例
5 加载高德地图
示例
二. 地图控件
地图控件主要包括:
-
导航(放大/缩小/复位)
-
滑动条
-
鼠标位置
-
比例尺
-
鹰眼
1 使用步骤
-
实例化控件对象
-
调用方法加载到map对象中
2 演示
三. 地图操作
1 图层的显示与隐藏
这里加载4个天地图图层. 为了提高代码的复用性
创建js/TianDiTu.js
示例
在html中加载js文件
通过天地图图层方法setVisible控制显示与隐藏
作业
-
根据图层数据, 动态加载所有图层并显示
-
勾选对应的复选框, 联动显示/隐藏图层
也可以使用高德的图层
2 视图操作
通过接口map.getView获得视图对象, 可以进一步对视图进行操作
-
放大/缩小: getZoom/setZoom
-
根据中心点显示: getCenter/setCenter
-
复位
-
显示范围显示: fit
示例
作业
-
获取
分辨率 -
获取
范围 -
获取div尺寸
如果文章对你有帮助的话，也请你帮我2个忙吧 (*╹▽╹*)
给这篇文章一键三连吧，对我很重要啦~
关注一下我 @新中地职业培训学校，听说现在关注的，以后都是尊贵的老粉啦！
获取更多GIS开发相关课程资源V：gis0329