ArcGIS Server Javascript 多图对比功能-白红宇

ArcGIS Server Javascript 多图对比功能

阅读量：5267 次

发布时间：2019-06-14

本文共 8304 字，大约阅读时间需要 27 分钟。

<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ">

<head>

<title>中小河流监测预系统</title>

html,body {

height: 100%;

width: 100%;

margin: 0px;

padding: 0px;

overflow: hidden;

}

#map {

margin: 0px;

padding: 0px;

background-color: #FFF;

border: solid 0px #6495ED;

}

</style>

//<!--

var REQUEST_CONTEXTPATH="${pageContext.request.contextPath}";

//-->

</script>

//<!--

dojo.require("esri.map");

dojo.require("dijit.dijit");

dojo.require("esri.dijit.OverviewMap");

dojo.require("esri.dijit.Scalebar");

// 全局地图变量

var browseType = getBrowseType();

var mapArray = new Array();

var initialExtent = null;

var spaceBetweenMap = 10;

var mapIdNumber = 1;

var dynamicMapServiceLayerArray = [

{id:"hubeiMeasure",name:"hubeiMeasure",visible:true,url:",

{id:"Station",name:"Station",visible:true,url:"

Ext.onReady(function() {

Ext.QuickTips.init();

Ext.form.Field.prototype.msgTarget = 'qtip';

});

function createContrastMap(mapId, dynamicLayerArray)

{

var multiMapContainer = document.getElementById("multiMapContainer");

var multiMapContainerWidth = multiMapContainer.clientWidth;

var multiMapContainerHeight = multiMapContainer.clientHeight;

var mapWidth = parseInt((multiMapContainerWidth - spaceBetweenMap * 3) / 2);

var mapHeight = parseInt((multiMapContainerHeight - spaceBetweenMap * 3) / 2);

var mapLeft = (mapArray.length % 2) * (mapWidth + spaceBetweenMap) + spaceBetweenMap;

var mapTop = parseInt(mapArray.length / 2) * (mapHeight + spaceBetweenMap) + spaceBetweenMap;

if(mapArray && mapArray.length>0)

{

for(var i=0; i<mapArray.length; i++)

{

var mapOther = mapArray[i];

var mapOtherDiv = mapOther.root.parentNode;

if(parseInt(mapOtherDiv.style.width) != mapWidth || parseInt(mapOtherDiv.style.height) != mapHeight)

{

mapOtherDiv.style.width = mapWidth + "px";

mapOtherDiv.style.height = mapHeight + "px";

mapOtherDiv.style.left = (i % 2) * (mapWidth + spaceBetweenMap) + spaceBetweenMap + "px";

mapOtherDiv.style.top = parseInt(i / 2) * (mapHeight + spaceBetweenMap) + spaceBetweenMap + "px";

mapOther.resize(true);

}

panel = document.getElementById(mapId);

if(!panel)

{

panel = document.createElement("div");

panel.id = mapId;

panel.style.position = "absolute";

panel.style.left = mapLeft + "px";

panel.style.top = mapTop + "px";

panel.style.width = mapWidth + "px";

panel.style.height = mapHeight + "px";

panel.style.border = "1px solid #000000";

panel.style.zIndex = "1200";

panel.style.visibility = "visible";

panel.style.overflow = "hidden";

multiMapContainer.appendChild(panel);

}

var map = new esri.Map(mapId, {

slider: false,

extent : initialExtent,

logo : false

});

dojo.connect(map, 'onLoad', function(map) {

// 比例尺

var scalebar = new esri.dijit.Scalebar({

map : map,

scalebarUnit : "metric",

attachTo : "bottom-center"

});

// 加载BaseMap的GIS服务

for (var i = 0; i < config.map.baseMap.length; i++) {

var id = config.map.baseMap[i].id;

var basemapUrl = config.map.baseMap[i].url;

var visible = config.map.baseMap[i].visible;

var type = config.map.baseMap[i].type;

var basemap = null;

if (type == "tiled") {

basemap = new esri.layers.ArcGISTiledMapServiceLayer(basemapUrl, {

visible : visible,

id : id

});

}

map.addLayer(basemap);

}

// 加载GIS服务

if(dynamicLayerArray && dynamicLayerArray.length > 0)

{

for(var i=0; i<dynamicLayerArray.length; i++)

{

var dynamicLayer = dynamicLayerArray[i];

var arcGISDynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer(dynamicLayer.url, {visible : dynamicLayer.visible, id : dynamicLayer.id});

map.addLayer(arcGISDynamicMapServiceLayer);

}

dojo.connect(map, 'onExtentChange', function(extent,delta) {

initialExtent = extent;

var xOffset = (extent.xmax - extent.xmin)/map.width * 2;

var yOffset = (extent.ymax - extent.ymin)/map.height * 2;

for(var i=0; i<mapArray.length; i++)

{

var mapOther = mapArray[i];

if(mapOther.id != map.id && !(Math.abs(extent.xmin - mapOther.extent.xmin) < xOffset && Math.abs(extent.ymin - mapOther.extent.ymin) < yOffset))

{

mapOther.setExtent(extent, false);

break;

}

});

mapArray.push(map);

}

function init() {

esri.config.defaults.io.proxyUrl = "proxy.jsp";

Ext.BLANK_IMAGE_URL = 'scripts/ext/resources/images/default/s.gif';

Ext.QuickTips.init();

var viewport = new Ext.Viewport({

layout : "border",

border : false,

items : [{

region: 'west',

split: true,

width: 300,

minSize: 300,

maxSize: 300,

collapsible: true,

title: '地图种类',

html : '<div id="toolBarPanel" style=" position:absolute; right:0px; top:0px; z-Index:1000; "></div>',

margins: '0 0 0 0'

},{

region : 'center',

margins : '0 0 0 0',

cls : 'empty',

html : '<div id="multiMapContainer" style="position:absolute; left:0px; top:0px; width:100%; height:100%; z-Index:1000; overflow:auto; "></div>'

}]

});

createToolbar();

initialExtent = new esri.geometry.Extent({

"xmin" : config.map.initialextent[0],

"ymin" : config.map.initialextent[1],

"xmax" : config.map.initialextent[2],

"ymax" : config.map.initialextent[3],

"spatialReference" : {

"wkid" : config.map.wkid

}

});

}

// 加载地图

dojo.addOnLoad(init);

function createToolbar() {

var toolbar = new Ext.Toolbar({

renderTo : "toolBarPanel",

items : [{

tooltip : "放大",

iconCls : 'icon-zoomIn',

checked : true,

enableToggle : true,

toggleGroup : 'toolbar',

listeners : {

click : function(s, e) {

var mapId = "mapId" + mapIdNumber;

createContrastMap(mapId , dynamicMapServiceLayerArray);//

mapIdNumber++;

}

}]

});

}

// 显示等待信息

function showLoading() {

var bd = Ext.getBody();

bd.mask("<font style='font-weight:bold;'>正在加载...</font>", 'x-mask-loading');

}

// 不显示等待信息

function hideLoading(error) {

var bd = Ext.getBody();

bd.unmask();

}

//-->

</script>

</head>

</body>

</html>

转载于:https://www.cnblogs.com/gispathfinder/archive/2013/01/24/2874331.html

你可能感兴趣的文章

Callable和Runnable和FutureTask

查看>>

第一次作业

查看>>

c编程：用户输入一个数值n,打印出出1到n之间的所有质数

python3 调用 beautifulSoup 进行简单的网页处理

Yum安装MySQL以及相关目录路径和修改目录

查看>>

java获取hostIp和hostName

查看>>

RxJava结合Retrofit和Volley简单比较

关于web服务器和数据库的各种说法（搜集到的）

查看>>

一个 forceLayout() 和 requestLayout() 的测试

查看>>