机械网站建设营销,企业宣传片常用背景音乐,美观网站建设哪家好,上海青浦区网站建设公司俗话说#xff1a;爱美之心#xff0c;人皆有之。是的#xff0c;没错#xff0c;即使我只是一个做地图的#xff0c;我也希望自己的地图看起来好看一点。在本文#xff0c;给大家讲讲在Arcgis for javascript下如何自定义鼠标样式。 首先#xff0c;说几个状态。1、鼠标… 俗话说爱美之心人皆有之。是的没错即使我只是一个做地图的我也希望自己的地图看起来好看一点。在本文给大家讲讲在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);这两种状态在点击按钮时触发代码如下 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
headmeta http-equivContent-Type contenttext/html; charsetutf-8meta nameviewport contentinitial-scale1, maximum-scale1,user-scalableno/titleSimple Map/titlelink relstylesheet hrefhttp://localhost/arcgis_js_api/library/3.9/3.9/js/esri/css/esri.cssstylehtml, 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;}/stylescript srchttp://localhost/arcgis_js_api/library/3.9/3.9/init.js/scriptscriptvar 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
/headbody
div idmapdiv idmap_ctrla idzoom_in classbutton拉框放大/aa idzoom_out classbutton拉框缩小/a/div
/div
/body
/html源码下载转载于:https://www.cnblogs.com/lzugis/p/6539888.html
