Arcgis for javascript不同的状态下自定义鼠标样式

俗话说:爱美之心,人皆有之。是的,没错,即使我只是一个做地图的,我也希望自己的地图看起来好看一点。在本文,给大家讲讲在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>
<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>

源码下载





转载于:https://www.cnblogs.com/lzugis/p/6539888.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/492833.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

泊松融合

泊松融合是一种很重要的图像融合算法&#xff0c;该算法选自论文&#xff08;[Poisson Image Editing]2003年发表&#xff09;&#xff0c;关于算法中的很多基础概念可以参考如下博客&#xff1a; https://blog.csdn.net/hjimce/article/details/45716603 https://blog.csdn.…

Facebook :AI 年度总结来啦

来源&#xff1a;AI 科技评论摘要&#xff1a;最近&#xff0c;Facebook 做了一份 AI 年度总结&#xff0c;详述了他们过去一年在 AI 上所做的代表性工作。在 Facebook&#xff0c;我们认为&#xff0c;人工智能以更有效的新方式学习&#xff0c;就像人类一样&#xff0c;可以在…

select,epoll的比较

机制&#xff1a; select:只支持水平触发&#xff08;数据不处理完无限通知&#xff09; epoll:支持水平触发和边缘触发&#xff08;仅通知一次&#xff09; 单进程监控FD个数 select: 由FD_SETSIZE设置&#xff0c;默认值是2048。在大量连接的情况下明显不足。 epoll&#xff…

积分图像

积分图像的大小尺寸与原图像 I(x,y)的大小尺寸相等&#xff0c;而积分图像在(x,y)处的值等于原图像中横坐标小于等于x并且纵坐标也小于等于y的所有像素灰度值之和&#xff0c;也就是在原图像中&#xff0c;从其左上角到(x,y)处所构成的矩形区域内所有像素灰度值之和。

android如何与服务器交互?

问题描述是用httpclient 还是socket 还是webservice&#xff1f;倒底哪种好用&#xff0c;哪种最常用&#xff1f;有没有好的框架介绍一下&#xff1f;解决方案11.afinal2.volley个人觉得不错的两个框架&#xff01;当然也可以自己封装。如果对以上两个框架感兴趣&#xff0c…

一文读懂可穿戴技术

来源&#xff1a;传感器技术可穿戴技术(wearable technology)&#xff0c;最早是20世纪60年代由麻省理工学院媒体实验室提出的创新技术。利用该技术&#xff0c;可以把多媒体、传感器和无线通信等技术嵌入人们的衣物中&#xff0c;可支持手势和眼动操作等多种交互方式&#xff…

C++函数指针使用总结

一 函数指针介绍 函数指针指向某种特定类型&#xff0c;函数的类型由其参数及返回类型共同决定&#xff0c;与函数名无关。举例如下&#xff1a; int add(int nLeft,int nRight);//函数定义 该函数类型为int(int,int),要想声明一个指向该类函数的指针&#xff0c;只需用指…

使用异或运算交换两个任意类型变量

这篇文章中将使用C语言,实现交换两个任意类型变量的功能.说到任意类型用C让人感觉很难做,如果是C则使用模板函数就轻松搞定: template<class T> inline void swap(T& t1, T& t2) { T tmp; tmp t1; t1 t2; t2 tmp; } 先说下使用^来交换两个整数,其代码…

2019与下一个十年:我们将要放弃的和将要拥抱的

来源&#xff1a;资本实验室2019年&#xff0c;是连接21世纪前两个十年的过渡一年。在金融支付和商业领域中&#xff0c;2019年也有望成为激动人心的一年。在这一年中&#xff0c;每家企业、每个人都需要对过去十年中所追求的创新进行反思&#xff0c;并决定下一个十年前进的方…

C++中虚函数、纯虚函数、普通函数三者的区别

转载自&#xff1a;https://www.cnblogs.com/cj2014/p/7692707.html 1.虚函数(impure virtual)   C的虚函数主要作用是“运行时多态”&#xff0c;父类中提供虚函数的实现&#xff0c;为子类提供默认的函数实现。 子类可以重写父类的虚函数实现子类的特殊化。 如下就是一…

