gpt4 book ai didi

javascript - 通过多边形绘制交互进行 Openlayers 3 选择

转载 作者:行者123 更新时间:2023-11-30 16:14:21 25 4
gpt4 key购买 nike

我正在尝试修改 Openlayers 3 框选择示例 here这样我就可以在 map 上绘制一个多边形来选择要素。

下面是我的代码 - 我添加了一个包含多边形的矢量源,将交互从“DragBox”更改为“Draw”,并将框方法更改为绘制方法。

我在 js 控制台中没有收到任何错误,所以我不太确定我可能哪里出错了?这应该产生结果吗?

<!DOCTYPE html>
<html>
<head>
<title>Box Selection</title>
<link rel="stylesheet" href="http://openlayers.org/en/v3.14.1/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.14.1/build/ol.js"></script>
<style>
.ol-dragbox {
background-color: rgba(255,255,255,0.4);
border-color: rgba(100,150,0,1);
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<div id="info">No countries selected</div>
<script>
var vectorSource = new ol.source.Vector({
url: 'countries.geojson',
format: new ol.format.GeoJSON()
});

var source = new ol.source.Vector();

var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.Vector({
source: vectorSource
})
],
renderer: 'canvas',
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});

// a normal select interaction to handle click
var select = new ol.interaction.Select();
map.addInteraction(select);

var selectedFeatures = select.getFeatures();

// a DragBox interaction used to select features by drawing boxes
var dragBox = new ol.interaction.Draw({
source: source,
type: 'Polygon'
});

map.addInteraction(dragBox);

var infoBox = document.getElementById('info');

dragBox.on('drawend', function() {
// features that intersect the box are added to the collection of
// selected features, and their names are displayed in the "info"
// div
var info = [];
var extent = source.getExtent();
vectorSource.forEachFeatureIntersectingExtent(extent, function(feature) {
selectedFeatures.push(feature);
info.push(feature.get('name'));
});
if (info.length > 0) {
infoBox.innerHTML = info.join(', ');
}
});

// clear selection when drawing a new box and when clicking on the map
dragBox.on('drawstart', function() {
selectedFeatures.clear();
infoBox.innerHTML = '&nbsp;';
});
map.on('click', function() {
selectedFeatures.clear();
infoBox.innerHTML = '&nbsp;';
});
</script>
</body>
</html>

最佳答案

这可能是重复的。检查一下here

对于此类操作,您需要使用 JSTS 库。检查上面的链接,它也有一个 fiddle ,以查看它的运行情况

关于javascript - 通过多边形绘制交互进行 Openlayers 3 选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35744848/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com