Приблизительное расстояние Mapbox GL от bbox

Я использую Mapbox GL JS, чтобы узнать ближайшие объекты к точке, по которой пользователь щелкнул на карте. Он отлично работает. Но я хотел бы вывести приблизительное расстояние. Код, который я использую, приведен ниже...

function nearestFeature(y,x) { 
    var bbox = [[y, x], [y, x]];
    var featuresBuilding = map.queryRenderedFeatures(bbox, { layers: ['MyBuildingLayer'] });
    if (featuresBuilding[0]) {
        //found
    }else{
        //widen the area
        for (i = 1;i<100;i++) {
            bbox = [[y-i, x-i], [y+i, x+i]];
            featuresBuilding = map.queryRenderedFeatures(bbox, { layers: ['MyBuildingLayer'] });
            if (featuresBuilding[0]) { 
                //calculate distance
                var distance = 100*i; 
                break;
            }
        }
    }
}

Я мог бы усложнить эту проблему, но, по сути, мне нужно определить расстояние, на которое разница в точках приходится на X / Y, и умножить расстояние в метрах, чтобы получить приблизительную оценку. Я использовал var Distance = 100 * i, чтобы проиллюстрировать это, мне нужно решить, как определить фиктивную цифру 100...


mapbox mapbox-gl-js
person RedCrusador    schedule 10.08.2017    source источник
comment
Ваша цель – прекратить поиск, как только вы наберете X функций? Я думаю, вам нужно уточнить это немного подробнее.   -  person snkashis    schedule 10.08.2017
comment
По сути, я начинаю расширять BBOX, пока не наткнусь на конкретное здание на слое. На самом деле эта информация является дополнительной. Мне нужно выяснить, как преобразовать разницу в точках в расстояние.   -  person RedCrusador    schedule 11.08.2017
comment
Так и не понял, в чем суть вашего вопроса. Может быть, вы можете объяснить, чего вы пытаетесь достичь и в чем заключается проблема. Я могу понять ваш код, но я не понимаю: определите расстояние, на которое разница в точках составляет X / Y.   -  person Andi-lo    schedule 11.08.2017
comment
В моем коде используется точка или пиксель, который мне нужен, чтобы преобразовать это в расстояние. Например, как далеко 5px/points на моей карте, то есть 345 метров.   -  person RedCrusador    schedule 11.08.2017
comment
Если вам нужно перемещаться между географическими и экранными координатами, почему вы не используете project и unproject? mapbox.com/mapbox-gl-js/api/#map# проект   -  person snkashis    schedule 11.08.2017
comment
Вы хотите знать, каково будет покрытие карты в 1 пиксель как расстояние? Или вы хотите рассчитать расстояние между двумя точками (тогда какова ваша вторая точка?)   -  person Andi-lo    schedule 12.08.2017
comment
Да 1px как расстояние, если это то, что мне нужно здесь   -  person RedCrusador    schedule 14.08.2017
comment
Вы должны отредактировать свой вопрос, чтобы уточнить это. В настоящее время это действительно расплывчато, и, как вы видите по количеству комментариев, люди не знают, о чем именно вы просите.   -  person Andi-lo    schedule 15.08.2017

Ответы (1)


arrow_upward
2
arrow_downward

Однажды у меня был проект, в котором мне также нужно было значение 1px в качестве значения расстояния, чтобы создать что-то вроде элемента управления масштабом (https://www.mapbox.com/mapbox-gl-js/api/#scalecontrol)

Решение заключается в использовании ограничивающей рамки текущего окна просмотра для расчета расстояния между двумя точками. Разделив это значение на ширину области просмотра пользователей, вы получите расстояние для 1 пикселя. Я использовал элемент управления масштабом mapbox, чтобы сравнить свои значения с их, и результат кажется разумным.

Я придумал это решение (требуется turf.js). Вы можете увидеть полный рабочий пример на созданном мной быстром jsfiddle: https://jsfiddle.net/andi_lo/38h7m5wx/

function getDistance() {
  const bounds = map.getBounds();
  const topLeft = turf.point([bounds._ne.lng, bounds._ne.lat]);
  const topRight = turf.point([bounds._sw.lng, bounds._ne.lat]);
  const bottomLeft = turf.point([bounds._ne.lng, bounds._sw.lat]);
  const bottomRight = turf.point([bounds._sw.lng, bounds._sw.lat]);
  
  const middleLeft = turf.midpoint(topLeft, bottomLeft);
  const middleRight = turf.midpoint(topRight, bottomRight);
  const distance = turf.distance(middleLeft, middleRight, 'kilometers');
  return distance;
}

const clientWidth = window.innerWidth;
const distance = getDistance();
const onePixel = distance / clientWidth;
console.log(`1px is ~${onePixel.toFixed(3)} km or ${Math.ceil((onePixel) * 1000)} meters`);

person Andi-lo    schedule 15.08.2017