<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./ol.css" type="text/css" />
<script src="./jquery-1.8.3.min.js"></script>
<script src="./ol.js"></script>
<style>
.map {
width: 100%;
}
</style>
<title>Document</title>
</head>
<body>
<div id="map" class="map"></div>
<script type="text/javascript">
var colorLayer = []; //选中区域的填色图层
$("#map").css("height", ($(window).height() - 20) + "px");
var map_ter = new ol.layer.Tile({
source: new ol.source.XYZ({
url: "http://t3.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=你的天地图key",
}),
zIndex: 0,
});
var map_ter2 = new ol.layer.Tile({
source: new ol.source.XYZ({
url: "http://t1.tianditu.com/DataServer?T=cva_w&X={x}&Y={y}&L={z}&tk=你的天地图key",
}),
zIndex: 0,
});
var map = new ol.Map({
target: 'map',
layers: [map_ter, map_ter2],
view: new ol.View({
center: [119.2, 36.3],
projection: "EPSG:4326",
zoom: 7.5,
}),
});
//添加选择和框选控件,按住Ctr键,使用鼠标框选采样点
let select = new ol.interaction.Select();
map.addInteraction(select);
let dragBox = new ol.interaction.DragBox({
condition: ol.events.condition.platformModifierKeyOnly,
});
map.addInteraction(dragBox);
var data = [{
V_LON: 119.2,
V_LAT: 36.3,
V_STATION_NUM: "测试"
}];
console.log(data);
var WFSVectorSource = new ol.source.Vector();
for (let i = 0; i < data.length; i++) {
var feature = new ol.Feature({
geometry: new ol.geom.Point([data[i].V_LON, data[i].V_LAT]),
popupData: {
V_STATION_NUM: data[i].V_STATION_NUM,
},
});
feature = setFeature(feature);
WFSVectorSource.addFeature(feature);
}
var WFSVectorLayer = new ol.layer.Vector({
source: WFSVectorSource,
});
map.addLayer(WFSVectorLayer);
dragBox.on("boxend", () => {
let extent = dragBox.getGeometry().getExtent();
WFSVectorSource.forEachFeatureIntersectingExtent(
extent,
(feature) => {
let coordinate = [
[
[extent[0], extent[1]],
[extent[0], extent[3]],
[extent[2], extent[3]],
[extent[2], extent[1]],
[extent[1], extent[2]],
],
];
var boxFeature = new ol.Feature({
geometry: new ol.geom.Polygon(coordinate),
});
colorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [boxFeature],
}),
style: new ol.style.Style({
fill: new ol.style.Fill({
color: "rgba(0, 0, 0, 0.3)",
}),
}),
});
map.addLayer(colorLayer);
console.log(feature.A.popupData);
}
);
})
//下一次选中取消上次的区域
dragBox.on("boxstart", () => {
map.removeLayer(colorLayer);
});
//点击地图的时候让选中区域可以取消
map.on("click", function(e) {
// map.removeLayer(feature);
map.removeLayer(colorLayer);
//获取当前的feaure
// let pixel = e.map.getEventPixel(e.originalEvent);
// let hit = map.hasFeatureAtPixel(pixel);
// if (hit) {
// let feature = e.map.forEachFeatureAtPixel(pixel, function(feature) {
// return feature;
// });
// if (!feature.A.popupData) {
// map.removeLayer(feature);
// map.removeLayer(colorLayer);
// return;
// }
// }
})
//填色
function setFeature(feature) {
feature.setStyle(
new ol.style.Style({
image: new ol.style.Circle({
radius: 6,
fill: new ol.style.Fill({
color: "#00F"
}),
}),
})
);
return feature;
}
</script>
</body>
</html>
html+js+openlayer的框选事件
于 2022-06-01 09:53:12 首次发布