实现 mouse-drag 的图标拖动
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>Maps Toolbar</title> <link rel="stylesheet" href="http://localhost:6081/arcgis_js/3.13/library/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://localhost:6081/arcgis_js/3.13/library/esri/css/esri.css">
<script src="http://localhost:6081/arcgis_js/3.13/library/init.js"></script> <style>
body {
width:100%;
height:100%;
margin:0;
padding:0;
position:absolute;
}
</style> <script type="text/javascript">
var map,_x,_y,isDrag,layers={};
require([
'esri/map',
'esri/layers/ArcGISTiledMapServiceLayer', 'esri/layers/GraphicsLayer','esri/layers/TiledMapServiceLayer', 'esri/layers/FeatureLayer',
'esri/graphic','esri/geometry/Point','esri/geometry/Circle','esri/InfoTemplate','esri/toolbars/draw', 'esri/toolbars/edit',
'esri/symbols/SimpleFillSymbol', 'esri/symbols/SimpleLineSymbol', 'esri/symbols/PictureMarkerSymbol','esri/symbols/SimpleMarkerSymbol',
'esri/renderers/SimpleRenderer', 'esri/Color','esri/tasks/LengthsParameters','esri/tasks/AreasAndLengthsParameters','esri/tasks/BufferParameters',
'dijit/registry'],function(){ init(); }); function init() {
map = new esri.Map("map");
var bk_map = new esri.layers.ArcGISTiledMapServiceLayer('http://192.168.0.244:6080/arcgis/rest/services/bkMap_VEC_BS/MapServer');
map.addLayer(bk_map);
dojo.connect(map, "onMouseDrag", showCoordinates);
dojo.connect(map, "onMouseMove", showCoordinates); layers.dragIocLayer = new esri.layers.GraphicsLayer();
map.addLayer(layers.dragIocLayer);
var pointSymbol = new esri.symbol.PictureMarkerSymbol('img/center.jpg', 23, 23);
var drawSimpleRender = new esri.renderer.SimpleRenderer(pointSymbol);
layers.dragIocLayer.setRenderer(drawSimpleRender);
layers.dragIocLayer.add(new esri.Graphic(new esri.geometry.Point(106.22572,29.65875, map.spatialReference))); layers.dragIocLayer.on("mouse-down", function(evt) {
map.disablePan();
isDrag = true;
});
map.on("mouse-up", function(evt) {
if(isDrag){
isDrag = false;
map.enablePan();
console.info(_x+","+_y);
}
}); } // 显示坐标
function showCoordinates(evt) {
var mp = evt.mapPoint;
_x = mp.x.toFixed(5);
_y = mp.y.toFixed(5);
if(isDrag){
layers.dragIocLayer.clear();
layers.dragIocLayer.add(new esri.Graphic(new esri.geometry.Point(_x,_y, map.spatialReference)));
}
} </script>
</head>
<body>
<div id="map" style="width:100%; height:100%;"></div>
</body>
</html>
实现 mouse-drag 的图标拖动的更多相关文章
- web桌面程序之图标拖动排序的分析
在web桌面程序里,图标拖动并重新排序是个比较常见的功能.这个功能我之前反复修改了好几遍,现在终于整理出了比较理想的解决思路,决定拿出来分享下. 这一功能主要有哪些难点呢?我总结了一下一共有2处难点: ...
- qt学习笔记(五) QGraphicsPixmapItem与QGraphicsScene的编程实例 图标拖动渐变效果
应大家的要求,还是把完整的project文件贴出来,大家省点事:http://www.kuaipan.cn/file/id_48923272389086450.htm 先看看执行效果,我用的群创7寸屏 ...
- WPF拖动总结[转载]
WPF拖动总结 这篇博文总结下WPF中的拖动,文章内容主要包括: 1.拖动窗口 2.拖动控件 Using Visual Studio 2.1thumb控件 2.2Drag.Drop(不连续,没有中 ...
- 原生 drag drop HTML5
drag事件( dragstart -- drag -- dragend ) 当按下鼠标开始drag一个可以拖动的对象时,触发dragstart事件,如果元素是不可拖动的话,会出现一个不可拖动的图 ...
- HTML5 学习05—— 拖放(Drag 和 Drop)
拖放(Drag 和 drop)是 HTML5 标准的组成部分.即抓取对象以后拖到另一个位置. 例:将w3cschool图标拖动到矩形框中. <script> function allowD ...
- [转载]WPF控件拖动
这篇博文总结下WPF中的拖动,文章内容主要包括: 1.拖动窗口 2.拖动控件 Using Visual Studio 2.1thumb控件 2.2Drag.Drop(不连续,没有中间动画) 2.3拖动 ...
- Android长按及拖动事件探究
Android中长按拖动还是比较常见的.比如Launcher中的图标拖动及屏幕切换,ListView中item顺序的改变,新闻类App中新闻类别的顺序改变等.下面就这个事件做一下分析. 就目前而言,A ...
- [RxJS] Drag and Drop example
Improving our mouse drag event Our mouse drag event is a little too simple. Notice that when we drag ...
- jquery简单的拖动效果
<!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/h ...
随机推荐
- Codeforces554D:Kyoya and Permutation
Let's define the permutation of length n as an array p = [p1, p2, ..., pn] consisting of n distinct ...
- Maximal Square 我们都在寻找最高1子矩阵(leeCode)
Given a 2D binary matrix filled with 0's and 1's, find the largest square containing all 1's and ret ...
- SqlBulkCopy批量插入数据时,不执行触发器和约束的解决方法
原文:SqlBulkCopy批量插入数据时,不执行触发器和约束的解决方法 在new SqlBulkCopy对象的时候,设置一下SqlBulkCopyOptions选项即可,按位或运算 SqlBulkC ...
- android数据访问模式:档、SharedPreferences
android数据访问模式:档.SharedPreferences.SQLite 数据库.Content provider 文件流: 使用java IO流对文件进行读写操作,文件权限默认. 指定文件权 ...
- iOS开发多线程篇—多线程简介
iOS开发多线程篇-多线程简介 一.进程和线程 1.什么是进程 进程是指在系统中正在执行的一个应用程序 每一个进程之间是独立的.每一个进程均执行在其专用且受保护的内存空间内 比方同一时候打开QQ.Xc ...
- hdu3182 状态压缩水题
题意是这种 给你n个汉堡 每一个汉堡有它的价值 做每一个汉堡都得花费相应的能量 如今告诉你最大能量 让你求获得的最大的价值(有些汉堡必须有还有一些汉堡做好为前提) 给你的 ...
- 从xcode 6 上传 App Store
2014苹果结束了大会,ios8公布.可怜的苹果开发人员又要開始伤脑筋了. 比方提交新产品的那个iTunes connect体验就做得极烂.并且这还是本菜鸟的第一次上线提交.折寿啊 一.制作证书.ap ...
- bitnami redmine 安装插件
https://wiki.bitnami.com/Applications/BitNami_Redmine_Stack#How_to_install_a_plugin_on_Redmine.3f 版权 ...
- (4)通过调用hadoop的java api实现本地文件上传到hadoop文件系统上
(1)首先创建java project 选择eclipse菜单上File->New->Java Project. 并命名为UploadFile. (2)加入必要的hadoop jar包 右 ...
- 多快好省的做个app开发
从技术经理的角度算一算,如何可以多快好省的做个app [导读]前端时间,一篇“从产品经理的角度算一算,做个app需要多少钱”的文章在网上疯传,可见大家对互联网创业的热情!这次,从一名技术经理的角度再给 ...