ArcGis API for JavaScript——时间轴
ArcGis API for JS提供了添加时间轴的API：TimeSlider。TimeSlider控件可以用来展示包含时间属性的地图图层。 官方API：https://developers.arcgis.com/javascript/3/jsapi/timeslider-amd.html 一、 准备数据 带有时间属性的待发布的数据，有3个地点，X、Y分别是地点的纬度和经度，DAY为时间，从2017/1/1到2017/1/30日一个月。后面的NUM字段为随机数，在显示时将根据NUM进行渲染成不同颜色。 二、 发布服务 将数据导入ArcGIS中 在图层属性的时间选项里选择在此图层中启动时间 将数据发布为服务 注：若发布的服务时间不是预设的时间间隔，可能是用Excel存数据时时间一列没有设置为日期格式。 三、 添加TimeSlider控件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>NewTimeSlider</title> <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.18/3.18/dijit/themes/claro/claro.css"/> <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.18/3.18/esri/css/esri.css" /> <script src="http://localhost/arcgis_js_api/library/3.18/3.18/init.js" djConfig="parseOnLoad:true"></script> <link rel="stylesheet" type="text/css" href="mystyle.css"> <style> html,body,#mapDiv{ padding:0; margin: 0; height: 100%; } #bottomPanel { left: 50%; margin: 0 auto; margin-left: -500px; position: absolute; bottom: 20px; font-family: arial; color: #444; }#timeInfo{ border-radius: 5px; border: 1px solid #57585A; background-color: #fff; display: block; padding: 10px; position: relative; text-align: center; width: 900px; z-index: 99; } #labelText{ color:black; font-size:12pt; font-family:"Tahoma"; margin:5px; } </style> <script> var name; var redSymbol,yellowSymbol,orangeSymbol,blueSymbol,greenSymbol; require(["esri/map", "dojox/charting/Chart2D", "esri/layers/FeatureLayer", "esri/layers/ArcGISDynamicMapServiceLayer", "dojo/_base/connect", "esri/dijit/TimeSlider", "dojo/dom", "esri/TimeExtent","dojo/_base/array", "esri/graphic","esri/layers/GraphicsLayer","esri/geometry/Point", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/renderers/ClassBreaksRenderer", "esri/renderers/UniqueValueRenderer", "dojo/_base/Color", "esri/symbols/Font", "esri/symbols/TextSymbol", "esri/InfoTemplate", "esri/geometry/Point", "esri/layers/LabelClass", "dojo/domReady!"], function(Map,Chart2D,FeatureLayer,ArcGISDynamicMapServiceLayer,connect,TimeSlider,dom, TimeExtent,arrayUtils,Graphic,GraphicsLayer,Point,SimpleMarkerSymbol, SimpleLineSymbol,SimpleFillSymbol,ClassBreaksRenderer,UniqueValueRenderer,Color,Font,TextSymbol,InfoTemplate,Point,LabelClass){ var map = new Map("mapDiv",{ basemap: "streets", center:[110.3224, 31.09502], zoom: 12, showLabels : true }); map.on("load",mapLoaded); redSymbol=new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,15, new SimpleLineSymbol(SimpleLineSymbol.STYLE_CIRCLE, new Color([255, 0, 0]), 0), new Color([255, 0, 0])); yellowSymbol=new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,15, new SimpleLineSymbol(SimpleLineSymbol.STYLE_CIRCLE, new Color([255, 255, 0]), 0), new Color([255, 255, 0])); orangeSymbol=new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,15, new SimpleLineSymbol(SimpleLineSymbol.STYLE_CIRCLE, new Color([255, 128, 10]), 0), new Color([255, 128, 10])); blueSymbol=new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,15, new SimpleLineSymbol(SimpleLineSymbol.STYLE_CIRCLE, new Color([0, 0, 255]), 0), new Color([0, 0, 255])); greenSymbol=new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,15, new SimpleLineSymbol(SimpleLineSymbol.STYLE_CIRCLE, new Color([0, 255, 0]), 0), new Color([0, 255, 0])); function mapLoaded() { var featureLayer = new FeatureLayer("http://localhost:6080/arcgis/rest/services/TestService/MapServer/0", { // mode: FeatureLayer.MODE_SNAPSHOT, outFields: ["*"] }); featureLayer.setDefinitionExpression("NUM>=0"); featureLayer.on("load", featureLayerLoaded); //颜色渲染 var renderer = new ClassBreaksRenderer(new SimpleMarkerSymbol(), "NUM"); renderer.addBreak(0,10,blueSymbol); renderer.addBreak(10,20,orangeSymbol); renderer.addBreak(20,30,yellowSymbol); renderer.addBreak(30,40,redSymbol); featureLayer.setRenderer(renderer); //地名标注 var labelSymbol = new TextSymbol().setColor(new Color("#000000")); labelSymbol.font.setSize("15pt"); labelSymbol.font.setFamily("微软雅黑"); var json = { "labelExpressionInfo": {"value": "{NAME}"}, "useCodedValues": false, "labelPlacement":"center-right" }; var labelClass = new LabelClass(json); labelClass.symbol = labelSymbol; featureLayer.setLabelingInfo([ labelClass ]); map.addLayer(featureLayer); } //加载时间轴 function featureLayerLoaded() { var timeSlider = new TimeSlider({ style: "width: 100%;" }, dom.byId("timeSliderDiv")); map.setTimeSlider(timeSlider); var timeExtent = new TimeExtent(); timeExtent.startTime = new Date("2017/1/1 UTC"); timeExtent.endTime = new Date("2017/1/31 UTC"); timeSlider.setThumbCount(1); timeSlider.createTimeStopsByTimeInterval(timeExtent, 1 , "esriTimeUnitsDays"); timeSlider.on("time-extent-change", displayTimeInfo); timeSlider.startup(); // 自动播放 timeSlider.play(); var labels = arrayUtils.map(timeSlider .timeStops, function(timeStop) { return timeStop.getUTCDate(); }); timeSlider.setLabels(labels); } function displayTimeInfo(timeExtent) { var info = "当前时间：2017/1/"+timeExtent.endTime.getDate(); var date="2017/1/"+timeExtent.endTime.getDate(); dom.byId("labelText").innerHTML = info; } }); </script> </head> <body> <div id="mapDiv"> <div id="bottomPanel"> <div id="timeInfo"> <span style="text-align: center">时间轴</span> <div id="labelText">当前时间：2017/1/1</div> <div id="timeSliderDiv"></div> </div> </div> </div> </body> </html>四、运行结果
