ArcGIS Server Javascript 动态地图服务图层卷帘显示
webgiscontrast.jsp
-----------------------------------------------------------------------------------------------------------------------
<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!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" />
<meta http-equiv="X-UA-Compatible" content="IE=9,IE=8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>中小河流监测预系统</title>
<link rel="stylesheet" type="text/css" href="scripts/jsapi/js/dojo/dijit/themes/claro/claro.css" />
<link rel="stylesheet" type="text/css" href="css/toolbar/toolbarItem/toolbarItem.css" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/scripts/ExtJs/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/scripts/ExtJs/ux/css/ux-all.css" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/scripts/ExtJs/resources/css/watfcustom.css" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/scripts/ExtJs/resources/ux/tab-scroller-menu.css" />
<link id="ext-patch" rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/scripts/ExtJs/resources/ext-patch.css" />
<style type="text/css">
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>
<!--Jquery-->
<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery/jquery-1.7.1.min.js"></script>
<!--Ext&Jquery-->
<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/ExtJs/adapter/jquery/ext-jquery-adapter.js"></script>
<script language="JavaScript" type="text/JavaScript">
//<!--
var REQUEST_CONTEXTPATH="${pageContext.request.contextPath}";
//-->
</script>
<!--Ext-->
<script type="text/javascript" src="gisConfig.jsp"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/ExtJs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/ExtJs/ext-all-debug.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/ExtJs/ux/ux-all.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/ExtJs/ux/DataView-more.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/ExtJs/local/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/watf/ext/watf-base.js"></script>
<script type="text/javascript" src="scripts/jsapi/Default.js"></script>
<script type="text/javascript" src="scripts/gis/config.js"></script>
<script type="text/javascript" src="scripts/gis/navigator.js"></script>
<script type="text/javascript" src="scripts/gis/util.js"></script>
<script type="text/javascript" src="scripts/gis/overlayerContrast.js"></script>
<script type="text/javascript">
//<!--
dojo.require("esri.map");
dojo.require("dijit.dijit");
dojo.require("esri.dijit.OverviewMap");
dojo.require("esri.dijit.Scalebar");
// 全局地图变量
var browseType = getBrowseType();
var map, navigationToolbar, drawToolbar, selectionToolbar;
var navigationToolbarHandler;
var dynamicMapServiceLayerArray = [
{id:"hubeiMeasure",name:"hubeiMeasure",visible:true,url:"http://10.1.102.171:6080/arcgis/rest/services/jcxx/hubeiMeasure/MapServer"},
{id:"Station",name:"Station",visible:true,url:"http://10.1.102.171:6080/arcgis/rest/services/jcxx/Station/MapServer"}];
//
function resizeMap(source, adjWidth, adjHeight, rawWidth, rawHeight) {
if (map != null) {
map.resize();
}
}
Ext.onReady(function() {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'qtip';
});
function init() {
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 : 'center',
margins : '0 0 0 0',
cls : 'empty',
html : '<div id="map" style="height:100%; width:100%; z-index:100; "><div id="toolBarPanel" style=" position:absolute; right:0px; top:0px; z-Index:1000; "></div></div>',
listeners : {
resize : resizeMap
}
}]
});
var 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
}
});
map = new esri.Map("map", {
extent : initialExtent,
logo : false
});
dojo.connect(map,"onUpdateStart",showLoading);
dojo.connect(map,"onUpdateEnd",hideLoading);
dojo.connect(map, 'onLoad', function(mapSecond) {
// 导航工具
navigationToolbar = new esri.toolbars.Navigation(map);
// 画图工具
drawToolbar = new esri.toolbars.Draw(map, {
showTooltips : false
});
// 选择工具
selectionToolbar = new esri.toolbars.Draw(map, {
showTooltips : false
});
// 比例尺
var scalebar = new esri.dijit.Scalebar({
map : map,
scalebarUnit : "metric",
attachTo : "bottom-center"
});
// 地图工具栏
createToolbar();
esri.config.defaults.io.proxyUrl = "proxy.jsp";
});
//
// 加载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服务
for(var i=0; i<dynamicMapServiceLayerArray.length; i++)
{
var dynamicMapServiceLayer = dynamicMapServiceLayerArray[i];
var arcGISDynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer(dynamicMapServiceLayer.url, {visible : dynamicMapServiceLayer.visible, id : dynamicMapServiceLayer.id});
map.addLayer(arcGISDynamicMapServiceLayer);
}
}
// 加载地图
dojo.addOnLoad(init);
// 创建地图工具栏
var arrayStoreSwipeMapService = new Ext.data.ArrayStore({
fields : ['id', 'name'],
data : []
});
var comboBoxSwipeMapService = new Ext.form.ComboBox({
id : "comboBoxSwipeMapService",
store : arrayStoreSwipeMapService,
displayField : 'name',
valueField : 'id',
typeAhead : true,
mode : 'local',
triggerAction : 'all',
emptyText : '请选择',
selectOnFocus : true,
width : 150,
editable : false,
forceSelection : true
});
comboBoxSwipeMapService.on("select", function(box) {
if(maskDynamicMapServiceLayerDiv)
{
alert("select");
maskDynamicMapServiceLayerDiv.onmousedown = null;
}
});
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) {
mapZoomIn();
this.toggle(true);
}
}
}, {
tooltip : '缩小',
iconCls : 'icon-zoomOut',
checked : false,
enableToggle : true,
toggleGroup : 'toolbar',
listeners : {
click : function(s, e) {
mapZoomOut();
this.toggle(true);
}
}
}, {
tooltip : '平移',
iconCls : 'icon-pan',
pressed : true,
checked : false,
enableToggle : true,
toggleGroup : 'toolbar',
listeners : {
click : function(s, e) {
mapPan();
this.toggle(true);
}
}
},'|','卷帘图层',comboBoxSwipeMapService,{
tooltip : '卷帘',
iconCls : 'icon-pan',
pressed : false,
checked : false,
enableToggle : false,
toggleGroup : 'toolbar',
listeners : {
click : function(s, e) {
var layerId = comboBoxSwipeMapService.getValue();
var layer = map.getLayer(layerId);
initOverlayerContrast(layer);
}
}
},{
tooltip : '取消',
iconCls : 'icon-pan',
pressed : false,
checked : false,
enableToggle : false,
toggleGroup : 'toolbar',
listeners : {
click : function(s, e) {
destroyOverlayerContrast();
}
}
}]
});
initComboBoxSwipeMapService(comboBoxSwipeMapService, dynamicMapServiceLayerArray);
}
// 初始化底图服务列表框
function initComboBoxSwipeMapService(comboBoxSwipeMapService, dynamicMapServiceLayerArray) {
var dataArray = new Array();
for (var i = 0; i < dynamicMapServiceLayerArray.length; i++) {
var dynamicMapServiceLayer = dynamicMapServiceLayerArray[i];
dataArray.push([dynamicMapServiceLayer.id, dynamicMapServiceLayer.name]);
}
comboBoxSwipeMapService.store.loadData(dataArray);
comboBoxSwipeMapService.setValue(dynamicMapServiceLayerArray[dynamicMapServiceLayerArray.length-1].id);
}
// 显示等待信息
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 class="claro" oncontextmenu="return false;">
</body>
</html>
----------------------------------------------------------------------------------------------------------------------
overlayerContrast.js
----------------------------------------------------------------------------------------------------------------------
var maskDynamicMapServiceLayer = null;
var maskDynamicMapServiceLayerDiv = null;
var dynamicMapServiceLayerImage = null;
var pointNumb = 0;
var alignType = "";
var mapMouseDownEvent= null;
var mapMouseMoveEvent = null;
var mapMouseUpEvent = null;
var mouseIcon = null;
var mapDiv = null;
function initOverlayerContrast(layer)
{
maskDynamicMapServiceLayer = layer;
maskDynamicMapServiceLayerDiv = document.getElementById("map_" + maskDynamicMapServiceLayer.id);
mapDiv = document.getElementById("map");
//mapMouseDownEvent = dojo.connect(map,"onMouseDown",startDragPanel);
mapDiv.onmousedown = startDragPanel;
map.disablePan();
createMouseIcon();
}
function destroyOverlayerContrast()
{
mapDiv.onmousedown = null;
mapDiv = null;
maskDynamicMapServiceLayer = null;
maskDynamicMapServiceLayerDiv = null;
map.enablePan();
}
function createMouseIcon()
{
mouseIcon = document.getElementById("mouseIcon");
if (!mouseIcon) {
mouseIcon = document.createElement("div");
mouseIcon.id = "mouseIcon";
mouseIcon.style.position = "absolute";
mouseIcon.style.width = 6 + "px";
mouseIcon.style.height = 15 + "px";
mouseIcon.style.background = "#ff0000";
mouseIcon.style.zIndex = "1200";
mouseIcon.style.visibility = "visible";
mouseIcon.style.overflow = "hidden";
mouseIcon.style.left = "-100px";
mouseIcon.style.top = "-100px";
document.body.appendChild(mouseIcon);
}
}
function startDragPanel(e) {
pointNumb = 1;
//
//var screenPoint = evt.screenPoint;
//var x = screenPoint.x;
//var y = screenPoint.y;
var eventObj = window.event || e;
var x = eventObj.clientX;
var y = eventObj.clientY;
mouseIcon.style.left = (x - 20) + "px";
mouseIcon.style.top = (y - 20) + "px";
maskDynamicMapServiceLayerDiv = document.getElementById("map_" + maskDynamicMapServiceLayer.id);
//
//mapMouseMoveEvent = dojo.connect(map,"onMouseMove",moveDragPanel);
//mapMouseUpEvent = dojo.connect(map,"onMouseUp",stopDragPanel);
mapDiv.onmousemove = moveDragPanel;
mapDiv.onmouseup = stopDragPanel;
//
var leftOffset = x;
var topOffset = y;
var rightOffset = document.body.clientWidth - x;
var bottomOffset = document.body.clientHeight - y;
var minOffset = 0;
if (leftOffset < rightOffset) {
minOffset = leftOffset;
alignType = "left";
} else {
minOffset = rightOffset;
alignType = "right";
}
if (topOffset < minOffset) {
minOffset = topOffset;
alignType = "top";
}
if (bottomOffset < minOffset) {
minOffset = bottomOffset;
alignType = "bottom";
}
//
dynamicMapServiceLayerImage = maskDynamicMapServiceLayerDiv.childNodes[0];
var clip = "rect(auto, auto, auto," + x + "px)";
if (alignType == "right") {
clip = "rect(auto, " + x + "px, auto, auto)";
} else if (alignType == "top") {
clip = "rect(" + y + "px, auto, auto, auto)";
} else if (alignType == "bottom") {
clip = "rect(auto, auto, " + y + "px, auto)";
}
dynamicMapServiceLayerImage.style.clip = clip;
}
function moveDragPanel(e) {
//var screenPoint = evt.screenPoint;
//var x = screenPoint.x;
//var y = screenPoint.y;
var eventObj = window.event || e;
var x = eventObj.clientX;
var y = eventObj.clientY;
mouseIcon.style.left = (x - 20) + "px";
mouseIcon.style.top = (y - 20) + "px";
//
dynamicMapServiceLayerImage = maskDynamicMapServiceLayerDiv.childNodes[0];
if (dynamicMapServiceLayerImage && pointNumb == 1) {
var clip = "rect(auto, auto, auto," + x + "px)";
if (alignType == "right") {
clip = "rect(auto, " + x + "px, auto, auto)";
} else if (alignType == "top") {
clip = "rect(" + y + "px, auto, auto, auto)";
} else if (alignType == "bottom") {
clip = "rect(auto, auto, " + y + "px, auto)";
}
dynamicMapServiceLayerImage.style.clip = clip;
}
}
//
function stopDragPanel(evt) {
mouseIcon.style.left = "-100px";
mouseIcon.style.top = "-100px";
dynamicMapServiceLayerImage = maskDynamicMapServiceLayerDiv.childNodes[0];
if (dynamicMapServiceLayerImage)
{
dynamicMapServiceLayerImage.style.clip = "rect(auto, auto, auto, auto)";
}
pointNumb = 0;
//
//dojo.disconnect(mapMouseMoveEvent);
//dojo.disconnect(mapMouseUpEvent);
mapDiv.onmousemove = null;
mapDiv.onmouseup = null;
}
