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

104 阅读 0 评论 69 点赞

我是靠谱客的博主谨慎咖啡，最近开发中收集的这篇文章主要介绍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 的好素材。

内容概览

基于 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: "安装日期" }
]
}
……