Arcgis for javascript不同的状态下自己定义鼠标样式
俗话说：爱美之心。人皆有之。
是的。没错，即使我仅仅是一个做地图的，我也希望自己的地图看起来好看一点。
在本文，给大家讲讲在Arcgis
for javascript下怎样自己定义鼠标样式。
首先。说几个状态。1、鼠标在地图上面移动；2、按住鼠标左键拖拽鼠标。3、拉框放大地图；4、拉框缩小地图。
鼠标在地图上面时为
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvR0lTU2hpWGlTaGVuZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">；
按住鼠标拖拽地图时为
拉框放大地图时为
拉框缩小地图时为
接下来，说说我的实现思路。
第一种状态，在地图载入完毕时出现，代码：
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>
Arcgis for javascript不同的状态下自己定义鼠标样式的更多相关文章
- Arcgis for javascript不同的状态下自定义鼠标样式
俗话说:爱美之心,人皆有之.是的,没错,即使我只是一个做地图的,我也希望自己的地图看起来好看一点.在本文,给大家讲讲在Arcgis for javascript下如何自定义鼠标样式. 首先,说几个状态 ...
- MouseMoveEvent为了不太耗资源在默认状态下是要鼠标按下才能捕捉到。要想鼠标不按下时的移动也能捕捉到，需要setMouseTracking(true)
最近用Qt软件界面,需要用到mouseMoveEvent,研究了下,发现些问题,分享一下. 在Qt中要捕捉鼠标移动事件需要重写MouseMoveEvent,但是MouseMoveEvent为了不太耗资 ...
- Arcgis for Javascript API下类似于百度搜索A、B、C、D marker的实现方式
原文:Arcgis for Javascript API下类似于百度搜索A.B.C.D marker的实现方式 多说无益,首先贴两张图让大家看看具体的效果: 图1.百度地图搜索结果 图2.Arcgis ...
- Arcgis for Javascript之统计图的实现
首先,截个图给大家看看效果: 初始化状态 放大后的状态 点击选中后的状态 如上图所示,一般的涉及到的地图的统计涉及到上述所展示的三个状态:1.初始化状态:2.缩放后的状态:3.点击选中显示详情状态.第 ...
- Arcgis for Javascript实现图
首先,截个图给大家看结果: 初始化状态 放大后的状态 点击选中后的状态 如上图所看到的,一般的涉及到的地图的统计涉及到上述所展示的三个状态:1.初始化状态.2.缩放后的状态:3.点击选中显示详情状态. ...
- ArcGIS For JavaScript API 默认参数
“esri.config”的是在1.3版中的的“esriConfig”的替代品.如果您使用的是1.2或更低的版本,您应该参阅默认API v1.2和更低的配置.对于版本1.3或更高版本,您可以使用“es ...
- arcgis for javascript之ArcGISDynamicMapServiceLayer图层控制的实现
图层控制是非常多GIS系统里面必须的一个小功能,本文就说说arcgis for javascript下ArcGISDynamicMapServiceLayer图层控制的实现方式.首先看图: 实现效果 ...
- Arcgis for javascript map操作addLayer具体解释
本节的内容非常easy.说说Arcgis for Javascript里面map对象的addLayer方法.在for JS的API中,addLayer方法有两种.例如以下图: watermark/2/ ...
- Arcgis for Javascript之featureLayer图和属性互操作性
说明:主要实现加载FeatureLayer并显示属性表,而要实现联动属性表与地图,首先,看看实施后的效果: 显示效果 如上图所看到的,本文章主要实现了下面几个功能:1.FeatureLayer属性表的 ...
随机推荐
- 图的邻接链表实现（c）
参考:算法:C语言实现 一书 实现: #ifndef GRAPH #define GRAPH #include<stdio.h> #include<stdlib.h> stru ...
- 第4章 分治策略 monge阵列
/* fi表示第i行的最左最小元素的列小标,则有f0<f1<f2<...<fn-1 取数组的偶数行,组成新的子数组,递归求解最左最小元素的列下表,利用偶数项限定奇数项的范围,再 ...
- Python标准库_ sys,random，time
一.sys 1. sys这个模块让你能够访问与Python解释器联系紧密的变量和函数 2. sys模块中一些重要的函数和变量 argv 命令行参数,包括脚本名称 exi ...
- Oracle EBS-SQL (SYS-22):sysadmin_用户职责查询.sql
select fu.user_name 用户名, fu.description 用户说明, frv.RESPONSIBILITY_NAME 职责名称, REQUEST_GROUP_NAME 报表组, ...
- Qt 的线程与事件循环——可打印threadid进行观察槽函数到底是在哪个线程里执行，学习moveToThread的使用）
周末天冷,索性把电脑抱到床上上网,这几天看了 dbzhang800 博客关于 Qt 事件循环的几篇 Blog,发现自己对 Qt 的事件循环有不少误解.从来只看到现象,这次借 dbzhang800 的博 ...
- libcurl get post http
一. 概念 1. 为什么要使用libcurl 1) 作为http的客户端,可以直接用socket连接服务器,然后对到的数据进行http解析,但要 ...
- S3C6410嵌入式应用平台构建（六）——linux-3.14.4移植到OK6410-(Yaffs2文件制作)
本文主要讲怎用利用yaffs2工具和busybox制作yaffs2文件系统镜像.大多数都是参照网上的,目的在于记录学习,不做任何用途. 一.制作mkyaffs2image工具 进入yaffs2源码目录 ...
- xcode -饼状进度条
界面搭建 创建一个画饼状的类 eatView 集成UIView #import "eatView.h" @implementation eatView // Only overr ...
- Duff 装置中case情况越多性能越好
猜想:Duff装置再循环里面,直接调用的方法越多(也就是case的数量比较多),性能相对越好 ???!!! 我们基于Duff装置来做进一步的测试. 然后分别添加两个新的函数,一个函数式 case有4种 ...
- java 对象数组定义
下面代码实现了定义一个数组对象 public class Student { private String username; private int num; public Student(Stri ...