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

俗话说：爱美之心。人皆有之。

是的。没错，即使我仅仅是一个做地图的，我也希望自己的地图看起来好看一点。

在本文，给大家讲讲在Arcgis for javascript下怎样自己定义鼠标样式。

首先。说几个状态。1、鼠标在地图上面移动；2、按住鼠标左键拖拽鼠标。3、拉框放大地图；4、拉框缩小地图。

鼠标在地图上面时为；

按住鼠标拖拽地图时为。

拉框放大地图时为；

拉框缩小地图时为。

接下来，说说我的实现思路。

第一种状态，在地图载入完毕时出现，代码：

 map.on("load",function(){map.setMapCursor("url(cursor/default.cur),auto");});

另外一种状态，地图拖拽时出现，此时。须要分别监听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");
});

第三种和第四种状态时。须要定义Navigation，例如以下：

var navToolbar = new esri.toolbars.Navigation(map);

这两种状态在点击button时触发，代码例如以下：

            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);});

说明：在触发这两种状态时，还要同一时候设置mouse-drag-start触发时的状态。

最后，操作结束后一切回归原始状态。代码例如以下：

            navToolbar.on("extent-history-change", function(){navToolbar.deactivate();map.on("mouse-drag-start",function(){map.setMapCursor("url(cursor/pointer.cur),auto");});});

这样，在上述四种状态下的鼠标状态时由我们自己控制样式的，以下是完整代码：

<!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>

源代码下载

转载于:https://www.cnblogs.com/blfshiye/p/5137050.html

Arcgis for javascript不同的状态下自己定义鼠标样式相关推荐

Arcgis for javascript不同的状态下自定义鼠标样式
俗话说:爱美之心,人皆有之.是的,没错,即使我只是一个做地图的,我也希望自己的地图看起来好看一点.在本文,给大家讲讲在Arcgis for javascript下如何自定义鼠标样式. 首先,说几个状态 ...
Javascript如何判断按下的是鼠标左键还是右键
Javascript如何判断按下的是鼠标左键还是右键一.需求:在页面上某个元素上点击鼠标右键,弹出二级悬窗(右键菜单). 二.解决技术问题:如何监听鼠标右键事件三.解决方案: 1.使用jquer ...
Visual Studio 2017错误：无法启动程序，在当前状态下操作不合法
本文翻译自:Visual Studio 2017 error: Unable to start program, An operation is not legal in the current st ...
ArcGIS For JavaScript API 默认参数
"esri.config"的是在1.3版中的的"esriConfig"的替代品.如果您使用的是1.2或更低的版本,您应该参阅默认API v1.2和更低的配置.对 ...
ArcGis for javascript 绘制线！！！
效果图在线预览前言项目中需要使用 ArcGis 来实现地图功能,至于为什么不适用百度.高德,是因为据说 ArcGis 定位会准一点.初次接触 Arcgis for javascript,踩坑之路 ...
Angular(4)中加载Arcgis for JavaScript地图
背景近期我司项目的需要,采用Angular(4)+SpringBoot前后端分离的架构.并且在需要在项目中实现Arcgis地图. 本人之前有过Arcgis for JavaScript的小小填坑经验 ...
用一顿简餐来解释JavaScript中的状态
by Kevin Kononenko 凯文·科诺年科(Kevin Kononenko) 用一顿简餐来解释JavaScript中的状态 (State in JavaScript explained by ...
js-jquery-禁用默认事件未登录状态下不允许操作显示“请先登录”@LesleyZhangLu
js-jquery-禁用默认事件未登录状态下不允许操作显示"请先登录"@LesleyZhangLu js-jquery-禁用默认事件在项目中引入layer.js和jquery ...
在ROMMON状态下恢复IOS的方法
对于网络工程师来说,不小心把IOS删掉或者升级IOS失败,重起后进ROMMON(ROMMON状态是ROM MONITOR的缩写)状态,是比较常见的事.路由器进入ROMMON状态,不能进行正常的路由转发 ...

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

Arcgis for javascript不同的状态下自己定义鼠标样式相关推荐

最新文章

热门文章