arcgis api 动态显示鼠标位置经纬度

动态显示鼠标位置经纬度，主要是监听鼠标移动事件 “mouse-move”，获取经纬度信息，在当前鼠标位置用文本标注出来即可。添加了个监听鼠标点击事件 “mouse-down”，在鼠标点击后才开始监听鼠标移动事件。
实现效果：

代码较为简单，注释里有，复制可直接打开：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" /><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>arcgis api实现动态显示当前鼠标经纬度</title><link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css"><style>body,html {margin: 0;padding: 0;width: 100%;height: 100%;font-family: Arial;}#map {width: 100%;height: 100%;margin: 0;padding: 0;border: 0px dashed black;background-color: rgb(0, 38, 48);}</style>
</head>
<body><button type="button" onclick="mouseStart()">开始</button><button type="button" onclick="mouseStop()">停止</button><div id="map"></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/@turf/turf@5/turf.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://js.arcgis.com/3.20"></script>
<script type="text/javascript">var map, mouseStart, mouseStop, mouseDown, mouseMove;require(["esri/map",'esri/Color','esri/geometry/Point',"esri/geometry/Polyline","esri/symbols/TextSymbol","esri/layers/GraphicsLayer","esri/layers/ArcGISTiledMapServiceLayer",'esri/graphic','esri/symbols/SimpleMarkerSymbol','esri/symbols/SimpleLineSymbol',"esri/geometry/Extent","dojo/domReady!"], function(Map,Color,Point,Polyline,TextSymbol,GraphicsLayer,ArcGISTiledMapServiceLayer,Graphic,SimpleMarkerSymbol,SimpleLineSymbol,Extent) {//地图范围var mapExtent = new Extent({xmax: 113.799760210539,xmin: 106.57095767482662,ymax: 20.459116202966324,ymin: 18.27952992162579,spatialReference: {wkid: 4326}})map = new Map("map", {extent: mapExtent,sliderStyle: "small",logo: false,});map.on('load', function () {map.hideZoomSlider()map.hidePanArrows()map.disableDoubleClickZoom() //禁用双击缩放})//arcgis 在线切片底图图var myTileLayer = new ArcGISTiledMapServiceLayer("http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer");map.addLayer(myTileLayer)var graphicLayer = new GraphicsLayer() //绘制图层map.addLayer(graphicLayer)var markerSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 6, //点样式new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([0, 0, 0]), 1),new Color([47, 79, 79, 0.5]))//开始监听鼠标点击和移动事件mouseStart = function() {console.log("开始监听鼠标点击和移动事件")mouseDown = map.on("mouse-down", function() { //鼠标点击事件mouseMove = map.on("mouse-move", function(evt) { //鼠标移动事件let lon = evt.mapPoint.getLongitude().toFixed(4) //当前数据经度let lat = evt.mapPoint.getLatitude().toFixed(4)  //当前鼠标纬度let point = new Point(lon, lat)graphicLayer.clear()  //清除上次移动数据let pointGraphic = new Graphic(point, markerSymbol)//鼠标位置graphicLayer.add(pointGraphic) let text = "经度："+ lon + " 纬度：" + lat //标注内容let textSymbol = new TextSymbol(text) //标注实例textSymbol.setOffset(0, 5) //标注偏移let textGraphic = new Graphic(point, textSymbol) //鼠标位置即标注点graphicLayer.add(textGraphic) //添加标注到地图})})}//移除鼠标单击和移动事件mouseStop = function() {console.log("移除鼠标点击和移动事件")mouseDown.remove()mouseMove.remove()}});
</script>
</html>

arcgis api 动态显示鼠标位置经纬度相关推荐

百度地图Geolocation的getStatus状态值(百度API获取当前位置[经纬度])
//关于状态码 //BMAP_STATUS_SUCCESS 检索成功.对应数值"0". //BMAP_STATUS_CITY_LIST 城市列表.对应数值"1" ...
使用HTML5定位的经纬度来实现ArcGIS API for js 中的定位
文章目录前言一.arcgis api定位二.HTML5+Arcgis JS实现定位 2.1 利用HTML5获取当前位置的经纬度 2.2 点击按钮执行定位 2.3 全部代码总结前言定位功能的 ...
ArcGIS API for Silverlight 实现修改地图上的工程点位置
ArcGIS API for Silverlight 实现修改地图上的工程点位置原文:ArcGIS API for Silverlight 实现修改地图上的工程点位置 #region 处理工程点点击 ...
html调用腾讯地图定位当前位置,vue web项目中调用腾讯地图API获取当前位置的经纬度...
vue web项目中调用腾讯地图API获取当前位置的经纬度 vue web项目中调用腾讯地图API获取当前位置的经纬度在main.js 中添加一下代码 import axios from 'axio ...
arcgis api 4.x加载天地图（经纬度和墨卡托投影）（一篇文章搞透天地图加载）
主要说明: 1.天地图影像分两种经纬度投影(WKID:4490)和墨卡托投影两种,arcgis默认为墨卡托坐标系(3857),可以切换二维/三维,加载经纬度切片时view需要设置wkid:4326 2 ...
Win32 API 显示鼠标坐标位置
在窗口过程添加如下代码:如果还不会新建Win32项目,参阅Petzold的书: case WM_RBUTTONDOWN :hdc=GetDC(hwnd);x = GET_X_LPARAM(lParam ...
创建类（点击获得位置信息）—ArcGIS API for JavaScript
不知道大家有没有这种体验,我们开始学web开发的时候,会把HTML.JavaScript.CSS代码都堆叠在一个HTML文件中,慢慢地,随着代码量的增多,不同的代码堆叠在一起显得很乱,我们开始把htm ...
ROOT学习——跟随鼠标位置动态显示TH2切片(DynamicSlice.C)
显示动态切片的二维直方图是数据处理中常用的方法.本文根据ROOT官方教程DynamicSlice.C介绍如何制作显示动态切片并且高斯拟合. 首先通过Rannor函数对二维直方图进行填充,然后通过Add ...
ArcGIS API for Silverlight开发入门
ArcGIS API for Silverlight开发入门你用上3G手机了吗?你可能会说,我就是喜欢用nokia1100,ABCDEFG跟我都没关系.但你不能否认3G是一种趋势,最终我们每个人都 ...

arcgis api 动态显示鼠标位置经纬度

arcgis api 动态显示鼠标位置经纬度相关推荐

最新文章

热门文章