生活随笔
收集整理的這篇文章主要介紹了
arcgis api 动态显示鼠标位置经纬度
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
動態(tài)顯示鼠標位置經(jīng)緯度，主要是監(jiān)聽鼠標移動事件 “mouse-move”，獲取經(jīng)緯度信息，在當前鼠標位置用文本標注出來即可。添加了個監(jiān)聽鼠標點擊事件 “mouse-down”，在鼠標點擊后才開始監(jiān)聽鼠標移動事件。
實現(xiàn)效果：
代碼較為簡單，注釋里有，復(fù)制可直接打開：
<!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實現(xiàn)動態(tài)顯示當前鼠標經(jīng)緯度
</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() })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("開始監(jiān)聽鼠標點擊和移動事件")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 = "經(jīng)度："+ 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>
總結(jié)
以上是生活随笔為你收集整理的arcgis api 动态显示鼠标位置经纬度的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
