Arcgis for javascript不同的状态下自己定义鼠标样式
JavaScript状态 for 自己 定义 不同 样式 鼠标
2023-09-14 09:10:10 时间
俗话说:爱美之心。人皆有之。
是的。没错,即使我仅仅是一个做地图的,我也希望自己的地图看起来好看一点。
在本文,给大家讲讲在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>
源代码下载
相关文章
- javascript 高级教程 视频_精通JavaScript
- javascript 基础_JavaScript高级编程
- 【说站】javascript中集合如何理解
- javascript html转换成markdown,如何使用Turndown使用JavaScript将HTML转换为Markdown[通俗易懂]
- JavaScript——入门知识
- Javascript childNodes用法
- JavaScript学习总结(二十)——Javascript非构造函数的继承详解编程语言
- RedMonk公布6月编程语言排行:JavaScript居榜首 Java和Python并列第二
- googlemap之javascript实现方法
- JavaScript中的事件教程
- Javascript常用运算符(Operators)-javascript基础教程
- javascript完整操作Table的增加行,删除行的列子大全
- 精通JavaScript中的正则表达式手机整理推荐
- javascript包裹节点提高效率
- Javascript面向对象(声明篇)
- JavaScript高级程序设计学习笔记js高级技巧
- 使用JavaScript实现对象匀速/变速运动的方法
- javascript判断机器是否联网的2种方法
- JavaScript动态创建div属性和样式示例代码
- 解析Javascript小括号“()”的多义性
- 利用noesis.Javascript开源组件.Net中执行javascript脚本
- 浅析JavaScript中的同名标识符优先级
- Javascript中的delete操作符详细介绍
- JavaScript中的对象的extensible属性介绍
- JavaScript中伪协议javascript:使用探讨
- 原生javascript获取元素样式
- Javascript控制input输入时间格式的方法