SuperMap iClient for OpenLayers实现在web页面右键图标弹出删除按钮，点击删除按钮可删除图标

不念不忘少年蓝@ 2021-10-01 02:16 521阅读 0赞

Demo文件内容如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

默认添加marker后，右键删除.html:

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="utf-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1.0">
    		<title>右键弹出图标</title>
    
    		<link rel="stylesheet" href="css/ol-contextmenu.css">
    		<script src="https://unpkg.com/openlayers"></script>
    		<script src="js/ol-contextmenu.js"></script>
    
    		<style type="text/css">
    			html,
    			body,
    			#map {
    				width: 100%;
    				height: 100%;
    				overflow: hidden;
    			}
    			
    			.marker {
    				text-indent: 20px;
    				background-size: 20px auto;
    				background-image: url("img/pin_drop.png");
    				background-repeat: no-repeat;
    				background-position: left center;
    			}
    		</style>
    	</head>
    
    	<body>
    		<div id="map" tabindex="0"></div>
    		<input type="button" value="图标1" />
    	</body>
    	<script>
    		var view = new ol.View({
    				center: [0, 0],
    				zoom: 4
    			}),
    			vectorLayer = new ol.layer.Vector({
    				source: new ol.source.Vector()
    			}),
    			baseLayer = new ol.layer.Tile({
    				source: new ol.source.OSM()
    			}),
    			map = new ol.Map({
    				target: 'map',
    				view: view,
    				layers: [baseLayer, vectorLayer]
    			});
    		
    			var iconStyle2 = new ol.style.Style({
    					image: new ol.style.Icon({
    						scale: .6,
    						src: 'img/pin_drop.png'
    					})
    				});
    				
    			var feature = new ol.Feature({
    					type: 'removable',
    					geometry: 
                              new ol.geom.Point(ol.proj.fromLonLat([113.5991,24.8166]))
    				});
    
    			feature.setStyle(iconStyle2);
    			vectorLayer.getSource().addFeature(feature);
    			
    			
    			
    		var contextmenu_items = [{
    				text: '添加点',
    				icon: 'img/pin_drop.png',
    				callback: marker
    			}
    		];
    		
    		
    		
    		var removeMarkerItem = {
    			text: '删除',
    			classname: 'marker',
    			callback: removeMarker
    		};
    
    
    
    
    		var contextmenu = new ContextMenu({
    			width: 180,
    			items: contextmenu_items
    		});
    		map.addControl(contextmenu);
    
    
    
    
    
    		contextmenu.on('open', function(evt) {
    			var feature = map.forEachFeatureAtPixel(evt.pixel, function(ft, l) {
    				return ft;
    			});
    			if(feature && feature.get('type') === 'removable') {
    				contextmenu.clear();
    				removeMarkerItem.data = {
    					marker: feature
    				};
    				contextmenu.push(removeMarkerItem);
    			} else {
    				contextmenu.clear();
    				contextmenu.extend(contextmenu_items);
    				contextmenu.extend(contextmenu.getDefaultItems());
    			}
    		});
    
    		map.on('pointermove', function(e) {
    
    			var pixel = map.getEventPixel(e.originalEvent);
    			var hit = map.hasFeatureAtPixel(pixel);
    
    			if(e.dragging) return;
    
    			map.getTargetElement().style.cursor = hit ? 'pointer' : '';
    		});
    
    		// from https://github.com/DmitryBaranovskiy/raphael
    		function elastic(t) {
    			return Math.pow(2, -10 * t) * Math.sin((t - 0.075) * (2 * Math.PI) / 0.3) + 1;
    		}
    
    		function center(obj) {
    			view.animate({
    				duration: 700,
    				easing: elastic,
    				center: obj.coordinate
    			});
    		}
    
    		function removeMarker(obj) {
    			vectorLayer.getSource().removeFeature(obj.data.marker);
    		}
    
    		function marker(obj) {
    			var coord4326 = ol.proj.transform(obj.coordinate, 'EPSG:3857', 'EPSG:4326'),
    				template = 'Coordinate is ({x} | {y})',
    				
    				
    				iconStyle = new ol.style.Style({
    					image: new ol.style.Icon({
    						scale: .6,
    						src: 'img/pin_drop.png'
    					}),
    					text: new ol.style.Text({
    						offsetY: 25,
    						text: ol.coordinate.format(coord4326, template, 2),
    						font: '15px Open Sans,sans-serif',
    						fill: new ol.style.Fill({
    							color: '#111'
    						}),		
    						stroke: new ol.style.Stroke({
    							color: '#eee',
    							width: 2
    						})
    					})
    				}),
    				feature = new ol.Feature({
    					type: 'removable',
    					geometry: new ol.geom.Point(obj.coordinate)
    				});
    
    			feature.setStyle(iconStyle);
    			vectorLayer.getSource().addFeature(feature);
    		}
    	</script>
    
    </html>

