ArcGis API for JavaScript——时间轴

最新推荐文章于 2024-08-07 14:02:51 发布

会飞的马

最新推荐文章于 2024-08-07 14:02:51 发布

阅读量7.9k

点赞数 4

本文链接：https://blog.csdn.net/u010371710/article/details/71159170

版权

ArcGis API for JavaScript 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

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>