gpt4 book ai didi

jquery - OpenLayers 4 - 适合所选要素的范围

转载 作者:行者123 更新时间:2023-12-01 03:59:53 26 4
gpt4 key购买 nike

又是我。所以,昨天我在缩放所选功能时遇到了一些问题,我希望你们中的一些人可以将我推向正确的方向。就这样......

我正在尝试使用 Materialise Materialize Framework 实现自动完成/搜索栏。 (这里是简单搜索栏的 fiddle 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);
}
};

这是我正在尝试迭代并选择放大功能的图层

最佳答案

要素本身没有范围,但它的几何图形有范围:

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);

您不需要将矢量添加到 map 来确定特定要素及其范围:

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);
}
};

关于jquery - OpenLayers 4 - 适合所选要素的范围,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49746970/

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