效果图：

![20190812120229203.gif][]

鼠标右键添加marker，右键删除.html:

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="utf-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1.0">
    		<title>右键弹出图标</title>
    
    		<link rel="stylesheet" href="css/ol-contextmenu.css">
    		<script src="https://unpkg.com/openlayers"></script>
    		<script src="js/ol-contextmenu.js"></script>
    
    		<style type="text/css">
    			html,
    			body,
    			#map {
    				width: 100%;
    				height: 100%;
    				overflow: hidden;
    			}
    			
    			.marker {
    				text-indent: 20px;
    				background-size: 20px auto;
    				background-image: url("img/pin_drop.png");
    				background-repeat: no-repeat;
    				background-position: left center;
    			}
    		</style>
    	</head>
    
    	<body>
    		<div id="map" tabindex="0"></div>
    		<input type="button" value="图标1" />
    	</body>
    	<script>
    		var view = new ol.View({
    				center: [0, 0],
    				zoom: 4
    			}),
    			vectorLayer = new ol.layer.Vector({
    				source: new ol.source.Vector()
    			}),
    			baseLayer = new ol.layer.Tile({
    				source: new ol.source.OSM()
    			}),
    			map = new ol.Map({
    				target: 'map',
    				view: view,
    				layers: [baseLayer, vectorLayer]
    			});
    
    		var contextmenu_items = [{
    				text: '添加点',
    				icon: 'img/pin_drop.png',
    				callback: marker
    			}
    		];
    		var removeMarkerItem = {
    			text: '删除',
    			classname: 'marker',
    			callback: removeMarker
    		};
    
    		var contextmenu = new ContextMenu({
    			width: 180,
    			items: contextmenu_items
    		});
    		map.addControl(contextmenu);
    
    		contextmenu.on('open', function(evt) {
    			var feature = map.forEachFeatureAtPixel(evt.pixel, function(ft, l) {
    				return ft;
    			});
    			if(feature && feature.get('type') === 'removable') {
    				contextmenu.clear();
    				removeMarkerItem.data = {
    					marker: feature
    				};
    				contextmenu.push(removeMarkerItem);
    			} else {
    				contextmenu.clear();
    				contextmenu.extend(contextmenu_items);
    				contextmenu.extend(contextmenu.getDefaultItems());
    			}
    		});
    
    		map.on('pointermove', function(e) {
    
    			var pixel = map.getEventPixel(e.originalEvent);
    			var hit = map.hasFeatureAtPixel(pixel);
    
    			if(e.dragging) return;
    
    			map.getTargetElement().style.cursor = hit ? 'pointer' : '';
    		});
    
    		// from https://github.com/DmitryBaranovskiy/raphael
    		function elastic(t) {
    			return Math.pow(2, -10 * t) * Math.sin((t - 0.075) * (2 * Math.PI) / 0.3) + 1;
    		}
    
    		function center(obj) {
    			view.animate({
    				duration: 700,
    				easing: elastic,
    				center: obj.coordinate
    			});
    		}
    
    		function removeMarker(obj) {
    			vectorLayer.getSource().removeFeature(obj.data.marker);
    		}
    
    		function marker(obj) {
    			var coord4326 = ol.proj.transform(obj.coordinate, 'EPSG:3857', 'EPSG:4326'),
    				template = 'Coordinate is ({x} | {y})',
    				iconStyle = new ol.style.Style({
    					image: new ol.style.Icon({
    						scale: .6,
    						src: 'img/pin_drop.png'
    					}),
    					text: new ol.style.Text({
    						offsetY: 25,
    						text: ol.coordinate.format(coord4326, template, 2),
    						font: '15px Open Sans,sans-serif',
    						fill: new ol.style.Fill({
    							color: '#111'
    						}),		
    						stroke: new ol.style.Stroke({
    							color: '#eee',
    							width: 2
    						})
    					})
    				}),
    				feature = new ol.Feature({
    					type: 'removable',
    					geometry: new ol.geom.Point(obj.coordinate)
    				});
    
    			feature.setStyle(iconStyle);
    			vectorLayer.getSource().addFeature(feature);
    		}
    	</script>
    
    </html>

效果图：

![20190812120411399.gif][]

Demo网盘下载地址：[https://pan.baidu.com/s/1yw6i2BBxYrGf3xJVVxaYew][https_pan.baidu.com_s_1yw6i2BBxYrGf3xJVVxaYew]    提取码：gpwz

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210724/3431044d9e7f4176a33b3d7851d90eef.png
[20190812120229203.gif]: /images/20210724/56c72138832a4ca3bb1a115e7fccb45c.png
[20190812120411399.gif]: /images/20210724/dc287ecf144f4268a2b074b21f2e7c96.png
[https_pan.baidu.com_s_1yw6i2BBxYrGf3xJVVxaYew]: https://pan.baidu.com/s/1yw6i2BBxYrGf3xJVVxaYew