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,一经查实,立即删除!

相关文章

Facebook :AI 年度总结来啦

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

一文读懂可穿戴技术

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

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

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

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

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

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

来源&#xff1a;智车科技摘要&#xff1a;根据工业和信息化部、公安部、江苏省人民政府共建“国家智能交通综合测试基地”的总体规划和建设要求&#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;作为一个对开…

基于opencv的gpu与cpu对比程序,代码来自opencv的文档中

原文链接&#xff1a; http://www.opencv.org.cn/opencvdoc/2.3.2/html/doc/tutorials/gpu/gpu-basics-similarity/gpu-basics-similarity.html 代码中有错误&#xff0c;关于GpuMat OpenCV代码中没有对其进行操作符运算的重载&#xff0c;所有编译的时候有错误。对于GpuMat的运…

不只是华为/阿里/百度/小米/京东,AIoT已然成为资本与新兴企业都认可的赚钱方向...

来源&#xff1a;物联网智库整理发布摘要&#xff1a;当互联网的上半场结束之后&#xff0c;所有的互联网下半场都是重生意。随着AIoT越来越热门&#xff0c;这一概念已然成为巨头、资本以及新兴企业竞相角逐的热点。2019年注定是AIoT具有重要发展的一年&#xff0c;仅仅在刚过…

机会与挑战:2019人工智能应用趋势预测

来源&#xff1a;资本实验室摘要&#xff1a;最近几天&#xff0c;印度人工智能数据分析公司Fractal Analytics宣布获得私募投资机构Apax Partners的2亿美元投资&#xff0c;估值达到了5亿美元。也是在近期&#xff0c;该公司的几位人工智能专家分别对2019年的人工智能应用趋势…

边缘检测中非极大值抑制简单解释

首先要明白的是: (a.) canny算子中非最大抑制(Non-maximum suppression)是回答这样一个问题: “当前的梯度值在梯度方向上是一个局部最大值吗?” 所以,要把当前位置的梯度值与梯度方向上两侧的梯度值进行比较. (b.) 梯度方向垂直于边缘方向, 这一点不要误解. - Q1: 插值…

哥德尔不完备定理”到底说了些什么?

来源&#xff1a;人机与认知实验室&#xff08;一&#xff09;【中文网上深入介绍哥德尔不完备定理的文章很少&#xff0c;我这篇文章写得很长&#xff0c;花了不少时间打磨它&#xff0c;希望能帮助到爱好数学与逻辑的人。文章把理解哥德尔不完备定理分为了五重&#xff0c;建…

关于相机标定的简单介绍

关于Opencv实现的代码&#xff0c;参考&#xff1a; https://blog.csdn.net/dcrmg/article/details/52939318 - 相机从生产出厂时&#xff0c;存在一些难以避免的畸变。这种镜头畸变可以通过矫正来达到最佳的拍摄效果。标定板要拍摄不同角度的20张照片&#xff0c;是因为镜头…

谷歌Waymo自建车厂,L4级无人车量产指日可待

来源&#xff1a;AI科技大本营摘要&#xff1a;现在&#xff0c;Waymo 宣称世界上第一家 100&#xff05; 致力于大规模生产 L4 自动驾驶汽车的工厂&#xff0c;即将诞生。美国当地时间 1 月 22 日&#xff0c;Google 旗下无人驾驶公司 Waymo 宣布&#xff0c;在未来五年内&…

腾讯“科学探索奖”提名报名正式启动

科学探索奖“申报指南”记者1月23日从腾讯公司获悉&#xff0c;由腾讯基金会联合杨振宁等众多知名科学家发起的“科学探索奖”提名报名正式启动。这标志着腾讯基金会这一投入10亿元发起的民间科学大奖正式拉开帷幕。按照科学探索奖官方网站提供的“申报指南”&#xff0c;该奖的…

语音公司集体杀入AI芯片 2019场景落地战打响!

来源&#xff1a;智东西摘要&#xff1a;近十家语音公司集体搞芯片&#xff01;为什么杀红了眼&#xff0c;谁又能笑到最后&#xff1f;2019年的第一个工作日&#xff0c;在第一颗AI芯片“雨燕”落地不久&#xff0c;AI创业公司云知声紧锣密鼓地推出多模态AI芯片战略&#xff0…

任总讲话,说明华为对5G有清醒的认识

来源&#xff1a;科工力量摘要&#xff1a;无线通信产业已经发展了四代&#xff0c;目前正处于5G产业化前夕&#xff0c;是当下到一个最热的话题&#xff0c;5G如何发展&#xff0c;前景如何&#xff0c;是各个方面包括学术界、产业界、投资界以及政府都非常关心的。另外&#…

这些机器人决定全球机器人未来趋势·Science Robotics 评选年度十大机器人

来源&#xff1a;机器人大讲堂摘要&#xff1a;如果评选机器人领域最高端的学术杂志&#xff0c;那应该非《Science Robotics》莫属了。作为顶级期刊Science的子刊&#xff0c;一经问世便受到机器人界各位学术大牛的青睐&#xff0c;令人咋舌的前沿科技层出不穷。最近&#xff…

2019年社交媒体趋势报告

来源&#xff1a;新媒体创意营销Kantar Media发布了新报告“2019年社交媒体趋势”。世界上40%的人口使用社交媒体。一些行业报告显示人们平均每天花两小时在这些平台上分享、点赞、发推和更新&#xff0c;那么2019年会怎样呢&#xff1f;第五个年度社交媒体趋势报告强调了该领域…