顺德区地理信息公共服务平台

历史分析API 土地利用现状分析
如何进行土地利用现状分析？
下面是土地利用现状分析的示例代码。
                                                        <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                                                        <html xmlns="http://www.w3.org/1999/xhtml">
                                                        <head>
                                                        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

                                                        <title>土地利用现状分析Demo </title>
                                                        <script type="text/javascript"></script>
                                                        <script src="/Scripts/webapi/hisApiConfig.js" type="text/javascript"></script>
                                                        <script src="/Scripts/jquery.min.js" type="text/javascript"></script>
                                                        <script src="/Scripts/jquery-ui-1.8.24.min.js" type="text/javascript"></script>
                                                        <script src="/Scripts/plugin/selectToUISlider/selectToUISlider.jQuery.js" type="text/javascript"></script>
                                                        <link href="/Scripts/plugin/selectToUISlider/slider/redmond/jquery-ui-1.7.1.custom.css" rel="stylesheet" />

                                                        <link href="/Scripts/plugin/selectToUISlider/slider/ui.slider.extras.css" rel="stylesheet" />

                                                        <link href="/Content/Bootstrap/less/bootstrap.css" rel="stylesheet" />

                                                        <style type="text/css">
                                                            .mapContent {
                                                                width: 100%;
                                                                height: 400px;
                                                            }

                                                            .content {
                                                                height: 380px;
                                                                width: 741px;
                                                                text-align: left;
                                                                border: 1px solid #000000;
                                                            }

                                                            #map_div {
                                                                position: absolute;
                                                            }

                                                            .Button {
                                                                position: absolute;
                                                                bottom: 10px;
                                                                left: 20px;
                                                                z-index: 2;
                                                                margin-left: 5px;
                                                                float: left;
                                                            }

                                                            #tool_div {
                                                                height: 50px;
                                                            }

                                                            .timebtndiv {
                                                                float: left;
                                                                margin: 5px 0px 0px 10px;
                                                            }

                                                            .TimeSliderDiv {
                                                                float: left;
                                                                margin: 5px 0px 0px 10px;
                                                            }

                                                                .TimeSliderDiv .TimeSlider {
                                                                    display: none;
                                                                }
