• ArcGIS api for javascript——加入地图并显示x,y坐标


    这个示例报告了用户在地图上悬停和拖拽鼠标的鼠标指针坐标。通过事件监听器来更新鼠标移到的x和y坐标。

    下行代码创建了地图:

    var map = new esri.Map("map");

    上面行中"Map"出现了三次。第一次(var map)是对象的名称,第二次 (esri.Map)是类的名称,第三次("map")是将包含地图的DIV的名称。

    这个示例加入一个ArcGISTiledMapServiceLayer到底图,表示一个 cachedArcGIS Server地图服务,但是也可以使用 ArcGISDynamicMapServiceLayer。这种方式接收的地图的范围是相同的。

    注意切片地图服务层的构造函数需要服务的REST端点的URL(http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer)。可以使用 Services Directory找到地图服务的URL。

    这两行代码增加了事件监听器到地图。一个监听器为了 onMouseMove,另外一个为了 onMouseDrag,但是他们都是调用函数showCoordinates:

    dojo.connect(map, "onMouseMove", showCoordinates);
    dojo.connect(map, "onMouseDrag", showCoordinates);

    这些事件都传递地图点坐标到showCoordinates函数。下列代码是函数如何获得坐标并写到"info"标签:

    var mp = evt.mapPoint;
    dojo.byId("info").innerHTML = mp.x + ", " + mp.y;

     1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
     2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
     3 <html>
     4   <head>
     5     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     6     <meta http-equiv="X-UA-Compatible" content="IE=7" /> 
     7     <title>Create Map Display Mouse Coordinate</title>
     8     <link rel="stylesheet" type="text/css" href="styles.css"
     9           href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/theme/tundra/tundra.css">
    10     <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6"></script>
    11     <script type="text/javascript">
    12         dojo.require("esri.map");
    13         function init(){
    14             var map = new esri.Map("map");
    15             dojo.connect(map,"onLoad",function(){
    16                 //地图加载后,监听到鼠标移动或拖动事件
    17                 dojo.connect(map,"onMouseMove",showCoordinates);
    18                 dojo.connect(map,"onMouseDrag",showCoordinates);
    19             });
    20             
    21             var tiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer(
    22                 "http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"
    23             );
    24             map.addLayer(tiledMapServiceLayer);
    25         }
    26         //显示坐标的回调函数,参数是evt
    27         function showCoordinates(evt){
    28             //从事件中获取mapPoint
    29             var mp = evt.mapPoint;
    30             //显示鼠标坐标
    31             dojo.byId("info").innerHTML = mp.x + "," + mp.y;
    32         }
    33         
    34         dojo.addOnLoad(init);
    35     </script>
    36   </head>
    37   
    38   <body class="tundra">
    39     <div id="map" style="position:relative;900px;height:600px;border:1px solid #000;">
    40         <span id="info" style="position:absolute;right:25px;bottom:5px;color:#000;z-index:50;"></span>
    41     </div>
    42   </body>
    43 </html>
  • 相关阅读:
    [BZOJ 1019][SHOI2008]汉诺塔(递推)
    [BZOJ 1018][SHOI2008]堵塞的交通traffic(线段树)
    [BZOJ 1017][JSOI2008]魔兽地图DotR(树形Dp)
    [BZOJ 1015][JSOI2008]星球大战starwar(并查集+离线)
    [BZOJ 1014][JSOI2008]火星人prefix(Splay+二分+hash)
    Vue脚手架创建项目目录详解
    Vue-cli3 vue.config.js配置详解
    Systemd指令大全
    CentOS7 常用命令集合
    Centos7虚拟机集群配置
  • 原文地址:https://www.cnblogs.com/xiaotian-222/p/6514454.html
Copyright © 2020-2023  润新知