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

比对分析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/jquery.min.js" type="text/javascript"></script>
                                                        <style type="text/css">
                                                            .mapContent {
                                                                width: 100%;
                                                                height: 400px;
                                                            }

                                                            .content {
                                                                height: 380px;
                                                                width: 741px;
                                                                text-align: left;
                                                            }

                                                            #map_div {
                                                                position: absolute;
                                                            }

                                                            #tool_div {
                                                                height: 50px;
                                                            }

                                                            .Button {
                                                                margin: 13px 0px 0px 10px;
                                                            }

                                                            .mapone {
                                                                width: 100%;
                                                                height: 100%;
                                                            }

                                                            .maptwo, .mapthree, .mapfour {
                                                                display: none;
                                                            }

                                                            .map_two .mapone {
                                                                width: 48%;
                                                                height: 100%;
                                                                border-bottom: 3px solid #30a4d5;
                                                                border-left: 3px solid #30a4d5;
                                                                border-right: 3px solid #30a4d5;
                                                                float: left;
                                                                position: relative;
                                                            }

                                                            .map_two .maptwo {
                                                                display: block;
                                                                width: 48%;
                                                                height: 100%;
                                                                border-bottom: 3px solid #cfcfcf;
                                                                border-left: 3px solid #cfcfcf;
                                                                border-right: 3px solid #cfcfcf;
                                                                float: left;
                                                                position: relative;
                                                            }

                                                            .map_two .mapthree, .map_two .mapfour {
                                                                display: none;
                                                            }

                                                            .map_combobox_containerOne {
                                                                z-index: 1000;
                                                                position: absolute;
                                                                right: 0;
                                                                bottom: 0;
                                                            }

                                                            .map_combobox_containerTwo {
                                                                z-index: 1000;
                                                                position: absolute;
                                                                right: 0;
                                                                bottom: 0;
                                                            }

                                                            .map_combobox_containerThree {
                                                                z-index: 1000;
                                                                position: absolute;
                                                                right: 0;
                                                                bottom: 0;
                                                            }

                                                            .map_combobox_containerFour {
                                                                z-index: 1000;
                                                                position: absolute;
                                                                right: 0;
                                                                bottom: 0;
                                                            }
