<script type="text/javascript">
$(document).ready(function () {
$(".level").click(function () {
var levelId = document.getElementById('levelId');
var valValue = levelId.style.borderRadius;
if (valValue == "0px") {
setTimeout(funcLevel, 500);
function funcLevel() {
$(".level").css("border-radius", "5px 5px 0 0");
}
} else {
$(".level").css("border-radius", "0 0 0 0");
}
$(".levelTool").slideToggle("slow");
});
$(".translation").click(function () {
var translationId = document.getElementById('translationId');
var valValue = translationId.style.borderRadius;
if (valValue == "0px") {
setTimeout(funcTranslation, 500);
function funcTranslation() {
$(".translation").css("border-radius", "5px 5px 0 0");
}
} else {
$(".translation").css("border-radius", "0 0 0 0");
}
$(".translationTool").slideToggle("slow");
});
$(".scale").click(function () {
var scaleId = document.getElementById('scaleId');
var valValue = scaleId.style.borderRadius;
if (valValue == "0px") {
setTimeout(funcScale, 500);
function funcScale() {
$(".scale").css("border-radius", "5px 5px 0 0");
}
} else {
$(".scale").css("border-radius", "0 0 0 0");
}
$(".scaleTool").slideToggle("slow");
});
$("#enlarge").mouseover(function () {
var img = document.getElementById('enlarge');
img.style.width = '20px';
img.style.height = '16px';
var showEnlargeDiv = document.getElementById('showEnlargeDiv');
showEnlargeDiv.style.display = 'block';
showEnlargeDiv.innerHTML = '放大';
});
$("#enlarge").mouseout(function () {
var img = document.getElementById('enlarge');
img.style.width = '18px';
img.style.height = '15px';
var showEnlargeDiv = document.getElementById('showEnlargeDiv');
showEnlargeDiv.style.display = 'none';
});
$("#narrow").mouseover(function () {
var img = document.getElementById('narrow');
img.style.width = '20px';
img.style.height = '16px';
var showNarrowDiv = document.getElementById('showNarrowDiv');
showNarrowDiv.style.display = 'block';
showNarrowDiv.innerHTML = '缩小';
});
$("#narrow").mouseout(function () {
var img = document.getElementById('narrow');
img.style.width = '18px';
img.style.height = '15px';
var showNarrowDiv = document.getElementById('showNarrowDiv');
showNarrowDiv.style.display = 'none';
});
$("#north").mouseover(function () {
var imgNorth = document.getElementById('north');
imgNorth.style.width = '14px';
imgNorth.style.height = '7px';
var showNorthDiv = document.getElementById('showNorthDiv');
showNorthDiv.style.display = 'block';
showNorthDiv.innerHTML = '点击移向北';
});
$("#north").mouseout(function () {
var imgNorth = document.getElementById('north');
imgNorth.style.width = '13px';
imgNorth.style.height = '6px';
var showNorthDiv = document.getElementById('showNorthDiv');
showNorthDiv.style.display = 'none';
});
$("#south").mouseover(function () {
var imgSouth = document.getElementById('south');
imgSouth.style.width = '14px';
imgSouth.style.height = '7px';
var showSouthDiv = document.getElementById('showSouthDiv');
showSouthDiv.style.display = 'block';
showSouthDiv.innerHTML = '点击移向南';
});
$("#south").mouseout(function () {
var imgSouth = document.getElementById('south');
imgSouth.style.width = '13px';
imgSouth.style.height = '6px';
var showSouthDiv = document.getElementById('showSouthDiv');
showSouthDiv.style.display = 'none';
});
$("#west").mouseover(function () {
var imgWest = document.getElementById('west');
imgWest.style.width = '7px';
imgWest.style.height = '14px';
var showWestDiv = document.getElementById('showWestDiv');
showWestDiv.style.display = 'block';
showWestDiv.innerHTML = '点击移向西';
});
$("#west").mouseout(function () {
var imgWest = document.getElementById('west');
imgWest.style.width = '6px';
imgWest.style.height = '13px';
var showWestDiv = document.getElementById('showWestDiv');
showWestDiv.style.display = 'none';
});
$("#east").mouseover(function () {
var imgEast = document.getElementById('east');
imgEast.style.width = '7px';
imgEast.style.height = '14px';
var showEastDiv = document.getElementById('showEastDiv');
showEastDiv.style.display = 'block';
showEastDiv.innerHTML = '点击移向东';
});
$("#east").mouseout(function () {
var imgEast = document.getElementById('east');
imgEast.style.width = '6px';
imgEast.style.height = '13px';
var showEastDiv = document.getElementById('showEastDiv');
showEastDiv.style.display = 'none';
});
$(".level").css("border-radius", "5px 5px 0 0");
$(".translation").css("border-radius", "5px 5px 0 0");
$(".scale").css("border-radius", "5px 5px 0 0");
});
</script>
<style type="text/css">
div.level
{
background:rgb(200,205,210);
width:70px;
height:25px;
position:absolute;
bottom:0px;
cursor:pointer;
font-weight:800;
font-size:15px;
text-align:center;
box-shadow:10px 0 10px rgba(198, 198, 198, .5);
}
div.translation
{
text-align:center;
background:rgb(200,205,210);
width:70px;
height:25px;
position:absolute;
bottom:0px;
cursor:pointer;
font-weight:800;
font-size:15px;
box-shadow:10px 0 10px rgba(198, 198, 198, .5);
}
div.scale
{
text-align:center;
background:rgb(200,205,210);
width:253px;
height:25px;
position:absolute;
bottom:0px;
cursor:pointer;
font-weight:800;
font-size:15px;
box-shadow:10px 0 10px rgba(198, 198, 198, .5);
}
div.levelTool
{
border-radius:5px 5px 0 0;
text-align:center;
background:rgb(200,205,210);
width:70px;
height:195px;
display:none;
position: fixed;
bottom: 25px;
}
div.translationTool
{
position: fixed;
bottom: 25px;
text-align:center;
background:rgb(200,205,210);
width:70px;
height:50px;
display:none;
border-radius:5px 5px 0 0;
}
div.scaleTool
{
position: fixed;
bottom: 25px;
text-align:center;
background:rgb(200,205,210);
width:253px;
height:50px;
display:none;
border-radius:5px 5px 0 0;
}
div.levelPanel
{
width:70px;
float:left;
height:215px;
position:relative
}
div.translationPanel
{
width:70px;
float:left;
height:75px;
margin-top:140px;
position:relative
}
div.scalePanel
{
width:253px;
float:left;
height:75px;
margin-top:140px;
position:relative
}
div.allTool
{
position:absolute;
bottom:0px;
}
#levelDiv_0,#levelDiv_1, #levelDiv_2 ,#levelDiv_3, #levelDiv_4, #levelDiv_5, #levelDiv_6, #levelDiv_7, #levelDiv_8, #levelDiv_9, #levelDiv_10
{
width:18px;
height:8px;
border:solid 1px black;
margin: auto;
border-radius:2px 2px 2px 2px;
}
</style>
<%--底部工具栏--%>
<div class="allTool">
<div class="levelPanel">
<div class="levelTool">
<div style="width:20px;height:16px;margin:auto;margin-top:10px;margin-bottom:3px;">
<img alt="" src="../Images/public/Enlarge.png" id="enlarge" style="margin:auto;width:18px;height:15px;cursor:pointer;" />
</div>
<div id="levelDiv_10" class="levelDiv"></div>
<div id="levelDiv_9" class="levelDiv"></div>
<div id="levelDiv_8" class="levelDiv"></div>
<div id="levelDiv_7" class="levelDiv"></div>
<div id="levelDiv_6" class="levelDiv"></div>
<div id="levelDiv_5" class="levelDiv"></div>
<div id="levelDiv_4" class="levelDiv"></div>
<div id="levelDiv_3" class="levelDiv"></div>
<div id="levelDiv_2" class="levelDiv"></div>
<div id="levelDiv_1" class="levelDiv"></div>
<div id="levelDiv_0" class="levelDiv"></div>
<div style="width:20px;height:16px;margin:auto;margin-top:3px;">
<img alt="" src="../Images/public/Narrow.png" id="narrow" style="margin:auto;width:18px;height:15px;cursor:pointer;" />
</div>
<div id="showEnlargeDiv" style="position: absolute; background-color: white; border: 1px solid black;width:32px;height:17px;top:25px;margin-left:40px;display:none;"></div>
<div id="showNarrowDiv" style="position: absolute; background-color: white; border: 1px solid black;width:32px;height:17px;bottom:20px;margin-left:40px;display:none;"></div>
</div>
<div class="level" id="levelId">缩放级别</div>
</div>
<div class="translationPanel">
<div class="translationTool">
<div style="position: absolute;width:36px;height:36px;top:6px;left:15px;">
<%--上北--%>
<div style="width:14px;height:7px;margin:auto;">
<img alt="" src="../Images/public/top.png" id="north" style="margin:auto;width:13px;height:6px;cursor:pointer;" />
</div>
<%--下南--%>
<div style="position: absolute;width:14px;height:7px;bottom:0px;left:10px;">
<img alt="" src="../Images/public/bottom.png" id="south" style="margin:auto;width:13px;height:6px;cursor:pointer;" />
</div>
<%--左西--%>
<div style="position: absolute;width:7px;height:14px;top:10px;">
<img alt="" src="../Images/public/left.png" id="west" style="margin:auto;width:6px;height:13px;cursor:pointer;" />
</div>
<%--右东--%>
<div style="position: absolute;width:7px;height:14px;right:0px;top:10px;">
<img alt="" src="../Images/public/right.png" id="east" style="margin:auto;width:6px;height:13px;cursor:pointer;" />
</div>
</div>
<div id="showNorthDiv" style="position: absolute; background-color: white; border: 1px solid black;width:65px;height:17px;top:15px;margin-left:30px;display:none;"></div>
<div id="showSouthDiv" style="position: absolute; background-color: white; border: 1px solid black;width:65px;height:17px;top:30px;margin-left:40px;display:none;"></div>
<div id="showWestDiv" style="position: absolute; background-color: white; border: 1px solid black;width:65px;height:17px;top:27px;margin-left:20px;display:none;"></div>
<div id="showEastDiv" style="position: absolute; background-color: white; border: 1px solid black;width:65px;height:17px;top:27px;margin-left:45px;display:none;"></div>
</div>
<div class="translation" id="translationId">平移</div>
</div>
<div class="scalePanel">
<div class="scaleTool" >
<div style="height:20px;margin-left:20px;margin-top:20px;" id="scalebar"></div>
</div>
<div class="scale" id="scaleId">比例尺</div>
</div>
</div>
<script type="text/javascript">
require([
"esri/map",
"esri/toolbars/draw",
"esri/toolbars/edit",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/FeatureLayer",
"esri/dijit/Scalebar",
"esri/dijit/OverviewMap",
"esri/graphic",
"dojo/_base/connect",
"esri/geometry/Geometry",
"esri/geometry/Extent",
"esri/geometry/Point",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/SpatialReference",
"esri/Color",
"esri/symbols/Font",
"esri/InfoTemplate",
"esri/symbols/PictureMarkerSymbol",
"esri/tasks/FeatureSet",
"esri/tasks/BufferParameters",
"esri/tasks/GeometryService",
"esri/toolbars/navigation",
"dojo/_base/array",
"esri/symbols/TextSymbol",
"dojo/domReady!",
"esri/tasks/QueryTask",
"esri/tasks/query",
"dijit/Toolbar",
"dojo/dom",
"dojo/on", //用于绑定事件的模块
"dojox/layout/ResizeHandle"
],
function (Map, Draw, Edit, ArcGISTiledMapServiceLayer, FeatureLayer, Scalebar, OverviewMap, Graphic, connect, Geometry, Extent, Point, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, SpatialReference, Color, Font, InfoTemplate, PictureMarkerSymbol, FeatureSet, BufferParameters, GeometryService, Navigation, arrayUtils, TextSymbol, domReady, QueryTask, query, Toolbar, dom, on, ResizeHandle) {
var map = new Map("mapDiv", { logo: false, zoom: 5, maxZoom: 7, minZoom: 0 });
var HiddenValue = $("#hfAreaCode").val() + "Map";
var layerUrl = "http://gis.cqzhly.cn:8443/server/rest/services/" + HiddenValue + "/MapServer";
var layer = new ArcGISTiledMapServiceLayer(layerUrl);
map.addLayer(layer);
//添加比例尺
dojo.connect(map, "onLoad", function () {
var scalebar = new esri.dijit.Scalebar({
map: map, //地图对象
//attachTo: "bottom-center",
scalebarStyle: "line", //line 比例尺样式类型
scalebarUnit: "metric"//显示地图的单位，这里是km
}, dojo.byId("scalebar"));
})
//上北
$("#north").click(function () {
map.panUp();
});
//下南
$("#south").click(function () {
map.panDown();
});
//左西
$("#west").click(function () {
map.panLeft();
});
//右东
$("#east").click(function () {
map.panRight();
});
//放大
$("#enlarge").click(function () {
var level = parseInt(map.getLevel());
if (level <= 10) {
for (var j = 0; j <= level + 1; j++) {
$("#levelDiv_" + j).css("background-color", "rgb(103,109,155)");
}
map.setLevel(level + 1);
}
});
//缩小
$("#narrow").click(function () {
var currExtent = map.extent; //获取地图的当前范围
var level = parseInt(map.getLevel());
if (level > 0) {
for (var j = level; j <= 10; j++) {
$("#levelDiv_" + j).css("background-color", "rgb(245,246,246)");
}
map.setLevel(level - 1);
}
});
$(".levelDiv").click(function () {
var val = $(this).attr("id");
var array = val.split('_');
var level = parseInt(map.getLevel());
var levelArray = parseInt(array[1])
if (level <= levelArray) {
for (var k = 0; k <= levelArray; k++) {
$("#levelDiv_" + k).css("background-color", "rgb(103,109,155)"); //放大
}
map.setLevel(level + (levelArray - level));
} else {
for (var k = levelArray; k <= 10; k++) {
$("#levelDiv_0").css("background-color", "rgb(103,109,155)"); //缩小
$("#levelDiv_" + k).css("background-color", "rgb(245,246,246)"); //缩小
}
map.setLevel(level - (level - levelArray));
}
})
if (document.addEventListener) {
document.addEventListener('DOMMouseScroll', scrollFunc, false);
}
document.onmousewheel = scrollFunc; //IE/Opera/Chrome
function scrollFunc(e) {
e = e || window.event;
if (e.wheelDelta) { //判断E/Opera/Chrome滑轮事件
if (e.wheelDelta > 0) { //当滑轮向上滚动时 放大
enlargeMonitor();
}
if (e.wheelDelta < 0) { //当滑轮向下滚动时 缩小
narrowMonitor();
}
} else if (e.detail) { //Firefox滑轮事件
if (e.detail > 0) { //当滑轮向上滚动时 放大
enlargeMonitor();
}
if (e.detail < 0) { //当滑轮向下滚动时 缩小
narrowMonitor();
}
}
}
//滑轮向上滚动时 放大监听
function enlargeMonitor() {
var val, mVal;
for (var m = 0; m <= 10; m++) {
val = $("#levelDiv_" + m).css("background-color");
if (val == "rgb(245,246,246)" || val == "transparent") {
mVal = m;
break;
}
}
var level = parseInt(map.getLevel()) + 1;
//console.log("levelArray" + levelArray);
for (var n = 0; n <= level; n++) {
$("#levelDiv_" + n).css("background-color", "rgb(103,109,155)"); //放大
}
if (val == "transparent") {
map.setLevel(level);
} else {
//var valDiv = $("#levelDiv_" + mVal).attr("id");
//var array = valDiv.split('_');
//levelArray = parseInt(array[1]) - 1;
map.setLevel(level + (level - (mVal - 1)));
}
}
//滑轮向下滚动时 缩小监听
function narrowMonitor() {
var val, mVal;
for (var m = 10; m >= 0; m--) {
val = $("#levelDiv_" + m).css("background-color");
if (val == "rgb(103,109,155)") {
mVal = m;
break;
}
}
var level = parseInt(map.getLevel());
for (var n = level; n <= 10; n++) {
$("#levelDiv_" + n).css("background-color", "rgb(245,246,246)"); //缩小
}
if (val == "transparent" || level == 0) {
$("#levelDiv_0").css("background-color", "rgb(103,109,155)");
map.setLevel(0);
} else {
map.setLevel(level - (mVal - level));
}
}
})
</script>
5495
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
