脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-Arcgis for Javascript实现两个地图的联动,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 看完了效果,下面说说实现的具体功能。1、地图的联动:当地图1(2)的范围发生变化时,地图2(1)的地图也随之发生变化,且地图2(1)与地图1(2)是相同的显示范围;2、鼠标的联动:当鼠标在地图1(2)上移动时,在地图2(1)相同位置显示鼠标指针位置。
上面,分析了功能,下面说说实现思路。1、地图联动:当地图1(2)范围发生变化时,获取地图1(2)的范围,并设置2(1)的范围为地图1(2)的范围;2、鼠标的联动:鼠标在地图1(2)上移动时,获取鼠标的地图点坐标,并在地图2(1)上显示鼠标。
本实例中实现了地图1到地图2的联动,地图2到地图1的联动还没实现,后续会继续更新,还望继续关注lzugis CSDN博客,希望给大家带来更多的分享。具体的实现代码如下:
[htML] view plaincopy在CODE上查看代码片派生到我的代码片
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="inITial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>Simple Map</title>
<link rel="stylesheet" href="https://localhost/arcgis_js_api/library/3.9/3.9/js/esri/css/esri.css">
<style>
html, body, #map1,#map2 {
height: 100%;
margin: 0;
padding: 0;
}
body {
background-color: #FFF;
overflow: hidden;
font-family: "Trebuchet MS";
}
#map1,#map2{
float:left;
width: 49.5%;
}
#map1{
border-right: 2px solid #999;
}
</style>
<script src="https://localhost/arcgis_js_api/library/3.9/3.9/init.js"></script>
<script>
VAR map1,map2;
require([
"esri/map",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/GraphicsLayer",
"esri/graphic",
"esri/symbols/PictureMarkerSymbol",
"dojo/domReady!"],
function(Map, Tiled, GraphicsLayer, Graphic, PictureMarkerSymbol) {
map1 = new Map("map1",{LOGo:false});
map2 = new Map("map2",{logo:false});
var tiled1 = new Tiled("https://localhost:6080/arcgis/rest/services/chinamap/MapServer");
var tiled2 = new Tiled("https://localhost:6080/arcgis/rest/services/chinamap/MapServer");
var mouseLayer = new GraphicsLayer();
map1.addLayer(tiled1);
map2.addLayer(tiled2);
map2.addLayer(mouseLayer);
map1.setLevel(4);
map2.setLevel(4);
map1.on("extent-change",function(){
map2.setExtent(map1.extent);
});
map1.on("mouse-move",function(evt){
mouseLayer.clear();
var pms = new PictureMarkerSymbol("cursor.png",22,24);
var graphic = new Graphic(evt.mapPoint,pms);
mouseLayer.add(graphic);
});
});
</script>
</head>
<body>
<p id="map1"></p>
<p id="map2"></p>
</body>
</html>
觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!
以上是脚本宝典为你收集整理的javascript代码实例教程-Arcgis for Javascript实现两个地图的联动全部内容,希望文章能够帮你解决javascript代码实例教程-Arcgis for Javascript实现两个地图的联动所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。