我再次。所以,昨天我在缩放到选定的功能时遇到了一些问题,我希望你们中的一些人可以把我推向正确的方向。这就是它......
我正在尝试使用Materialise Materialize Framework实现自动填充/搜索栏。 (这是简单搜索栏的小提琴example)
$(document).ready(function(){
$('input.autocomplete').autocomplete({
data: {
"Apple": null,
"Microsoft": null,
"Google": 'https://placehold.it/250x250'
},
});
});
现在,我要做的是使用geojson功能调用和填充数据,并实现适合所选功能的范围。如果我理解正确,我需要保存所选功能的范围并将其传递给
map.getView().fit(selectedFeature.getSource().getExtent(), animationOptions);
或者我这样做完全错了吗?
$(document).ready(function() {
function sendItem(val) {
console.log(val);
}
var animationOptions = {
duration: 2000,
easing: ol.easing.easeOut
};
$(function() {
$.ajax({
type: 'GET',
url: 'geojson/jls.geojson',
dataType: 'json',
success: function(response) {
var jls_array = response;
var features = jls_array.features;
var jls = {};
for (var i = 0; i < features.length; i++) {
var geo = features[i].properties;
jls[geo['JLS_IME']] = null;
}
console.log(jls)
$('input.autocomplete').autocomplete({
data: jls,
limit: 5,
onAutocomplete: function(txt) {
sendItem(txt);
map.getView().fit(vectorJLS.getSource().getExtent(), animationOptions);
}
});
}
});
});
});
这是我的geojson对象的例子
{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name":"EPSG:3765" } },
"features": [
{ "type": "Feature", "properties": { "JLS_MB": "00116", "JLS_IME": "BEDEKOVČINA", "JLS_ST": "OP", "JLS_SJ": "Bedekovčina", "ZU_RB": "02", "ZU_IME": "Krapinsko-zagorska", "ZU_SJ": "Krapina", "pov": 51.42 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 461117.98, 5108379.85 ], [ 461124.53, 5108368.39 ], [ 461132.37, 5108354.26 ]...
更新 - 解决方案
所以,正如其他人 Dube 很好地指出了逻辑和实用的解决方案,他用简单的.find()方法在geojson图层源中找到要素和缩放所选要素。
在ajax调用
之前,我只调整了一些现有代码和添加的变量var source_layer = vectorJLS.getSource(); // collecting layer source
$(function() {
$.ajax({
type: 'GET',
url: 'geojson/jls.geojson',
dataType: 'json'.....
onAutocomplete: function(txt) {
var feature = source_layer.getFeatures().find(function(f) { return f.get('JLS_IME') === txt; });
if (feature) {
const extent = feature.getGeometry().getExtent()
map.getView().fit(extent);
}
};
这是我试图迭代的图层,然后选择放大特征
答案 0 :(得分:1)
我不确定你的地图应用程序应该如何工作,但我认为如果你想处理所选的功能('ol / interaction / select')你应该使用Select-Interaction,因为你可以使用所有被触发的事件并为您的选择设置自定义样式。选择交互的内容是ol.Collection,其中包含您选择的功能。因此,除了Vectorlayer之外,您还应该实现Select-Interaction:
const selectedItems = new ol.interaction.Select({
layers: [yourbasicvectorlayer],
style: new ol.style.Style({...})
});
//Listen if any new items are pushed into the selection
selectedItems.getFeatures().on('add', function(feature) {
//for one feature:
map.getView().fit(feature.getGeometry().getExtent(), AnimationOptions);
//for multiple features --> so everytime a new is added
//Create an empty extent like:
let extent = new ol.extent.createEmpty();
selectedItems.getFeatures().forEach(feature) {
//add extent of every feature to the extent
extent = new ol.extent.extend(extent, feature.getGeometry().getExtent();
}
map.getView().fit(extent, animationOptions);
})
// Dont forget to add the Select Interaction to the map
map.addInteraction(selectedItems).
//you can fill the selection interaction programmatically
selectedItems.getFeatures().push(yourfeature);
没有测试过代码。使用Select-Interaction,它的开销更大,但结构更好。您也可以使用侦听器中的部件来实现单多功能方法。 如果我完全误解,请告诉我: - )
答案 1 :(得分:1)
要素本身没有范围,但它的几何有一个:
const extent = feature.getGeometry().getExtent()
map.getView().fit(extent);
但是,到目前为止,您似乎没有OpenLayers功能对象,只是一个普通的json对象,您在ajax响应中获得了该对象。让我们改变它:
var source = new ol.source.Vector({
features: (new ol.format.GeoJSON({
featureProjection: "EPSG:3765" // probably not required in your case
})).readFeatures(featureCollection);
您无需将矢量添加到地图中以确定特定功能及其范围:
onAutocomplete: function(txt) {
var feature = source.getFeatures().find(function(f) { return f.get('JLS_IME') === txt; });
if (feature) {
const extent = feature.getGeometry().getExtent()
map.getView().fit(extent);
}
};