</style>
                                                                </head>
                                                        <body>
                                                        <div class="mapContent">
                                                        <div id="map_div" class="content">
                                                        <input type="button" class="Button" value="进行历史分析" onclick="onclickHistoryComplare()" id="history_complare" />

                                                                        </div>
                                                                    </div>
                                                        <div id="tool_div">
                                                        <div class='timebtndiv'>
                                                        <button style="display:none" id='Ras_play' class='btn btn-xs Me_btn btn-success'><i class='ace-icon glyphicon glyphicon-play'></i>播放</button>
                                                                        </div>
                                                        <div id="rasSliderDiv" class="TimeSliderDiv">
                                                        <fieldset>
                                                        <select name="rasSlider" id="rasSlider" class="TimeSlider"></select>
                                                                            </fieldset>
                                                                        </div>
                                                                    </div>
                                                                </body>
                                                            </html>
                                                        <script type="text/javascript">
                                                            var map = null;
                                                            //当前年份
                                                            var curTime = 0;
                                                            //时间轴的数据源id
                                                            var sliderID = "rasSlider";
                                                            //当前时间滑块的位置
                                                            var sliderNum = 0;
                                                            //播放按钮状态
                                                            var isPlaying = false;
                                                            //播放轮播对象
                                                            var sliderObj = null;
                                                            //播放时间间隔
                                                            var intervalTime = 1000;
                                                            //滑条对象
                                                            var vecTLObj = null;
                                                            //影像地址数组
                                                            var urlArray = [];
                                                            var which = null;
                                                            //服务
                                                            var timelineLand = hisApiConfig.timelineLand;

                                                            function showMap() {
                                                                map = new DCIMap("map_div", DCIMapConfig.mapInitParams);
                                                                switch (DCIMapConfig.vecMap.type) {
                                                                    case 0://WMTS
                                                                        var layers = new DCIWMTSLayer(DCIMapConfig.vecMap.Url);
                                                                        map.addLayer(layers, 0);
                                                                        map.showSlider(map.initExtent, DCIMapConfig.sliderConfig);
                                                                        break;
                                                                    case 1://1为mapserver切片
                                                                        var layers = new esri.layers.ArcGISTiledMapServiceLayer(DCIMapConfig.vecMap.Url);
                                                                        map.addLayer(layers, 0);
                                                                        dojo.connect(layers, "onLoad", function () {
                                                                            map.addLayer(layers, 0);
                                                                            map.showSlider(map.initExtent, DCIMapConfig.sliderConfig);
                                                                        })
                                                                        break;
                                                                }
                                                            }
                                                            dojo.addOnLoad(showMap);
                                                            function LoadTimeline(config) {
                                                                var group = "";
                                                                var j = 0, length = config.length;
                                                                for (; j < length; j++) {
                                                                    var yearVal = config[j]["year"];
                                                                    group += '<option value="' + yearVal + '">' + yearVal + '年</option>';
                                                                }
                                                                createSlider(sliderID, group);
                                                            }
                                                            function createSlider(id, group) {
                                                                function sliderFn(value, text) {
                                                                    sliderNum = value;
                                                                    curTime = text.substring(0, text.length - 1);
                                                                    LoadRaster();
                                                                }
                                                                //调节父元素长度适应屏幕
                                                                $("#" + id + "Div").css("width", "600px");
                                                                $("#" + id + "Div").css("margin", "10px 0px 0px 30px");
                                                                $("#" + id + "Div").show();
                                                                //时间轴的select标签
                                                                var selectItem = $("#" + id);
                                                                selectItem.next().prop("outerHTML", "");
                                                                //画时间轴
                                                                selectItem.html(group);
                                                                var options = selectItem[0].options;
                                                                var labelNum = options.length;
                                                                vecTLObj = selectItem.selectToUISlider({
                                                                    labels: labelNum,
                                                                    sliderFn: sliderFn
                                                                }).next();
                                                            }
                                                            function LoadRaster() {
                                                                //隐藏所有图层
                                                                var i = 0, length = timelineLand.length;
                                                                for (; i < length; i++) {
                                                                    var curLayer = map.getLayer("TimeAxisLand" + timelineLand[i]["year"]);
                                                                    if (curLayer) {
                                                                        curLayer.setVisibility(false);
                                                                    }
                                                                }
                                                                switch (which) {
                                                                    case 3:
                                                                        //显示当前滑块所在年份图层
                                                                        var curIndex = sliderNum;
                                                                        var curTime = urlArray[curIndex]["year"];
                                                                        var curlayer = map.getLayer("TimeAxisLand" + curTime);
                                                                        if (curlayer) {
                                                                            curlayer.setVisibility(true);
                                                                        }
                                                                        break;
                                                                    default:
                                                                        break;
                                                                }
                                                            }
                                                            function singleSlide() {
                                                                singleQuery();
                                                                $("#handle_" + sliderID).addClass("ui-state-hover");
                                                                sliderNum++;
                                                            }
                                                            function singleQuery() {
                                                                var beginTime = urlArray[sliderNum]["year"];
                                                                var curTime = curTime;
                                                                if (curTime != beginTime) {
                                                                    curTime = beginTime;
                                                                    LoadRaster();
                                                                    vecTLObj.slider("values", 0, sliderNum);
                                                                    $(".ttContent").text(curTime + "年");
                                                                }
                                                            }
                                                            function pauseSlide() {
                                                                $("#handle_" + sliderID).removeClass("ui-state-hover");
                                                                clearInterval(sliderObj);
                                                                isPlaying = !isPlaying;
                                                                var playBtn = $("#Ras_play");
                                                                playBtn.removeClass("btn-danger");
                                                                playBtn.addClass("btn-success");
                                                                playBtn.html("<i class='ace-icon glyphicon glyphicon-play'></i>播放");
                                                            }
                                                            function onclickHistoryComplare() {
                                                                for (var i = 0; i < timelineLand.length; i++) {
                                                                    if (map.getLayer("TimeAxisLand" + timelineLand[i].year)) {
                                                                        map.removeLayer(map.getLayer("TimeAxisLand" + timelineLand[i].year));
                                                                    }
                                                                }
                                                                urlArray = [];
                                                                which = null;
                                                                curTime = 0;
                                                                sliderNum = 0;
                                                                isPlaying = false;
                                                                $("#" + sliderID + "Div").hide();
                                                                $("#Ras_play").show();
                                                                $("#Ras_play").removeClass("btn-danger");
                                                                $("#Ras_play").addClass("btn-success");
                                                                $("#Ras_play").html("<i class='ace-icon glyphicon glyphicon-play'></i>播放");
                                                                $("#Ras_play").unbind();
                                                                clearInterval(sliderObj);

                                                                for (var i = 0; i < timelineLand.length; i++) {
                                                                    var lyr = new esri.layers.ArcGISTiledMapServiceLayer(timelineLand[i].url, { id: "TimeAxisLand" + timelineLand[i].year });
                                                                    lyr.setVisibility(false);
                                                                    map.addLayer(lyr);
                                                                }
                                                                urlArray = timelineLand;
                                                                which = 3;

                                                                LoadTimeline(urlArray);
                                                                var playBtn = $("#Ras_play");
                                                                playBtn.unbind().bind("click", function () {
                                                                    if (!isPlaying) {
                                                                        isPlaying = !isPlaying;
                                                                        playBtn.removeClass("btn-success");
                                                                        playBtn.addClass("btn-danger");
                                                                        playBtn.html("<i class='ace-icon glyphicon glyphicon-pause'></i>暂停");


                                                                        singleSlide();
                                                                        sliderObj = setInterval(function () {
                                                                            if (sliderNum < urlArray.length) {
                                                                                singleSlide();
                                                                            }
                                                                            else {
                                                                                sliderNum = 0;
                                                                                singleQuery();
                                                                                pauseSlide();
                                                                            }
                                                                        }, intervalTime);
                                                                    }
                                                                    else {
                                                                        pauseSlide();
                                                                    }
                                                                });
                                                                LoadRaster();
                                                            }