</style>
                                                                </head>
                                                        <body>
                                                        <div class="mapContent">
                                                        <div id="map_div" class="content">
                                                        <div id="map" class="mapone"></div>
                                                        <div id="map-two" class="maptwo"></div>
                                                        <div id="map-three" class="mapthree"></div>
                                                        <div id="map-four" class="mapfour"></div>
                                                                        </div>
                                                                    </div>
                                                        <div id="tool_div">
                                                        <input type="button" class="Button" value="单屏" onclick="onclickOneMap()" id="OneMap" />

                                                        <input type="button" class="Button" value="双屏" onclick="onclickTwoMap()" id="TwoMap" />

                                                                    </div>
                                                                </body>
                                                            </html>
                                                        <script type="text/javascript">
                                                            var map = null;
                                                            var mapContainer = {
                                                                containerOne: null,
                                                                containerTwo: null,
                                                                containerThree: null,
                                                                containerFour: null
                                                            };
                                                            var objMap = {
                                                                mapOne: null,
                                                                mapTwo: null,
                                                                mapThree: null,
                                                                mapFour: null
                                                            };
                                                            var preSplit = 'one';
                                                            var clickOne = null;
                                                            var clickTwo = null;
                                                            var clickThree = null;
                                                            var clickFour = null;
                                                            var mapOne_handle = null;
                                                            var mapTwo_handle = null;
                                                            var mapThree_handle = null;
                                                            var mapFour_handle = null;
                                                            var mapOne_movehandle = null;
                                                            var mapTwo_movehandle = null;
                                                            var mapThree_movehandle = null;
                                                            var mapFour_movehandle = null;

                                                            var eventTimer = null;
                                                            function showMap() {
                                                                map = new DCIMap("map", 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.showSlider(map.initExtent, DCIMapConfig.sliderConfig);
                                                                        })
                                                                        break;
                                                                }

                                                                mapContainer.containerOne = 'map';
                                                                mapContainer.containerTwo = 'map-two';
                                                                mapContainer.containerThree = 'map-three';
                                                                mapContainer.containerFour = 'map-four';
                                                                objMap.mapOne = map;
                                                            }
                                                            function onclickOneMap() {
                                                                $("#map_div").removeClass("map_two map_three map_four");
                                                                splitMap('splitOne');
                                                            }
                                                            function onclickTwoMap() {
                                                                $("#map_div").removeClass("map_three map_four").addClass("map_two");
                                                                splitMap("splitTwo");
                                                            }
                                                            function splitMap(splitNum) {
                                                                switch (splitNum) {
                                                                    case 'splitOne':
                                                                        if (preSplit == "one") return;
                                                                        preSplit = "one";
                                                                        _clearMap("splitOne");
                                                                        break;
                                                                    case 'splitTwo':
                                                                        if (preSplit == "two") return;
                                                                        preSplit = "two";
                                                                        _clearMap("splitTwo");
                                                                        _createMapObj('two');
                                                                        break;
                                                                    case 'splitThree':
                                                                        if (preSplit == "three") return;
                                                                        preSplit = "three";
                                                                        _clearMap("splitTree");
                                                                        _createMapObj('three');
                                                                        break;
                                                                    case 'splitFour':
                                                                        if (preSplit == "four") return;
                                                                        preSplit = "four";
                                                                        _clearMap("splitFour");
                                                                        _createMapObj('four');
                                                                        break;
                                                                }
                                                                //地图复位
                                                                if (splitNum == "splitOne") return;
                                                                _addclickEvent();
                                                                //加载地图的下拉框控件
                                                                creatElement();
                                                            }
                                                            //清除之前分屏的状态
                                                            function _clearMap(split) {
                                                                switch (split) {
                                                                    case 'splitOne':
                                                                        cleargraphics();
                                                                        break;
                                                                    default:
                                                                        break;
                                                                }
                                                                clickOne = false;
                                                                clickTwo = false;
                                                                clickThree = false;
                                                                clickFour = false;
                                                                for (obj in objMap) {
                                                                    if (objMap[obj] && objMap[obj].esriMap && objMap[obj] != objMap.mapOne) {
                                                                        objMap[obj].esriMap.destroy();
                                                                        objMap[obj] = null;
                                                                    }
                                                                }
                                                                $(".map_combobox_containerOne").remove();
                                                                $("#" + mapContainer.containerTwo).children().remove();
                                                                $("#" + mapContainer.containerThree).children().remove();
                                                                $("#" + mapContainer.containerFour).children().remove();
                                                                clearExtentchange();
                                                                clearMousemove();
                                                            }
                                                            //清空所有的graphics
                                                            function cleargraphics() {
                                                                for (obj in objMap) {
                                                                    if (objMap[obj] && objMap[obj].esriMap) {
                                                                        objMap[obj].esriMap.graphics.clear();
                                                                    }
                                                                }
                                                            }
                                                            //清除Extentchange事件监听
                                                            function clearExtentchange() {
                                                                if (mapOne_handle)
                                                                    mapOne_handle.remove();
                                                                if (mapTwo_handle)
                                                                    mapTwo_handle.remove();
                                                                if (mapThree_handle)
                                                                    mapThree_handle.remove();
                                                                if (mapFour_handle)
                                                                    mapFour_handle.remove();
                                                            }
                                                            //清除mousemove事件监听
                                                            function clearMousemove() {
                                                                if (mapOne_movehandle)
                                                                    mapOne_movehandle.remove();
                                                                if (mapTwo_movehandle)
                                                                    mapTwo_movehandle.remove();
                                                                if (mapThree_movehandle)
                                                                    mapThree_movehandle.remove();
                                                                if (mapFour_movehandle)
                                                                    mapFour_movehandle.remove();
                                                            }
                                                            //实例化map对象
                                                            function _createMapObj(splitNun) {
                                                                var two = false;
                                                                var three = false;
                                                                var four = false;
                                                                switch (splitNun) {
                                                                    case 'two':
                                                                        two = true;
                                                                        break;
                                                                    case 'three':
                                                                        two = true;
                                                                        three = true;
                                                                        break;
                                                                    case 'four':
                                                                        two = true;
                                                                        three = true;
                                                                        four = true;
                                                                        break;
                                                                }
                                                                if (!objMap.mapTwo && two) {
                                                                    objMap.mapTwo = _getNewMap({ container: mapContainer.containerTwo });
                                                                }
                                                                if (!objMap.mapThree && three) {
                                                                    objMap.mapThree = _getNewMap({ container: mapContainer.containerThree })
                                                                }
                                                                if (!objMap.mapFour && four) {
                                                                    objMap.mapFour = _getNewMap({ container: mapContainer.containerFour })
                                                                }
                                                            }
                                                            //初始化地图
                                                            function _getNewMap(options) {
                                                                var map;
                                                                if (options.container == "map") {
                                                                    return;
                                                                }
                                                                else {
                                                                    map = new DCIMap(options.container, DCIMapConfig.mapInitParams); //创建一个地图实例
                                                                    setMapState(map, DCIMapConfig.vecMap.Url + "&type=" + DCIMapConfig.vecMap.type);
                                                                }
                                                                return map;
                                                            }
                                                            //设置地图的加载状态
                                                            function setMapState(obj, url) {
                                                                var curLyr = null;
                                                                var type = url.split("&type=")[1];
                                                                var url = url.split("&type=")[0];
                                                                switch (parseInt(type)) {
                                                                    case 0:
                                                                        curLyr = new DCIWMTSLayer(url, { id: "splitdciBaseMapID" });
                                                                        var centerPt = objMap.mapOne.esriMap.extent.getCenter();
                                                                        var mapZoom = objMap.mapOne.esriMap.getZoom();
                                                                        obj.esriMap.removeAllLayers();
                                                                        obj.addLayer(curLyr, 0);
                                                                        obj.esriMap.centerAndZoom(centerPt, mapZoom);
                                                                        break;
                                                                    case 1:
                                                                        curLyr = new esri.layers.ArcGISDynamicMapServiceLayer(url, { id: "splitdciBaseMapID" });
                                                                        var centerPt = objMap.mapOne.esriMap.extent.getCenter();
                                                                        var mapZoom = objMap.mapOne.esriMap.getZoom();
                                                                        obj.esriMap.removeAllLayers();
                                                                        obj.esriMap.addLayer(curLyr, 0);
                                                                        obj.esriMap.centerAndZoom(centerPt, mapZoom);
                                                                        break;
                                                                    default:
                                                                        break;
                                                                }
                                                            }
                                                            //添加事件
                                                            function _addclickEvent() {
                                                                if (objMap.mapOne && !clickOne) {
                                                                    mapOne_handle = objMap.mapOne.esriMap.on('extent-change', _extentchangeEvent);
                                                                    mapOne_movehandle = objMap.mapOne.esriMap.on('mouse-move', _moveEvent);
                                                                    clickOne = true;
                                                                }
                                                                if (objMap.mapTwo && !clickTwo) {
                                                                    mapTwo_handle = objMap.mapTwo.esriMap.on('extent-change', _extentchangeEvent);
                                                                    mapTwo_movehandle = objMap.mapTwo.esriMap.on('mouse-move', _moveEvent);
                                                                    clickTwo = true;
                                                                }
                                                                if (objMap.mapThree && !clickThree) {
                                                                    mapThree_handle = objMap.mapThree.esriMap.on('extent-change', _extentchangeEvent);
                                                                    mapThree_movehandle = objMap.mapThree.esriMap.on('mouse-move', _moveEvent);
                                                                    clickTree = true;
                                                                }
                                                                if (objMap.mapFour && !clickFour) {
                                                                    mapFour_handle = objMap.mapFour.esriMap.on('extent-change', _extentchangeEvent);
                                                                    mapFour_movehandle = objMap.mapFour.esriMap.on('mouse-move', _moveEvent);
                                                                    clickFour = true;
                                                                }
                                                            }
                                                            //添加Extentchange事件监听
                                                            function _extentchangeEvent(evt) {
                                                                var map = this;
                                                                var extent = evt.extent;
                                                                var mapZoom = map.getZoom();
                                                                mapSerView({ extent: extent, zoom: mapZoom, map: map });
                                                            }
                                                            //设置map的bounds
                                                            function mapSerView(options) {
                                                                for (obj in objMap) {
                                                                    if (objMap[obj] && objMap[obj].esriMap && objMap[obj].esriMap.extent) {
                                                                        if (objMap[obj].esriMap == options.map) {
                                                                            continue;
                                                                        }
                                                                        if (Math.abs(options.extent.xmin - objMap[obj].esriMap.extent.xmin) > 0.0001 ||
                                                                            Math.abs(options.extent.ymin - objMap[obj].esriMap.extent.ymin) > 0.0001) {
                                                                            objMap[obj].esriMap.centerAndZoom(options.extent.getCenter(), options.zoom);
                                                                        }
                                                                    }
                                                                }
                                                                clearExtentchange();
                                                                clearTimeout(this.eventTimer);
                                                                //创建新resize Timer，让它延迟0.4秒触发
                                                                eventTimer = setTimeout(function () {
                                                                    addEvent();
                                                                }, 400);
                                                            }
                                                            function addEvent() {
                                                                if (objMap.mapOne)
                                                                    mapOne_handle = objMap.mapOne.esriMap.on('extent-change', _extentchangeEvent);
                                                                if (objMap.mapTwo)
                                                                    mapTwo_handle = objMap.mapTwo.esriMap.on('extent-change', _extentchangeEvent);
                                                                if (objMap.mapThree)
                                                                    mapThree_handle = objMap.mapThree.esriMap.on('extent-change', _extentchangeEvent);
                                                                if (objMap.mapFour)
                                                                    mapFour_handle = objMap.mapFour.esriMap.on('extent-change', _extentchangeEvent);
                                                            }
                                                            //添加mousemove事件监听
                                                            function _moveEvent(evt) {
                                                                var symbol = new esri.symbol.PictureMarkerSymbol();
                                                                symbol.url = Portal.Global.getRootPath() + "Content/img/comm/c.png";
                                                                symbol.width = 12;
                                                                symbol.height = 17;
                                                                for (obj in objMap) {
                                                                    if (objMap[obj] && objMap[obj].esriMap) {
                                                                        if (objMap[obj].esriMap.graphics.graphics) {
                                                                            var gra = getCurGraphic(objMap[obj].esriMap.graphics.graphics);
                                                                            if (gra) {
                                                                                objMap[obj].esriMap.graphics.remove(gra);
                                                                            }
                                                                        }
                                                                        if (objMap[obj].esriMap == this) {
                                                                            continue;
                                                                        }
                                                                        var attr = { "title": "cur" };
                                                                        var graphic = new esri.Graphic(evt.mapPoint, symbol, attr);
                                                                        objMap[obj].esriMap.graphics.add(graphic);
                                                                    }
                                                                }
                                                            }
                                                            //获取光标的graphic
                                                            function getCurGraphic(graphics) {
                                                                for (var i = 0; i < graphics.length; i++) {
                                                                    if (graphics[i].attributes && graphics[i].attributes.title == "cur") {
                                                                        return graphics[i];
                                                                    }
                                                                }
                                                                return null;
                                                            }
                                                            //map元素的下拉框div
                                                            function creatElement() {
                                                                for (obj in mapContainer) {
                                                                    if (mapContainer[obj] && mapContainer[obj] != mapContainer.containerOne) { //主屏地图不加载select控件切换底图
                                                                        var selectHtml = "<select id='select_" + obj + "' style='font-size:13px;'></select>";
                                                                        this.elem = document.createElement('div');
                                                                        this.elem.setAttribute("class", "map_combobox_" + obj);
                                                                        document.getElementById(mapContainer[obj]).appendChild(this.elem.cloneNode());
                                                                        $(".map_combobox_" + obj).append(selectHtml);
                                                                        //加载select图层数据源
                                                                        var objselect = document.getElementById('select_' + obj);
                                                                        objselect.options.add(new Option("影像地图", DCIMapConfig.imgMap.Url + "&type=" + DCIMapConfig.imgMap.type, true, true));
                                                                        objselect.options.add(new Option("电子地图", DCIMapConfig.vecMap.Url + "&type=" + DCIMapConfig.vecMap.type, true, true));
                                                                        //触发select选择监听事件
                                                                        $('#select_' + obj).change(function () {
                                                                            if (this.id.indexOf("One") > 0) {
                                                                                setMapState(objMap.mapOne, $(this).children('option:selected').val());
                                                                            }
                                                                            else if (this.id.indexOf("Two") > 0) {
                                                                                setMapState(objMap.mapTwo, $(this).children('option:selected').val());
                                                                            }
                                                                            else if (this.id.indexOf("Three") > 0) {
                                                                                setMapState(objMap.mapThree, $(this).children('option:selected').val());
                                                                            }
                                                                            else if (this.id.indexOf("Four") > 0) {
                                                                                DCIsetMapState(objMap.mapFour, $(this).children('option:selected').val());
                                                                            }
                                                                        });
                                                                    }
                                                                }
                                                            }
                                                            dojo.addOnLoad(showMap);
</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.	onclickTwoMap()方法用于切换成分屏
2.	onclickOneMap()方法用于切换成单屏
3.	splitMap()方法是分屏比对入口。
4.	_clearMap()方法用于清空地图对象
5.	_createMapObj()方法用于创建地图对象
6.	_getNewMap()方法用于创建地图实例
7.	setMapState()方法用于切换底图
7.	clearExtentchange()方法用于清除范围改变事件监听
8.	clearMousemove()方法用于清除鼠标移动事件监听
9.	_addclickEvent()方法用于添加事件监听
10.	_extentchangeEvent()为地图范围改变事件触发函数
11.	_moveEvent()为地图鼠标移动事件触发函数