arcgis api for javascript学习-时间滑块TimeSlider实现（影像服务）

blog12138

于 2020-11-13 15:32:51 发布

阅读量1.6k

点赞数 2

分类专栏： arcgis for js 3.x学习笔记文章标签： arcgisforJS arcgis webgis arcgisapi arcgisAPI

本文链接：https://blog.csdn.net/zzzpiu/article/details/109524749

版权

arcgis for js 3.x学习笔记专栏收录该内容

30 篇文章 7 订阅

订阅专栏

文章目录

前言
一、准备数据及发布影像服务
二、代码实现
三.存在的问题

前言

时间滑块可以用来观察历史数据和当前数据的差异，由于本人的菜鸡操作，查阅了一些资料，才勉强实现了将官方demo的矢量数据的时间滑块做成了影像数据的时间滑块。不过里面有一堆bug,不知道实际的项目上是怎么做的,希望大佬看见能指点一二.

一、准备数据及发布影像服务

1.1 新建一个文件数据库

在这里插入图片描述

1.2 新建一个镶嵌数据集

在这里插入图片描述

1.3 将每年的数据导入到一个镶嵌数据集

在这里插入图片描述

1.4 建一个总的将每年的镶嵌数据集导入:

在这里插入图片描述

1.5 给总的镶嵌数据集建立一个时间字段,添加上影像对应的时间

在这里插入图片描述

1.6 右键总的镶嵌数据集,属性,启用时间

在这里插入图片描述

1.7 发布影像服务,右键共享为影像服务.

在这里插入图片描述

二、代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My TimeSlider</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.34/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.34/esri/css/esri.css">
    <style>
        html, body, #mapDiv {
            padding:0;
            margin:0;
            height:100%;
        }

        #mapDiv {
            position: relative;
        }

        #bottomPanel {
            left: 50%;
            margin: 0 auto;
            margin-left: -500px;
            position: absolute;
            bottom: 2.5em;
        }

        #timeInfo{
            border-radius: 4px;
            border: solid 2px #ccc;
            background-color: #fff;
            display: block;
            padding: 5px;
            position: relative;
            text-align: center;
            width: 1000px;
            z-index: 99;
        }
    </style>
    <script src="https://js.arcgis.com/3.34/"></script>
    <script>
        var map;
        require([
            "esri/map", "esri/layers/ArcGISImageServiceLayer",    "esri/layers/ArcGISDynamicMapServiceLayer","esri/layers/ArcGISTiledMapServiceLayer",
            "esri/TimeExtent", "esri/dijit/TimeSlider",
            "dojo/_base/array", "dojo/dom", "dojo/domReady!"
        ], function(
            Map, ArcGISImageServiceLayer,ArcGISDynamicMapServiceLayer,ArcGISTiledMapServiceLayer,
            TimeExtent, TimeSlider,
            arrayUtils, dom
        ) {
            // map = new Map("mapDiv", {
            //     basemap: "streets",
            //     center: [104.07325, 30.67585],// 成都：104.07325728412745，30.675855836106336
            //     zoom: 9
            // });
            map = new Map("mapDiv",{
                center: [104.07325, 30.67585],// 成都：104.07325728412745，30.675855836106336
                zoom: 9
            });

            var imgLayer = new ArcGISImageServiceLayer("http://localhost:6080/arcgis/rest/services/TestServer/slidertest/ImageServer");

            //add the gas fields layer to the map
            map.addLayers([imgLayer]);

            map.on("layers-add-result", initSlider);
            map.on("click",function (e) {
                console.log(e.mapPoint.getLatitude());
                console.log(e.mapPoint.getLongitude());
                console.log(map.spatialReference);
            });
            function initSlider() {
                var timeSlider = new TimeSlider({
                    style: "width: 100%;"
                }, dom.byId("timeSliderDiv"));

                map.setTimeSlider(timeSlider);

                var timeExtent = new TimeExtent();
                timeExtent.startTime = new Date("12/31/2010 UTC");
                timeExtent.endTime = new Date("12/31/2014 UTC");
                //这个东西用来设置滑块的拇指，1为一个；2为两个（左右滑块）。
                timeSlider.setThumbCount(1);
                //为输入时间范围创建指定的时间停止数。说直白一点就是时间的刻度。
                //三个参数：时间滑块的起始范围   时间刻度间隔   时间单位
                timeSlider.createTimeStopsByTimeInterval(timeExtent, 1, "esriTimeUnitsYears");
                // timeSlider.createTimeStopsByTimeInterval(timeExtent);
                // timeSlider.createTimeStopsByCount(timeExtent,5);
                //一个数组参数：第一个值决定第一个拇指放在哪里。
                //如果它是一个双拇指滑块,则第二个值将确定附加拇指的位置，位置是由刻度决定的。
                // timeSlider.setThumbIndexes([0,1]);
                //更改动画播放的速率，默认值1500
                timeSlider.setThumbMovingRate(2000);
                // 开启时间滑块
                timeSlider.startup();

                //add labels for every other time stop
                // 每隔一个时间点添加一个标注,下面这个代码就是在遍历timeStops
                // console.log(timeSlider.timeStops);
                var labels = arrayUtils.map(timeSlider.timeStops, function(timeStop, i) {
                    if ( i % 1 === 0 ) {//就是设置时间刻度上标注的时间，%3就表示隔三个标注一个时间
                        return timeStop.getUTCFullYear();
                    } else {
                        return "";
                    }
                });

                timeSlider.setLabels(labels);

                timeSlider.on("time-extent-change", function(evt) {
                    var startValString = evt.startTime.getUTCFullYear();
                    var endValString = evt.endTime.getUTCFullYear();
                    dom.byId("daterange").innerHTML = "<i>" + startValString + " and " + endValString  + "</i>";
                });
            }
        });
    </script>
</head>
<body>
<div id="mapDiv">
    <div id="bottomPanel">
        <div id="timeInfo">
            <div>image<span id="daterange">2010 to 2014</span></div>
            <div id="timeSliderDiv"></div>
        </div>
    </div>
</div>
</body>
</html>

结果如下:
在这里插入图片描述

三.存在的问题

1. 这个实现的结果很明显有两个时间的影像并没有被切换
2. 效果差:每次切换时间的时候,影像都会闪一下.
3. 请问实际项目时怎么实现切换这种具有时间的底图影像的呢

blog12138

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
arcgis api for javascript学习-时间滑块TimeSlider实现（影像服务）

文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结前言时间滑块可以用来观察历史数据和当前数据的差异，由于本人的菜鸡操作，查阅了一些资料，才实现了将官方demo的矢量数据的时间滑块做成了影像数据的时间滑块。提示：以下是本篇文章正文内容，下面案例可供参考一、pandas是什么？示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。二、使用步骤1.引入库代码如下（示例）：import numpy as npimport pandas
复制链接

扫一扫

专栏目录