</script>
下面我们分步向您介绍：
加载地图浏览API

将下载的地图浏览API包解压后拷入网页所在的工程文件夹，将如下列代码所示的相对路径加入网页head节内引用。
1.	< !--引入地图框架-->
2.	< script src="http://服务器IP/地图API名称/" type="text/javascript" />< /script>
创建地图容器元素

创建地图浏览应用程序需要在页面中创建一块区域用于显示地图内容，这个区域我们叫做地图容器，即在body中加入的一个div容器，其页面代码为：
1.	<div id="map_div" class="content"> </div>
参数初始化设置

地图实例通过下列代码创建，其中，DCIMapConfig.mapInitParams是地图初始化参数。
1.	var map = new DCIMap("map_div", DCIMapConfig.mapInitParams);
加载图层到地图

根据底图类型，创建底图，添加到地图中。
1.	switch (DCIMapConfig.vecMap.type) {
2.	case 0://WMTS
3.	var layers = new DCIWMTSLayer(DCIMapConfig.vecMap.Url);
4.	map.addLayer(layers, 0);
5.	map.showSlider(map.initExtent, DCIMapConfig.sliderConfig);
6.	break;
7.	case 1://1为mapserver切片
8.	var layers = new esri.layers.ArcGISTiledMapServiceLayer(DCIMapConfig.vecMap.Url);
9.	map.addLayer(layers, 0);
10.	dojo.connect(layers, "onLoad", function () {
11.	map.showSlider(map.initExtent, DCIMapConfig.sliderConfig);
12.	})
13.	break;
14.	}
15.	}
土地利用现状历史分析

通过以下方法实现土地利用现状历史分析。
1.	onclickHistoryComplare()方法用于初始化
2.	LoadTimeline()方法用于建立时间轴
3.	createSlider()方法用于加载时间轴滑块
4.	singleQuery()方法用于加载当前时间位置的地图服务
5.	pauseSlide()方法为暂停时间轴滑块调用方法