地图要素动画应用场景:动态显示地图上的要素的属性随着时间的改变而改变,并根据其属性的变化设置其渲染.比如:某水域项目中,随着时间的变化,动态展现水域的清淤进度

本文目的:对ArcGIS JavaScript 官网示例中的代码进行分析注解.下述代码对官网示例进行了部分调整

示例网址1:

示例网址2:

示例中csv文件

以下为代码注释:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--The viewport meta tag is used to improve the presentation and
behavior of the samples on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>LLC动态图测试</title>
<link rel="stylesheet" href="http://**.**.**.**/arcgis_js_api/library/3.15/3.15/esri/css/esri.css">
<style>
html, body, #mainWindow {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
} body {
background-color: white;
overflow: hidden;
font-family: "Trebuchet MS";
} #loading {
background: #fff;
height: 100%;
overflow: hidden;
position: absolute;
width: 100%;
z-index: 100;
} #loadingMessage {
color: #000;
margin: 0 auto;
padding: 150px 0 0 0;
text-align: center;
width: 200px;
} .shadow {
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px #888;
box-shadow: 0 0 5px #888;
} #map {
background-color: white;
} #feedback {
background: #fff;
color: #000;
font-family: arial;
height: auto;
left: 30px;
margin: 5px;
padding: 10px;
position: absolute;
text-align: center;
top: 30px;
visibility: hidden;
width: 200px;
z-index: 10;
} #currentYear {
display: inline-block;
height: 25px;
text-align: center;
width: 50px;
} #play, #pause {
cursor: pointer;
display: none;
width: 50px;
} #legend {
padding: 10px 0 0 0;
} #legend table table td {
text-align: left;
} /* animate color transition when years change */
/*The LLC Guess:the CSS name seems to be useless,maybe you can edit it arbitrary*/
/*以下为地图的显示样式,相关内容查询svg,path[]中的内容,即为要素分类的类别*/
#counties_layer path {
transition: fill 1.15s, fill-opacity 1.15s, stroke 1.15s, stroke-opacity 1.15s;
-webkit-transition: fill 1.15s, fill-opacity 1.15s, stroke 1.15s, stroke-opacity 1.15s;
} #counties_layer path[data-relgrowth="no-data"] {
stroke: rgb(255, 255, 255);
stroke-width: 1pt;
stroke-opacity: 1;
} #counties_layer path[data-relgrowth="zero-or-less"] {
fill: rgb(175, 141, 195); /* purple */
fill-opacity: 1;
stroke: rgb(175, 141, 195);
stroke-width: 1pt;
stroke-opacity: 1;
} #counties_layer path[data-relgrowth="lt-US"] {
fill: rgb(225, 236, 231); /* light */
fill-opacity: 1;
stroke: rgb(225, 236, 231);
stroke-width: 1pt;
stroke-opacity: 1;
} #counties_layer path[data-relgrowth="gt-US"] {
fill: rgb(127, 191, 123); /* green */
fill-opacity: 1;
stroke: rgb(127, 191, 123);
stroke-width: 1pt;
stroke-opacity: 1;
} #counties_layer path[data-relgrowth="llcStyle"] {
fill: rgb(0, 0, 0); /* green */
fill-opacity: 1;
stroke: rgb(127, 191, 123);
stroke-width: 1pt;
stroke-opacity: 1;
} #counties_layer path[data-relgrowth="1"] {
fill: rgb(0, 0, 0); /* green */
fill-opacity: 1;
stroke: rgb(127, 191, 123);
stroke-width: 1pt;
stroke-opacity: 1;
} #counties_layer path[data-relgrowth="2"] {
fill: rgb(255, 0, 0); /* green */
fill-opacity: 1;
stroke: rgb(127, 191, 123);
stroke-width: 1pt;
stroke-opacity: 1;
} #counties_layer path[data-relgrowth="3"] {
fill: rgb(0, 255, 0); /* green */
fill-opacity: 1;
stroke: rgb(127, 191, 123);
stroke-width: 1pt;
stroke-opacity: 1;
} #counties_layer path[data-relgrowth="4"] {
fill: rgb(0, 0, 255); /* green */
fill-opacity: 1;
stroke: rgb(127, 191, 123);
stroke-width: 1pt;
stroke-opacity: 1;
} #counties_layer path[data-relgrowth="5"] {
fill: rgb(255, 255, 0); /* green */
fill-opacity: 1;
stroke: rgb(127, 191, 123);
stroke-width: 1pt;
stroke-opacity: 1;
} #counties_layer path[data-relgrowth="6"] {
fill: rgb(0, 255, 255); /* green */
fill-opacity: 1;
stroke: rgb(127, 191, 123);
stroke-width: 1pt;
stroke-opacity: 1;
}
</style> <script type="text/javascript" src="http://**.**.**.**/arcgis_js_api/library/3.15/3.15/init.js"></script>
<script>
require([
"esri/map",
"esri/layers/FeatureLayer",
"esri/dijit/Legend",
"esri/InfoTemplate", "esri/renderers/ClassBreaksRenderer",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol", "dojo/_base/array",
"esri/Color",
"dojo/_base/fx",
"dojo/_base/lang",
"dojo/Deferred", "dojo/dom",
"dojo/dom-construct",
"dojo/dom-style",
"dojo/number",
"dojo/on",
"dojo/parser",
"dojo/string", "dojox/data/CsvStore",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function (Map, FeatureLayer, Legend, InfoTemplate,
ClassBreaksRenderer, SimpleFillSymbol, SimpleLineSymbol,
arrayUtils, Color, fx, lang, Deferred,
dom, domConstruct, domStyle, number, on, parser, string,
CsvStore) {
parser.parse();
var map, layer, currentYear = 1971, currentUSPgr, timer; map = new Map("map", {
basemap: "gray",
center: [120.2, 30.542],
zoom: 11,
slider: false
});
map.on("load", function () {
//加载csv数据.csv中为美国人口数据表,之后通过fip与矢量数据进行关联
loadCSV().then(function (csvData) {
//神奇的JavaScript this. 绑定setYear的上下文对象为csvData,所以,在函数中,this就是csvData
setYear = lang.hitch(csvData, setYear);
//年份设置为1971年
setYear(1971);
//添加图层(该方法大体上相当于将featureLayer与csv中的表进行了连接处理)
layer = addCounties(csvData);
});
}); // set up play/pause buttons
//播放/暂停按钮事件绑定
on(dom.byId("pause"), "click", function () {
domStyle.set(this, "display", "none");
domStyle.set("play", "display", "inline-block");
pause();
});
on(dom.byId("play"), "click", function () {
domStyle.set(this, "display", "none");
domStyle.set("pause", "display", "inline-block");
play();
}); function addCounties(csvData) {
var content = "<b>河流名称</b>: ${河流名称} \
<br><b>清淤量</b>: ${清淤量} \
<br><b>FKRATE</b>: ${rate} "; // \
// <br><National Average: ${NATLAVG}";
var infoTemplate = new InfoTemplate("${河流名称} FK河段", content);
//FeatureLayer URL
var url = "http://**.**.**.**/arcgis/rest/services/DQ/DQDestilingTemp/MapServer/6";
var counties = new FeatureLayer(url,
{
id: "counties",
infoTemplate: infoTemplate,
outFields: ["河流名称", "FID", "SILTVOLUME"],
styling: false
}); counties.on("load", function () {
on.once(counties, "update-end", function () {
//设置地图渲染器,此渲染器不用于地图渲染,只用于生成图例,所以"FID"字段只是写着玩玩
var renderer = createRenderer(currentYear, "FID", csvData);
counties.setRenderer(renderer);
createLegend(counties);
domStyle.set("pause", "display", "inline-block");
//开始动画
play();
});
fadeOutLoading();
}); if (counties.surfaceType === "svg") {
counties.on("graphic-draw", function (evt) {
//下述代码进行要素与csv表的关联操作
var attrs = evt.graphic.attributes;
var joinKey = attrs && attrs.FID; //关联用的字段,先用FID表示了
var relgrowth = "no-data"; if (joinKey && csvData[joinKey] && csvData[joinKey][currentYear]) {
//根据csv表中的数据,获取相应年份的人口数据,计算人口增长率
var countyPgr = getGrowthRate(csvData[joinKey][currentYear - 1], csvData[joinKey][currentYear], 1);
//console.log(countyPgr);
//根据增长率的不同,进行分类渲染
if (countyPgr <= 0.5 && countyPgr > 0)
relgrowth = "1";
else if (countyPgr > 0.5 && countyPgr <= 1)
relgrowth = "2";
else if (countyPgr > 1 && countyPgr <= 1.25)
relgrowth = "3";
else if (countyPgr > 1.25 && countyPgr <= 1.5)
relgrowth = "4";
else if (countyPgr > -5 && countyPgr <= -0.5)
relgrowth = "5";
else
relgrowth = "6";
}
var qyl;
if (joinKey != undefined && csvData[joinKey] != undefined && csvData[joinKey][currentYear] != undefined)
qyl = csvData[joinKey][currentYear];
//此处可以将某年某月的数据关联到图层的属性中
attrs.清淤量 = qyl;
attrs.rate = countyPgr;
//此处是配色的关键字段!此处内容与上面配置的样式表相对应
evt.graphic.getNode().setAttribute("data-relgrowth", relgrowth);
});
} map.addLayer(counties);
return counties;
} function loadCSV() {
//加载csv中的数据.可以略过,处理结果就是将csv中的表加载到了csvData中,其他函数可以根据FID,时间获取某年月的数据
var dfd = new Deferred(); var csvStore = new CsvStore({
url: "DesiltingTemp.csv"
}); csvStore.fetch({
onComplete: function (items, request) { //process csv data and create in memory object store.
var store = request.store;
var minYearPopulation = 1970;
var maxYearPopulation = 2006;
var counties = {}; counties.minVal = Infinity;
counties.maxVal = -Infinity; arrayUtils.forEach(items, function (item) {
//var countyFips = store.getValue(item, "county_fips");
//var stateFips = store.getValue(item, "state_fips");
//var fips = string.pad(stateFips, 2, "0") + string.pad(countyFips, 3, "0");
var fips = store.getValue(item, "FID");
var population = {}; population.maxVal = -Infinity; for (var year = minYearPopulation; year <= maxYearPopulation; year++) {
var fieldName = "pop" + year;
var popValue = parseInt(store.getValue(item, fieldName), 10);
population[year] = popValue;
population.maxVal = (popValue > population.maxVal) ? popValue : population.maxVal;
counties.minVal = (popValue < counties.minVal) ? popValue : counties.minVal;
counties.maxVal = (popValue > counties.maxVal) ? popValue : counties.maxVal;
} counties[fips] = population;
});
dfd.resolve(counties);
},
onError: function (err) {
console.log("Error loading CSV: ", err.message, err);
}
});
return dfd;
} function getGrowthRate(pt1, pt2, t2_t1) {
return ((Math.log(pt2) - Math.log(pt1)) / (t2_t1)) * 100;
} function setYear(year) {
//设置当前年份
//由于函数调用时有如下代码setYear = lang.hitch(csvData, setYear); so this就是csvData
var csvData = this;
currentYear = year;
currentUSPgr = getGrowthRate(csvData["0"][currentYear - 1], csvData["0"][currentYear], 1);
dom.byId("currentYear").innerHTML = currentYear; if (layer) {
layer.renderer._currentYear = year;
//添加renderer分类对象,对分类渲染来说没有实际意义
addBreaks(layer.renderer);
//重绘.根据官网资料,该方法不通过服务器重绘
layer.redraw();
//恢复之前的地图弹窗
var sel = map.infoWindow.getSelectedFeature();
if (sel && map.infoWindow.isShowing) {
map.infoWindow.setFeatures([sel]);
}
}
} function changeYear(incr) {
//更改地图的当前年份
var year;
if (incr < 1) {
year = (currentYear === 1971) ? 2006 : currentYear + incr;
setYear(year);
}
else if (incr > 0) {
year = (currentYear === 2006) ? 1971 : currentYear + incr;
setYear(year);
}
} function play() {
//动画播放
if (!timer) {
timer = setInterval(function () {
changeYear(1);
}, 1250);
}
} function pause() {
clearInterval(timer);
timer = null;
} function createRenderer(startYear, joinField, data) {
// renderer is used for the legend
//The LLC Says:This Method is only used for the legend,actually,the breaks info of the renderer is not used for the layer to display.
//so the attibuteField of the ClassBreaksRenderer is meaningless
//var tColor=[0,0,0];
//该Renderer只用来生成图例,不用以分类渲染
var renderer = new ClassBreaksRenderer(null, "FID");
renderer._currentYear = startYear;
renderer._data = data;
addBreaks(renderer);
// console.log("renderer with breaks", renderer);
return renderer;
} function createLegend(layer) {
//创建图例
var legendDijit = new Legend({
map: map,
layerInfos: [
{
"layer": layer,
"title": "Population Change"
}
]
}, "legend");
legendDijit.startup();
domStyle.set("feedback", "visibility", "visible");
} function addBreaks(renderer) {
// console.log("addBreaks", renderer);
var currentYear = renderer._currentYear,
data = renderer._data,
totalGrowth = getGrowthRate(data['0'][currentYear], data['0'][currentYear - 1], 1),
roundedTotalGrowth = number.round(totalGrowth, 2); renderer.clearBreaks(); var negative = [175, 141, 195];
var flat = [20, 236, 231];
var positive = [127, 191, 123]; renderer.addBreak({
minValue: -Infinity,
maxValue: 0,
symbol: new SimpleFillSymbol().setColor(new Color(negative))
.setOutline(new SimpleLineSymbol().setColor(new Color(negative))),
label: "Decrease"
}); renderer.addBreak({
minValue: 0,
maxValue: roundedTotalGrowth,
symbol: new SimpleFillSymbol().setColor(new Color(flat))
.setOutline(new SimpleLineSymbol().setColor(new Color(flat))),
label: "Flat"
}); renderer.addBreak({
minValue: roundedTotalGrowth,
maxValue: Infinity,
symbol: new SimpleFillSymbol().setColor(new Color(positive))
.setOutline(new SimpleLineSymbol().setColor(new Color(positive))),
label: "Increase"
});
} function fadeOutLoading() {
var fade = fx.fadeOut({
node: "loading",
onEnd: function () {
domConstruct.destroy(dom.byId("loading"));
}
});
fade.play();
}
});
</script>
</head> <body>
<div id="loading">
<div id="loadingMessage">
正在加载清淤量数据
<br>
<img src="assets/loading_gray_circle.gif">
</div>
</div>
<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="'design': 'headline', 'gutters': false">
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="'region': 'center'">
<div id="feedback" class="shadow">
Year:
<span id="currentYear">
<img src="assets/loading_gray_circle.gif">
</span>
|
<!--div id="play">></div-->
<span id="play">Play</span>
<!--div id="pause">||</div-->
<span id="pause">Pause</span>
<div id="legend"></div>
</div> </div> <!-- end map div -->
</div> <!-- end border container div -->
</body>
</html>

FK JavaScript之:ArcGIS JavaScript API之地图动画的更多相关文章

  1. FK JavaScript之:ArcGIS JavaScript添加Graphic,地图界面却不显示

    使用ArcGIS JavaScript,往地图中添加几个Graphic,基本是与官网示例代码一致.绘制的图形一闪而过之后,就没了 核心代码如下: iniToolBar: function () { t ...

  2. 诅咒JavaScript之----ArcGIS JavaScript 点聚合 ClusterLayer

    对一个之前一直做winForm的 菜鸟来说,突然接触这么神奇的语言,基本上每天都会诅咒一下这门神奇的语言. 最近做了一个小网站,底图用的是天地图的服务,用ArcGIS JavaScript提供的一些G ...

  3. Arcgis Android API开发之离线地图

    最近一直在倒腾Arcgis Android API等相关的东西,想把自己的做的图放到地图上去,也就是离线地图,穷人一般是没有钱的,一个月好几十的流量是开不起的,所以就左捉摸,右思考,看着API里面有离 ...

  4. ArcGIS Javascript API 加载高德在线地图扩展

    利用ArcGIS JavaScript API加载高德在线地图的扩展 /** * Created by WanderGIS on 2015/7/15. */ define(["dojo/_b ...

  5. 使用ArcGIS JavaScript API 3.18 加载天地图

    对于中国开发者在创建GIS应用的时候,往往比较头疼的是底图资源的缺乏.其实国家测绘地信局就提供一个很好的免费资源:天地图.使用ArcGIS API的开发人员可以直接利用该资源作为地图应用的底图. Ar ...

  6. 如何正确响应ArcGIS JavaScript API中图形的鼠标事件

    在使用ArcGIS JavaScript API编写程序的时候,程序员往往需要完成这样一个功能:点击地图上的图形,自动进行专题GIS数据查询,当在地图非图形区域上点击时,自动进行底图兴趣点查询. 由于 ...

  7. ArcGIS JavaScript API本地部署离线开发环境[转]

    原文地址:http://www.cnblogs.com/brawei/archive/2012/12/28/2837660.html 1 获取ArcGIS JavaScript API API的下载地 ...

  8. Ionic集成ArcGIS JavaScript API.md

    1. Ionic同原生ArcGIS JavaScript API结合 1.1. 安装esri-loader 在工程目录下命令行安装: npm install angular2-esri-loader ...

  9. ArcGIS JavaScript API 4.x中热度图渲染的使用注意事项

    要使用ArcGIS JavaScript API 4.x的热度图渲染器来渲染要素图层,需要注意几点前提条件: 1.需要使用ArcGIS Server 10.6.1或更高版本发布GIS服务. 2.只支持 ...

随机推荐

  1. scp命令详解

    \ svn 删除所有的 .svn文件 find . -name .svn -type d -exec rm -fr {} \; linux之cp/scp命令+scp命令详解   名称:cp 使用权限: ...

  2. CSS-dl+dt+dd的应用(非常实用)

    http://smallpig301.blog.163.com/blog/static/9986093201010262499229/

  3. Tortoise SVN 版本控制常用操作汇总(show log)

    1.如何查看SVN上当前代码库的最新版本号是多少? 打开右键菜单中的 show log,然后看到一系列版本更新历史,最上面的那一行,即是最新版本号,所谓的 head revision. 2.如何查看本 ...

  4. Ubuntu GNOME 16.10 Beta 1问世了!

    导读 Ubuntu GNOME 16.10操作系统已经进入研发周期一段时间了,今天终于可以下载Beta 1版本进行测试了.作为Ubuntu官方flavor之一,Ubuntu GNOME团队非常努力的整 ...

  5. hadoop 2.6 centos 7.1 下的一些操作

    开启hdfs: start-dfs.sh 开启yarn: start-yarn.sh 查看hdfs:http://ip:50070/ 查看RM:http://ip:8088/

  6. Git命令回顾

    团队从Eclipse迁移到Android Studio之后,也从SVN迁移到Git了. 一直忙于需求迭代无暇做迁移,现在才开始做,相见恨晚,好东西,高大上,词穷. 回顾和记录一下git的一些基本操作. ...

  7. 刷了MIUI的手机在OSX下连接USB调试的方法

    OSX下默认连接不上小米手机或者刷了MIUI的手机. 办法是: 1, 关于本机->系统报告->USB,在其中找到手机设备,然后查看其厂商ID,复制. 2,控制台执行下面这个命令,把其中的0 ...

  8. Frame创建窗体实例

    public class Test { public static void main(String[] args) { // TODO Auto-generated method stub Fram ...

  9. nginx配置文件或目录404和403

    对于Nginx web目录下的文件,如果不想用户访问那么可以配置返回404或者403状态,默认情况下对于目录来说,如果目录下没有默认文档,那么默认返回是403,也就是不允许查看目录列表,但是如果知道静 ...

  10. Git教程推荐

    推荐:廖雪峰的官方网站-Git教程,面向初学者,浅显易懂.