【干貨】新中地GIS開發(fā)夏令營文檔（6）地圖顯示
第二章: 地圖顯示
一. 地圖顯示
1 加載瓦片
1 裁剪瓦片
使用MapGIS桌面端軟件裁剪瓦片
選擇工具->瓦片裁剪
1) 配置裁剪信息
裁圖策略: 選擇經(jīng)緯度
2) 配置圖層信息
將地圖左上角: 設(shè)置為原點坐標
3) 配置保存路徑
這里選擇路徑和格式
2 發(fā)布瓦片
使用IG Server manager發(fā)布瓦片數(shù)據(jù)
通過瀏覽器訪問localhost:9999登錄后臺
通過發(fā)布服務(wù)發(fā)布瓦片數(shù)據(jù)
選擇對應(yīng)的格式. 由于導(dǎo)出的瓦片格式是tdf, 選擇tdf
通過路徑找到要加載的tdf文件
發(fā)布成功后, 可以在列表中看到
3 集成客戶端
將下載的webSDK解壓到lib目錄下
步驟
引入ol庫
創(chuàng)建div容器
實例化Map對象
示例
4 通過map的方法操作圖層
示例
2 加載地圖文檔
1 創(chuàng)建地圖文檔
地圖文檔類似一個項目, 在地圖文檔中可以添加多個圖層(二維平面地圖)和場景(三維), 以樹狀結(jié)構(gòu)顯示
1) 創(chuàng)建GDB數(shù)據(jù)庫
創(chuàng)建一個新GDB數(shù)據(jù)庫
成功顯示日志信息
2) 創(chuàng)建要素類
3) 編輯圖層
在地圖下創(chuàng)建新的圖層(直接將要素類拖到編輯區(qū)), 雙擊激活, 設(shè)置為當前編輯
4) 保存成地圖文檔
通過開始->另存為保存地圖文檔
2 發(fā)布地圖文檔
3 通過web訪問
3 加載失量圖層
加載失量圖層不需要通過IGServer發(fā)布, 可以直接通過URL地址加載
通過MapGIS得到URL地址
調(diào)用接口
http://develop.smaryun.com:81/API/JS/OL5InterfaceDemo/index.htm
4 加載天地圖
天地圖是國家地理信息公開的地圖數(shù)據(jù), 屬于第三方地圖
使用openlayer的接口對接, 調(diào)用對應(yīng)的接口獲取數(shù)據(jù)
示例
5 加載高德地圖
示例
二. 地圖控件
地圖控件主要包括:
導(dǎo)航(放大/縮小/復(fù)位)
滑動條
鼠標位置
比例尺
鷹眼
1 使用步驟
實例化控件對象
調(diào)用方法加載到map對象中
2 演示
三. 地圖操作
1 圖層的顯示與隱藏
這里加載4個天地圖圖層. 為了提高代碼的復(fù)用性
創(chuàng)建js/TianDiTu.js
示例
在html中加載js文件
通過天地圖圖層方法setVisible控制顯示與隱藏
作業(yè)
根據(jù)圖層數(shù)據(jù), 動態(tài)加載所有圖層并顯示
勾選對應(yīng)的復(fù)選框, 聯(lián)動顯示/隱藏圖層
也可以使用高德的圖層
2 視圖操作
通過接口map.getView獲得視圖對象, 可以進一步對視圖進行操作
放大/縮小: getZoom/setZoom
根據(jù)中心點顯示: getCenter/setCenter
復(fù)位
顯示范圍顯示: fit
示例
作業(yè)
獲取
分辨率獲取
范圍獲取div尺寸
如果文章對你有幫助的話，也請你幫我2個忙吧 (*?▽?*)
給這篇文章一鍵三連吧，對我很重要啦~
關(guān)注一下我 @新中地職業(yè)培訓(xùn)學(xué)校，聽說現(xiàn)在關(guān)注的，以后都是尊貴的老粉啦！
獲取更多GIS開發(fā)相關(guān)課程資源V：gis2210
