前言
关于本篇功能实现用到的 api 涉及类看不懂的，请参照 esri 官网的 arcgis api 3.x for js：esri 官网 api，里面详细的介绍 arcgis api 3.x 各个类的介绍，还有就是在线例子：esri 官网在线例子，这个也是学习 arcgis api 3.x 的好素材。
内容概览
- 基于 arcgis api 3.x 实现地图加载多个 SHP 图层压缩以及 json 文件展示
- 源代码 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之家小专栏
文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波