zoukankan      html  css  js  c++  java
  • 实现 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 {
    		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="100%; height:100%;"></div>
      </body>
    </html> 
    

      

  • 相关阅读:
    winget
    splunk单节点容器部署
    jumpserver容器化部署
    思科acl
    Java springboot-plus
    接口 Postman 上传图片测试
    EF 数据迁移 新
    电商 抓取淘宝分类 包含图片和名称
    思维导图 淘宝上新流程
    功能模块 上传视频 生成视频预览图
  • 原文地址:https://www.cnblogs.com/vvonline/p/4881986.html
Copyright © 2011-2022 走看看