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 图层效果图如下:
arcgis api 3.x for js 地图加载多个 SHP 图层压缩以及 json 文件展示(附源码下载)

实现加载 json 文件数据源效果图如下:
arcgis api 3.x for js 地图加载多个 SHP 图层压缩以及 json 文件展示(附源码下载)

地图鼠标交互信息提示效果如下,鼠标移进:
arcgis api 3.x for js 地图加载多个 SHP 图层压缩以及 json 文件展示(附源码下载)
地图鼠标交互信息提示效果如下,鼠标点击:
arcgis api 3.x for js 地图加载多个 SHP 图层压缩以及 json 文件展示(附源码下载)

源码项目工程结构图:
arcgis api 3.x for js 地图加载多个 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之家小专栏

文章尾部提供源代码下载,对本专栏感兴趣的话,可以关注一波

上一篇:arcgis api 3.x for js 解决 textSymbol 文本换行显示(附源码下载)


下一篇:关于HTML相关知识随记