俗话说:爱美之心。人皆有之。
是的。没错,即使我仅仅是一个做地图的,我也希望自己的地图看起来好看一点。
在本文,给大家讲讲在下怎样自己定义鼠标样式。
首先。说几个状态。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"); }); });这样,在上述四种状态下的鼠标状态时由我们自己控制样式的,以下是完整代码:
Simple Map