arcgis api 3.x for js 地圖加載多個 SHP 圖層壓縮以及 json 文件展示（附源碼下載）

前言

關於本篇功能實現用到的 api 涉及類看不懂的，請參照 esri 官網的 arcgis api 3.x for js：esri 官網 api，里面詳細的介紹 arcgis api 3.x 各個類的介紹，還有就是在線例子：esri 官網在線例子，這個也是學習 arcgis api 3.x 的好素材。

內容概覽

1. 基於 arcgis api 3.x 實現地圖加載多個 SHP 圖層壓縮以及 json 文件展示
2. 源代碼 demo 下載

實現加載 SHP 圖層效果圖如下：

實現加載 json 文件數據源效果圖如下：

地圖鼠標交互信息提示效果如下，鼠標移進：

地圖鼠標交互信息提示效果如下，鼠標點擊：

源碼項目工程結構圖：

實現思路

• 地圖頁面 map.html 引用讀取壓縮 SHP 圖層的 js 插件

 

<!--shp.min.js文件-->
<script type="text/javascript" src="js/main/shp.min.js"></script>

 

• 核心功能實現 map.js

/*配置氣泡窗口模板匹配字段信息*/
function MapConfig() { };
MapConfig.fields = {
//閥門配置信息
"famen": {
//簡單信息模板
simple: [
{ field: "NAME", alias: "閥門名稱" },
{ field: "PHONE", alias: "聯系電話" }
],
//詳情信息模板
detail: [
{ field: "NAME", alias: "閥門名稱" },
{ field: "PHONE", alias: "聯系電話" },
{ field: "PERSON", alias: "負責人" },
{ field: "ROUTETIME", alias: "上次巡檢時間" },
{ field: "INSDATE", alias: "安裝日期" }
]
}
……

更多的詳情見：GIS之家小專欄

文章尾部提供源代碼下載，對本專欄感興趣的話，可以關注一波