OpenLayers 4-适合所选功能 [英] OpenLayers 4 - fit to extent of selected features
问题描述
又是我.因此,昨天我在缩放到选定的功能时遇到了一个问题,我希望你们中的一些人可以将我推向正确的方向.在这里...
Me again. So, yesterday I faced a bit of a problem with zooming to selected features and I'm hoping that some of you can push me in right direction.Here it goes...
我正在尝试使用Materialize Materialize Framework 来实现自动完成/搜索栏. (以下是简单搜索栏的示例)
I'm trying to implement autocomplete/search bar using Materialize Materialize Framework. (Here is fiddle example of simple searchbar)
$(document).ready(function(){
$('input.autocomplete').autocomplete({
data: {
"Apple": null,
"Microsoft": null,
"Google": 'https://placehold.it/250x250'
},
});
});
现在,我想做的是使用geojson功能调用和填充数据,并实现针对所选功能的范围拟合.如果我理解正确,则需要保存所选功能的范围并用
Now, what I'm trying to do is to call and populate data using geojson features and to implement fit to extent for selected feature. If I'm understanding correctly I need to save extent for selected feature and pass it in with
map.getView().fit(selectedFeature.getSource().getExtent(), animationOptions);
还是我做这件事完全错误?
Or Am I doing this completely wrong?
$(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对象的示例
And here is example of my geojson object
{
"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层源中查找特征并缩放选定的特征.
So, as fellow Dube nicely pointed out with logical and practical solution where he's finding feature and zooming selected feature within geojson layer source with simple .find() method.
在ajax调用之前,我只调整了一些带有添加变量的现有代码
I only tweaked a bit existing code with added variable before ajax call
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);
}
};
这是我要迭代的图层,并选择放大功能
Here is layer that I'm trying to iterate and on select to zoom on feature
推荐答案
要素本身不具有范围,但是其几何图形具有一个范围:
The feature itself does not have an extent, but it's geometry has one:
const extent = feature.getGeometry().getExtent()
map.getView().fit(extent);
但是,到目前为止,您似乎还没有在ajax响应中获得的OpenLayers功能对象,只是一个普通的json对象.让我们对其进行转换:
However, so far you seem not to have OpenLayers feature objects, just a plain json object, which you got in the ajax response. Let's transform it:
var source = new ol.source.Vector({
features: (new ol.format.GeoJSON({
featureProjection: "EPSG:3765" // probably not required in your case
})).readFeatures(featureCollection);
您无需将矢量添加到地图即可确定特定特征及其范围:
You do not need to add the vector to the map to determine the specific feature and it's extent:
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);
}
};
这篇关于OpenLayers 4-适合所选功能的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!