Arcgis for Javascript实现两个地图的联动
生活随笔
收集整理的這篇文章主要介紹了
Arcgis for Javascript实现两个地图的联动
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
今天在看天地圖的時候，有一個多時相的地圖顯示功能，感覺很好玩，作為技術控的我晚上十點下班到家便是快十一點了，本來應該是睡覺了，但是，激動地心情不能平靜，哎，算了，本著不熬夜的程序員不是好程序員的原則，熬了會夜終于看到了想要的效果，便迫不及待的拿出來與大家分享，首先看看天地圖的效果與我的效果：
天地圖多時相效果
天地圖多時相的鏈接：http://www.tianditu.cn/multidate/multidate.html?ll=116.38,39.92&l=11
自己做的效果
看完了效果，下面說說實現的具體功能。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博客，希望給大家帶來更多的分享。具體的實現代碼如下：
<!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="http://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="http://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("http://localhost:6080/arcgis/rest/services/chinamap/MapServer");var tiled2 = new Tiled("http://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> <div id="map1"></div> <div id="map2"></div> </body> </html>轉載于:https://www.cnblogs.com/lzugis/p/6539890.html
總結
以上是生活随笔為你收集整理的Arcgis for Javascript实现两个地图的联动的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java.lang.OutOfMemor
- 下一篇： VB API 之 第十一课 绘制矩形