openlayers 地圖要素的多種高亮方式 Demo(可直接執行)
阿新 • • 發佈:2020-11-12
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>要素高亮方式</title> <style type="text/css"> body, #map { border: 0px; margin: 0px; padding: 0px; width: 100%; height: 100%; font-size: 13px; } .form-inline{ position: absolute; top: 10pt; right: 10pt; z-index: 99; } </style> <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" /> <script type="text/javascript" src="https://openlayers.org/en/v5.3.0/build/ol.js"></script> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript"> var point = "POINT(103.584297498027 36.119086450265)"; var line = "MULTILINESTRING((106.519115206186 36.119086450265,108.967127809811 36.5936423859273))"; var polygon = "MULTIPOLYGON(((106.519115206186 29.4789248520356,108.967127809811 34.2761116373967,113.226682886935 23.1830703234799)))"; var wkts = [point, line, polygon]; var wktformat = new ol.format.WKT(); function init(){ var format = 'image/png'; var bounds = [73.4510046356223, 18.1632471876417, 134.976797646506, 53.5319431522236]; var untiled = new ol.layer.Tile({ source: new ol.source.OSM() }); var projection = new ol.proj.Projection({ code: 'EPSG:4326', units: 'degrees' }); var features = new Array(); for(var i=0;i<wkts.length;i++){ var feature = wktformat.readFeature(wkts[i]); feature.getGeometry().transform('EPSG:4326', 'EPSG:4326'); features.push(feature); } var vectorSource =new ol.source.Vector({ features: features }) var vector = new ol.layer.Vector({ source: vectorSource, style: new ol.style.Style({ fill: new ol.style.Fill({ color: 'rgba(255, 0, 0, 0.2)' }), stroke: new ol.style.Stroke({ color: '#ffcc33', width: 2 }), image: new ol.style.Circle({ radius: 7, fill: new ol.style.Fill({ color: '#ffcc33' }) }) }) }); var map = new ol.Map({ controls: ol.control.defaults({ attribution: false }), target: 'map', layers: [ untiled, vector ], view: new ol.View({ projection: projection }) }); map.getView().fit(bounds, map.getSize()); //選擇物件 var select = null; //單選 var pointSelect = new ol.interaction.Select(); //多選 var toggleSelect = new ol.interaction.Select({ condition:ol.events.condition.click, toggleCondition:ol.events.condition.click }); //滑鼠經過 var pointmove = new ol.interaction.Select({ condition: ol.events.condition.pointerMove }); //框選 var boxSelect = new ol.interaction.Select(); var selectedFeatures = boxSelect.getFeatures(); var dragBox = new ol.interaction.DragBox({ //condition : ol.events.condition.always 預設是always }); // 框選結束新增高亮 dragBox.on('boxend', function() { var extent = dragBox.getGeometry().getExtent(); vectorSource.forEachFeatureIntersectingExtent(extent, function( feature) { selectedFeatures.push(feature) }); }); // 框選滑鼠按下清除高亮 dragBox.on('boxstart', function() { selectedFeatures.clear(); }); // 在高亮外區域按下滑鼠清除高亮 map.on('click', function() { selectedFeatures.clear(); }); var selectElement = document.getElementById('selecttype'); var changeInteraction = function() { map.removeInteraction(dragBox); if (select !== null) { map.removeInteraction(select); } var value = selectElement.value; if (value == 'pointSelect') { select = pointSelect; } else if (value == 'boxSelect') { map.addInteraction(dragBox); select = boxSelect; } else if (value == 'pointmove') { select = pointmove; } else if (value == 'toggleSelect') { select = toggleSelect; }else { select = null; } if (select !== null) { map.addInteraction(select); } }; selectElement.onchange = changeInteraction; changeInteraction(); } </script> </head> <body onLoad="init()"> <div id="map"> <form class="form-inline"> <label>選擇高亮方式:</label> <select id="selecttype"> <option value="none" selected>None</option> <option value="pointSelect">點選單選</option> <option value="toggleSelect">多選</option> <option value="boxSelect">框選</option> <option value="pointmove">滑鼠經過</option> </select> </form> </div> </body> </html>