Django GIS и leaflet, как конвертировать zoom в radius?

134
23 июля 2019, 19:40

На клиенте я по умолчанию выставляю zoom равный 13:

  <no-ssr>
    <l-map
      :zoom="13"
      :center="[coordinates.lat, coordinates.lng]"
      :options="options"
    >
      <l-tile-layer
        url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"
      />
      <l-marker
        v-for="marker in markers"
        :key="marker.id"
        :lat-lng="[marker.lat, marker.lng]"
      >
        <l-popup>{{ marker.popUpText }}</l-popup>
      </l-marker>
    </l-map>
  </no-ssr>

Но на стороне сервера я не хочу получать ВСЕ точки на карте:

Place.objects.all()

А хочу получить те, которые находятся в радиусе видимости пользователя, как-то так:

from django.contrib.gis.geos import Point
from django.contrib.gis.measure import Distance  

lat = 52.5
lng = 1.0
radius = 10
point = Point(lng, lat)    
Place.objects.filter(location__distance_lt=(point, Distance(km=radius)))

Вопрос в том, как я могу конвертировать zoom полученный на клиенте, в radius используемый в запросах на сервере?

Answer 1

Делать нужно так:

  1. Указываем ref в <l-map>
      <no-ssr>
        <l-map
          ref="map"
          :zoom="13"
          :center="[coordinates.lat, coordinates.lng]"
          :options="options"
        >
          <l-tile-layer
            url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"
          />
          <l-marker
            v-for="marker in markers"
            :key="marker.id"
            :lat-lng="[marker.lat, marker.lng]"
          >
            <l-popup>{{ marker.popUpText }}</l-popup>
          </l-marker>
        </l-map>
      </no-ssr>
  1. Получаем необходимые данные для подсчёта:
      let map = this.$refs.map.mapObject
      center = map.getCenter()
      zoom = map.getZoom()
      bounds = map.getBounds()
      let boundNorthEast = bounds.getSouthWest()
      let distance = boundNorthEast.distanceTo(center)
      let radius = distance / 1000
      let latitude = center.lat
      let longitude = center.lng

Ну а далее, отправляем данные на сервер.

READ ALSO
Не работает context.scale(-1, 1);

Не работает context.scale(-1, 1);

Не работает contextscale(-1, 1) для отражения картинки на канвасе

127
Поэтапный опросник на JavaScript

Поэтапный опросник на JavaScript

Имея такой код я хочу сделать логику опросника подобную этой: https://nasty6typeform

408
Преобразование скалярных типов при сравнении JavaScript

Преобразование скалярных типов при сравнении JavaScript

Объясните, пожалуйста, почему из трех алертов ниже исполняется только последний? Вроде как во всех трёх случаях идет мягкое сравнение на равенство...

170
Подскажите хороший слайдер [закрыт]

Подскажите хороший слайдер [закрыт]

Нужен слайдер, где будет отображаться три окна и при клике на PREV NEXT будут внутри трёх окон меняться картинкиРазмеры окон разные: будут картинки...

153