前言
关于本篇功能实现用到的 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之家小专栏
文章尾部提供源代码下载,对本专栏感兴趣的话,可以关注一波