當(dāng)前位置：首頁(yè) > 前端技术 > javascript >内容正文

javascript

Arcgis for javascript不同的状态下自定义鼠标样式

發(fā)布時(shí)間：2024/7/19 javascript 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 Arcgis for javascript不同的状态下自定义鼠标样式小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

俗話說(shuō)：愛美之心，人皆有之。是的，沒錯(cuò)，即使我只是一個(gè)做地圖的，我也希望自己的地圖看起來(lái)好看一點(diǎn)。在本文，給大家講講在Arcgis for javascript下如何自定義鼠標(biāo)樣式。

首先，說(shuō)幾個(gè)狀態(tài)。1、鼠標(biāo)在地圖上面移動(dòng)；2、按住鼠標(biāo)左鍵拖拽鼠標(biāo)；3、拉框放大地圖；4、拉框縮小地圖。

鼠標(biāo)在地圖上面時(shí)為；

按住鼠標(biāo)拖拽地圖時(shí)為；

拉框放大地圖時(shí)為；

拉框縮小地圖時(shí)為。

接下來(lái)，說(shuō)說(shuō)我的實(shí)現(xiàn)思路。

第一種狀態(tài)，在地圖加載完成時(shí)出現(xiàn)，代碼：

map.on("load",function(){map.setMapCursor("url(cursor/default.cur),auto");});第二種狀態(tài)，地圖拖拽時(shí)出現(xiàn)，此時(shí)，需要分別監(jiān)聽map的mouse-drag-start和mouse-drag-end事件，具體代碼如下：

map.on("mouse-drag-start",function(){map.setMapCursor("url(cursor/pointer.cur),auto"); }); map.on("mouse-drag-end",function(){map.setMapCursor("url(cursor/default.cur),auto"); });第三種和第四種狀態(tài)時(shí)，需要定義Navigation，如下：

var navToolbar = new esri.toolbars.Navigation(map);這兩種狀態(tài)在點(diǎn)擊按鈕時(shí)觸發(fā)，代碼如下：

on(dom.byId("zoom_in"), "click", function(event){//拉框放大map.setMapCursor("url(cursor/zoom-in.cur),auto");map.on("mouse-drag-start",function(){map.setMapCursor("url(cursor/zoom-in.cur),auto");});navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);});on(dom.byId("zoom_out"), "click", function(event){//拉框縮小map.setMapCursor("url(cursor/zoom-out.cur),auto");map.on("mouse-drag-start",function(){map.setMapCursor("url(cursor/zoom-out.cur),auto");});navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);});說(shuō)明：在觸發(fā)這兩種狀態(tài)時(shí)，還要同時(shí)設(shè)置mouse-drag-start觸發(fā)時(shí)的狀態(tài)。

最后，操作結(jié)束后一切回歸原始狀態(tài)，代碼如下：

navToolbar.on("extent-history-change", function(){navToolbar.deactivate();map.on("mouse-drag-start",function(){map.setMapCursor("url(cursor/pointer.cur),auto");});});這樣，在上述四種狀態(tài)下的鼠標(biāo)狀態(tài)時(shí)由我們自己控制樣式的，下面是完整代碼：

<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/><title>Simple Map</title><link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.9/3.9/js/esri/css/esri.css"><style>html, body, #map {height: 100%;margin: 0;padding: 0;}body {background-color: #FFF;overflow: hidden;font-family: "Trebuchet MS";}#map_ctrl{z-index: 99;position: absolute;top: 20pt;right: 10pt;background: #fff;}.button{padding: 3px;background: #eee;text-align: center;font-size: 12px;font-family: "微軟雅黑";border: 1px solid #eee;}.button:hover{background: #ccc;border: 2px solid #ccc;cursor: pointer;}</style><script src="http://localhost/arcgis_js_api/library/3.9/3.9/init.js"></script><script>var map;require(["esri/map","esri/layers/ArcGISTiledMapServiceLayer","esri/layers/GraphicsLayer","esri/graphic","esri/symbols/PictureMarkerSymbol","dojo/on","dojo/dom","dojo/domReady!"],function(Map, Tiled, GraphicsLayer, Graphic, PictureMarkerSymbol,on,dom) {map = new Map("map",{logo:false});var tiled1 = new Tiled("http://localhost:6080/arcgis/rest/services/chinamap/MapServer");var mouseLayer = new GraphicsLayer();map.addLayer(tiled1);map.setLevel(4);map.on("load",function(){map.setMapCursor("url(cursor/default.cur),auto");});map.on("mouse-drag-start",function(){map.setMapCursor("url(cursor/pointer.cur),auto");});map.on("mouse-drag-end",function(){map.setMapCursor("url(cursor/default.cur),auto");});var navToolbar = new esri.toolbars.Navigation(map);on(dom.byId("zoom_in"), "click", function(event){//拉框放大map.setMapCursor("url(cursor/zoom-in.cur),auto");map.on("mouse-drag-start",function(){map.setMapCursor("url(cursor/zoom-in.cur),auto");});navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);});on(dom.byId("zoom_out"), "click", function(event){//拉框縮小map.setMapCursor("url(cursor/zoom-out.cur),auto");map.on("mouse-drag-start",function(){map.setMapCursor("url(cursor/zoom-out.cur),auto");});navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);});navToolbar.on("extent-history-change", function(){navToolbar.deactivate();map.on("mouse-drag-start",function(){map.setMapCursor("url(cursor/pointer.cur),auto");});});});</script> </head><body> <div id="map"><div id="map_ctrl"><a id="zoom_in" class="button">拉框放大</a><a id="zoom_out" class="button">拉框縮小</a></div> </div> </body> </html>
源碼下載

轉(zhuǎn)載于:https://www.cnblogs.com/lzugis/p/6539888.html

總結(jié)

以上是生活随笔為你收集整理的Arcgis for javascript不同的状态下自定义鼠标样式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： jQuery之防止【冒泡事件】，阻止默认
下一篇： java实现可有括号的android计算