arcgis for js 开发-地图对象操作

最新推荐文章于 2024-08-03 17:05:14 发布

chiguozhu9463

最新推荐文章于 2024-08-03 17:05:14 发布

阅读量265

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/1764582/blog/1843633

版权

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>第一个地图应用</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css">
<script src="https://js.arcgis.com/3.17/"></script>

 
     <style type="text/css">
         .MapClass
         {  width:900px;
              height:600px;
              border:1px solid #000;
             
             }
     </style>
    <script type="text/javascript">
        dojo.require("esri.map");//块加载地图组件
        dojo.addOnLoad(function () 
        {
            var MyMap = new esri.Map("MyMapDiv",{
                logo : false,//去除地图水印logo
                center : [116.4,39.9],//初始化地图位置
                zoom : 6 //初始化显示级别
            });
            MyMap.on("load",function(){//地图对象加载完成后执行该方法
                MyMap.on("mouse-move", showCoordinates); //绑定鼠标在地图上移动事件
                MyMap.on("zoom-end", showCoordinates);//绑定地图缩放事件
            });
            var MyTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer
            ("http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer");//瓦片地图服务地址
             MyMap.addLayer(MyTiledMapServiceLayer);
             
             document.getElementById("checkboxID").onclick = function(){//绑定checkbox点击事件
                if(document.getElementById("checkboxID").checked){
                  MyTiledMapServiceLayer.setVisibility(true);//显示图层方法
               }else{
                  MyTiledMapServiceLayer.setVisibility(false);//隐藏图层方法
               }
             }
            function showCoordinates(evt){
            console.info(evt);
                var mp;
                if(evt.type == 'mousemove'){ 
                  mp = evt.mapPoint;
                 document.getElementById("showCoordinatesInfo").innerHTML = ("<span ><b>经度：</b>" + (mp.x).toFixed(6)) + ", <b>纬度：</b>" + ((mp.y).toFixed(6)) + ", <b>比例尺：</b>1:" + (MyMap.getScale())+"</span>";
                }else{
                 mp =MyMap.toMap(evt.anchor);
                 document.getElementById("showCoordinatesInfo").innerHTML = ("<span ><b>经度：</b>" + (mp.x).toFixed(6)) + ", <b>纬度：</b>" + ((mp.y).toFixed(6)) + ", <b>比例尺：</b>1:" + (MyMap.getScale())+"</span>";
                }
            }
         }
        );
    </script>
  </head>
  <body class="tundra">
    <input id="checkboxID" type="checkbox" checked value="1" name="check">图层开关</input>
    <div id="showCoordinatesInfo"></div>
    <div id="MyMapDiv"  class="MapClass"></div>
  </body>
</html>

转载于:https://my.oschina.net/u/1764582/blog/1843633

chiguozhu9463

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
arcgis for js 开发-地图对象操作

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>第一个地图应用</title&gt...
复制链接

扫一扫