实现 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> 

  

posted @ 2015-10-15 11:58  vv_online  阅读(2168)  评论(0编辑  收藏  举报