zoukankan      html  css  js  c++  java

  • （转） Arcgis for Javascript实现两个地图的联动

    http://blog.csdn.net/gisshixisheng/article/details/40127895

    今天在看天地图的时候，有一个多时相的地图显示功能，感觉很好玩，作为技术控的我晚上十点下班到家便是快十一点了，本来应该是睡觉了，但是，激动地心情不能平静，哎，算了，本着不熬夜的程序员不是好程序员的原则，熬了会夜终于看到了想要的效果，便迫不及待的拿出来与大家分享，首先看看天地图的效果与我的效果：

    天地图多时相效果

    天地图多时相的链接：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博客，希望给大家带来更多的分享。具体的实现代码如下：

    [html] view plain copy
     
     print?
    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
    5.     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>  
    6.     <title>Simple Map</title>  
    7.     <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.9/3.9/js/esri/css/esri.css">  
    8.     <style>  
    9.         html, body, #map1,#map2 {  
    10.             height: 100%;  
    11.             margin: 0;  
    12.             padding: 0;  
    13.         }  
    14.         body {  
    15.             background-color: #FFF;  
    16.             overflow: hidden;  
    17.             font-family: "Trebuchet MS";  
    18.         }  
    19.         #map1,#map2{  
    20.             float:left;  
    21.              49.5%;  
    22.         }  
    23.         #map1{  
    24.             border-right: 2px solid #999;  
    25.         }  
    26.     </style>  
    27.     <script src="http://localhost/arcgis_js_api/library/3.9/3.9/init.js"></script>  
    28.     <script>  
    29.         var map1,map2;  
    30.         require([  
    31.             "esri/map",  
    32.             "esri/layers/ArcGISTiledMapServiceLayer",  
    33.             "esri/layers/GraphicsLayer",  
    34.             "esri/graphic",  
    35.             "esri/symbols/PictureMarkerSymbol",  
    36.             "dojo/domReady!"],  
    37.         function(Map, Tiled, GraphicsLayer, Graphic, PictureMarkerSymbol) {  
    38.             map1 = new Map("map1",{logo:false});  
    39.             map2 = new Map("map2",{logo:false});  
    40.             var tiled1 = new Tiled("http://localhost:6080/arcgis/rest/services/chinamap/MapServer");  
    41.             var tiled2 = new Tiled("http://localhost:6080/arcgis/rest/services/chinamap/MapServer");  
    42.             var mouseLayer = new GraphicsLayer();  
    43.             map1.addLayer(tiled1);  
    44.             map2.addLayer(tiled2);  
    45.             map2.addLayer(mouseLayer);  
    46.             map1.setLevel(4);  
    47.             map2.setLevel(4);  
    48.             map1.on("extent-change",function(){  
    49.                 map2.setExtent(map1.extent);  
    50.             });  
    51.             map1.on("mouse-move",function(evt){  
    52.                 mouseLayer.clear();  
    53.                 var pms = new PictureMarkerSymbol("cursor.png",22,24);  
    54.                 var graphic = new Graphic(evt.mapPoint,pms);  
    55.                 mouseLayer.add(graphic);  
    56.             });  
    57.         });  
    58.     </script>  
    59. </head>  
    60.   
    61. <body>  
    62. <div id="map1"></div>  
    63. <div id="map2"></div>  
    64. </body>  
    65. </html>  
  • 相关阅读:
    Cannot find module 'express'
    txt简单写入
    URLRewriter 伪静态配置Demo
    利用css的sticky特性实现固定首列其他列滚动
    金数据表单接口请求（php）
    Android应用app数据请求捕捉三步走
    go语言模块开发概念与cron定时事务模块的使用
    万维网的发明
    UEditor扩展又拍云图片存储功能实践
    Html5+移动端小应用分享（得见）
  • 原文地址：https://www.cnblogs.com/telwanggs/p/7281004.html
Copyright © 2011-2022 走看看