arcgis api 3.x for js 地图加载多个 SHP 图层压缩以及 json 文件展示（附源码下载）

佚名 7年前 (2019-04-10) 随笔 1416人围观抢沙发百度已收录

前言

关于本篇功能实现用到的 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 图层效果图如下：

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

实现加载 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: "安装日期" }
]
}
……