You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
163 lines
4.6 KiB
HTML
163 lines
4.6 KiB
HTML
<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 wkts = [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>
|