Показать сообщение отдельно
  #1 (permalink)  
Старый 24.05.2016, 11:22
Интересующийся
Отправить личное сообщение для diprom Посмотреть профиль Найти все сообщения от diprom
 
Регистрация: 21.05.2011
Сообщений: 24

Клик правой кнопки
Здравствуйте. Немного получается показать всплывающее меню с 1 раза, когда щелкаешь правой кнопкой на feature. Подскажите пожалуйста.

<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>map</title>
<script type='text/javascript' src='../lib/OpenLayers.js'></script>
<script src="jquery.js"></script>
<script src="jquery.contextmenu.js"></script>
<link rel="stylesheet" href="jquery.contextmenu.css">
<script type='text/javascript'>
var map;
			var vectorLayer;
			$(function() {
					$('#mythingy').contextPopup({
					  title: 'My Popup Menu',
					  items: [
						{label:'Some Item',     icon:'icons/shopping-basket.png',             action:function() { alert('clicked 1') } },
						{label:'Another Thing', icon:'icons/receipt-text.png',                action:function() { alert('clicked 2') } },
						{label:'Blah Blah',     icon:'icons/book-open-list.png',              action:function() { alert('clicked 3') } },
						null, // divider
						{label:'Sheep',         icon:'icons/application-monitor.png',         action:function() { alert('clicked 4') } },
						{label:'Cheese',        icon:'icons/bin-metal.png',                   action:function() { alert('clicked 5') } },
						{label:'Bacon',         icon:'icons/magnifier-zoom-actual-equal.png', action:function() { alert('clicked 6') } },
						null, // divider
						{label:'Onwards',       icon:'icons/application-table.png',           action:function() { alert('clicked 7') } },
						{label:'Flutters',      icon:'icons/cassette.png',                    action:function() { alert('clicked 8') } }
					  ]
					});
				  });

					function DoYearReport(k)
					{

					}
					
					function init() 
					{
						map = new OpenLayers.Map('map_element', {});
						var wms = new OpenLayers.Layer.WMS(
						'OpenLayers WMS',
						'http://vmap0.tiles.osgeo.org/wms/vmap0',
						{layers: 'basic'},
						{}
						);
						map.addLayer(wms);

						// allow testing of specific renderers via "?renderer=Canvas", etc
						var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
						renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
						
						var vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", {
							styleMap: new OpenLayers.StyleMap({'default':{
								strokeColor: "#00FF00",
								strokeOpacity: 1,
								strokeWidth: 3,
								fillColor: "#FF5500",
								fillOpacity: 0.5,
								pointRadius: 6,
								pointerEvents: "visiblePainted",
								// label with \n linebreaks
								label : "name: ${name}\n\nage: ${age}",
								
								fontColor: "${favColor}",
								fontSize: "12px",
								fontFamily: "Courier New, monospace",
								fontWeight: "bold",
								labelAlign: "${align}",
								labelXOffset: "${xOffset}",
								labelYOffset: "${yOffset}",
								labelOutlineColor: "white",
								labelOutlineWidth: 3
							}}),
							renderers: renderer
						});

						// Create a point feature to show the label offset options
						var labelOffsetPoint = new OpenLayers.Geometry.Point(-101.04, 35.68);
						var labelOffsetFeature = new OpenLayers.Feature.Vector(labelOffsetPoint);
						labelOffsetFeature.attributes = {
							name: "offset",
							age: 22,
							favColor: 'blue',
							align: "cm",
							// positive value moves the label to the right
							xOffset: 50,
							// negative value moves the label down
							yOffset: -15
						};

						 // create a point feature
						var point = new OpenLayers.Geometry.Point(-111.04, 45.68);
						var pointFeature = new OpenLayers.Feature.Vector(point);
						pointFeature.attributes = {
							name: "toto",
							age: 20,
							favColor: 'red',
							align: "cm"
						};
						

						var nullFeature = new OpenLayers.Feature.Vector(null);
						nullFeature.attributes = {
							name: "toto is some text about the world",
							age: 20,
							favColor: 'red',
							align: "cm"
						};
						
						map.addLayer(vectorLayer);
           
						map.setCenter(new OpenLayers.LonLat(-109.370078125, 43.39484375), 4);
						vectorLayer.addFeatures([pointFeature, labelOffsetFeature, nullFeature ]);
						if(!map.getCenter())
						{
							map.zoomToMaxExtent();
						}
						// Get control of the right-click event:
						document.getElementById('map_element').oncontextmenu = function(e)
						{
						  e = e?e:window.event;
						 if (e.preventDefault) e.preventDefault(); // For non-IE browsers.
						 else return false; // For IE browsers.
						};
						// A control class for capturing click events...
						OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control,
						{
							defaultHandlerOptions: {
							'single': true,
							'double': true,
							'pixelTolerance': 0,
							'stopSingle': false,
							'stopDouble': false
							},
							handleRightClicks:true,
							initialize: function(options) {
							this.handlerOptions = OpenLayers.Util.extend(
							{}, this.defaultHandlerOptions
							);
							OpenLayers.Control.prototype.initialize.apply(
							this, arguments
							);
							this.handler = new OpenLayers.Handler.Click(
							this, this.eventMethods, this.handlerOptions
							);
							},
							CLASS_NAME: "OpenLayers.Control.Click"

						});
						// Add an instance of the Click control that listens to various click
						events:
						var oClick = new OpenLayers.Control.Click({eventMethods:{
						'rightclick': function(e) {
							var po = vectorLayer.getFeatureFromEvent(e);
							if (po)
							{
								var lonlat = map.getLonLatFromViewPortPx(e.xy);
								if (lonlat)
								{
									var temp = document.getElementById("mythingy");
									if (temp) 
									{
										temp.style.left = (e.x-5)+'px';
										temp.style.top = (e.y-5)+'px';
									}
								//не хочет с 1 раза показывать меню
									$('#mythingy').trigger({
											type: 'mousedown',
											which: 3
										}).trigger({
											type: 'mouseup',
											which: 3
										});
								}
							}
						},
						'click': function(e) {
						console.log('click at '+e.xy.x+','+e.xy.y);
						},
						'dblclick': function(e) {
						console.log('dblclick at '+e.xy.x+','+e.xy.y);
						},
						'dblrightclick': function(e) {
						console.log('dblrightclick at '+e.xy.x+','+e.xy.y);
						}
						}});
						map.addControl(oClick);
						oClick.activate();

					}

</script>
</head>

<body onload='init();'>
<div id='map_element' style='width: 800px; height: 600px;'></div>
<div id="mythingy" style="position:absolute;width:5px; height: 5px; margin: 0px; border:0px dashed #666666; padding:6px;z-index:999999999"> </div>
</body>
</html>
Ответить с цитированием