麦肯锡发布调研,揭开“那些引入人工智能的企业都怎么了 ”

来源&#xff1a;亿欧智库摘要&#xff1a;根据麦肯锡的最新调研显示&#xff0c;人工智能技术普遍上得到企业接纳&#xff0c;但仍有不少企业在入门时就面临“不知道咋开门”的状况。新技术带来新问题&#xff0c;企业该如何应对&#xff1f;根据麦肯锡在全球范围内的调研&…

深度学习、图像识别的基本概念

图像识别 图像识别概念&#xff1a; 我们对图像进行一些列的处理&#xff0c;将其有用的信息提取出来&#xff0c;进行划分归类&#xff0c;这就是图像识别。 图像识别目的&#xff1a; 将景物、图像、字符等信息经过预处理&#xff0c;然后进行识别&#xff0c;让计算机具…

PHP-php.ini中文版

今天细看了下配置文件 有很多没用过的 就从网上搜了一篇 常看看 ;;;;;;;;;;;;;;;; 简介 ;;;;;;;;;;;;;;;;; 本文并非是对英文版 php.ini 的简单翻译&#xff0c;而是参考了众多资料以后&#xff0c;结合自己的理解&#xff0c;增加了许多内容&#xff0c;; 包括在原有 php.ini …

重磅!我国建成首个自动驾驶封闭高速公路测试环境

来源&#xff1a;智车科技摘要&#xff1a;根据工业和信息化部、公安部、江苏省人民政府共建“国家智能交通综合测试基地”的总体规划和建设要求&#xff0c;公安部交通管理科学研究所坚持“自动驾驶汽车产业发展与安全行驶并重”的指导思想&#xff0c;依据《中华人民共和国公…

线性运算和非线性运算

线性运算是加法和数量乘法&#xff0c;对于不同向量空间线性运算一般有不同的形式&#xff0c;它们必须满足交换律&#xff0c;结合律&#xff0c;数量加法的分配律&#xff0c;向量加法的分配律。线性是指量与量之间按比例、成直线的关系&#xff0c;在空间和时间上代表规则和…

拖延症讲:反向遍历链表

今天感觉被面试官用很简单的题目虐了。。。。“如何高效等反向遍历单链表” 一般情况下会想到一个很笨的方法&#xff1a;计算个数&#xff0c;然后再根据个数每一次将遍历的索引减一。 第二种方式就是将原链表反过来&#xff0c;再遍历。如果要求不改变原有结构&#xff0c;可…

单反相机内部光线反射原理

单反相机是照相机的一种&#xff0c;以独特的取景方式而命名。 它的全称是&#xff08;可换&#xff09;单镜头反光式取景照相机&#xff0c;&#xff08;Single Lens Reflex Camera&#xff0c;缩写为SLR camera&#xff09;一般简称为单反相机。它的含义是拍摄和取景共用用一…

面部识别技术走到十字路口?

来源&#xff1a;雷锋网摘要&#xff1a;向左走&#xff0c;还是向右走&#xff1f;近日&#xff0c;面部识别技术又遭遇“突发事件”。本周二&#xff0c;由90个倡议团体组成的小组给三巨头AAM&#xff08;亚马逊、谷歌、微软&#xff09;写信&#xff0c;要求三家公司承诺不向…

我与ARM的那些事儿2JINLK烧录nor flash

前言 最近在研究mini2440的友善之臂&#xff0c;但是我拿着的是实验室早期买的开发板&#xff0c;在做裸机开发的过程中老是不能很好地使用最新版的minitools进行烧录&#xff0c;因而各种不爽&#xff0c;因为生成了bin文件不能很好地传到mini2440中&#xff0c;作为一个对开…

焦距及摄像机成像

焦距,本来是一个光学中的量,当一束平行光以与凸透镜的主轴穿过凸透镜时&#xff0c;在凸透镜的另一侧会被凸透镜汇聚成一点&#xff0c;这一点叫做焦点&#xff0c;焦点到凸透镜光心的距离就叫这个凸透镜的焦距。一个凸透镜的两侧各有一个焦点。 光心&#xff1a;可以把凸透镜…