Arcgis for javascript不同的状态下自定义鼠标样式
2015-06-01 14:39
751 查看
首先,说几个状态。1、鼠标在地图上面移动;2、按住鼠标左键拖拽鼠标;3、拉框放大地图;4、拉框缩小地图。
鼠标在地图上面时为
;
按住鼠标拖拽地图时为
;
拉框放大地图时为
;
拉框缩小地图时为
。
接下来,说说我的实现思路。
第一种状态,在地图加载完成时出现,代码:
第二种状态,地图拖拽时出现,此时,需要分别监听map的mouse-drag-start和mouse-drag-end事件,具体代码如下:
第三种和第四种状态时,需要定义Navigation,如下:
这两种状态在点击按钮时触发,代码如下:
说明:
在触发这两种状态时,还要同时设置mouse-drag-start触发时的状态。
最后,操作结束后一切回归原始状态,代码如下:
这样,在上述四种状态下的鼠标状态时由我们自己控制样式的,下面是完整代码:
源代码:http://download.csdn.net/detail/u011776918/8760165
鼠标在地图上面时为
;
按住鼠标拖拽地图时为
;
拉框放大地图时为
;
拉框缩小地图时为
。
接下来,说说我的实现思路。
第一种状态,在地图加载完成时出现,代码:
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>
<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>
源代码:http://download.csdn.net/detail/u011776918/8760165
相关文章推荐
- js改变鼠标的形状和样式的方法
- 基于Html+js实现的瓦片式的Webgis栅格地图管理平台
- 翻译 Cesium入门教程(一)------环境配置 Hello World
- 翻译 Cesium入门教程(二)------图层 Imagery Layers
- openlayers框架介绍(一)
- MapServer6.4.1教程学习--包含二个图层的静态地图(1-2)
- MapServer6.4.1教程学习--显示图层内类别(1-3)
- MapServer6.4.1教程学习--标注地图(1-4)
- MapServer6.4.1教程学习--添加栅格图层(1-5)
- MapServer6.4.1教程学习--定义投影和范围(1-6)
- MapServer6.4.1教程学习--添加OGC WMS图层(1-7)
- MapServer6.4.1教程学习--地图交互和浏览器模式(1-9)
- MapServer6.4.1教程学习--CGI变量和用户接口(2-0)
- MapServer6.4.1教程学习--缩放和漫游控件(2-1)
- MapServer6.4.1教程学习--图层控制(2-2)
- [开发]Python WebGIS开发研究(一)
- openlayers 初步认识
- OpenLayers项目分析——(一)项目介绍
- OpenLayers 项目完整分析(二)源代码总体结构分析
- OpenLayers 项目分析(三)BaseTypes