Блог

Главная - Вопросы по программированию - Тепловая карта Leafletjs

Тепловая карта Leafletjs

#leaflet #zooming #heatmap

#листовка #масштабирование #тепловая карта

Вопрос:

Листовка имеет хороший слой тепловой карты, но с которым я сталкиваюсь с трудностями при масштабировании карты. Я могу установить для данных радиус 0,1, и они выглядят очень красиво, когда у меня уровень масштабирования 8. карта на уровне масштабирования 8Если пользователь увеличивает масштаб до уровня, скажем, 10, карта полностью покрывается тепловой картой. карта при увеличении 10Кроме того, если пользователь уменьшит масштаб до уровня 6, тепловая карта станет невидимой. карта на уровне масштабирования 6

Может кто-нибудь, пожалуйста, дайте мне знать, как масштабировать радиус точек данных тепловой карты, чтобы получить эффект, аналогичный эффекту тепловой карты Google Maps? Спасибо!

ОТРЕДАКТИРОВАНО:
Я использовал тепловую карту от Патрика Уилда heatmap.js
Код, который я использовал, выглядит следующим образом:

       <script>
    window.onload = function() {
      var myData = {
        max: 1000,
        data: [
          {lat: 50.32638, lng: 9.81727, count: 1},
          {lat: 50.31009, lng: 9.57019, count: 1},
          {lat: 50.31257, lng: 9.44102, count: 1},
          ]
      };
      var baseLayer = L.tileLayer(
        'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
          attribution: 'Map data amp;copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
          maxZoom: 18,
          minZoom: 7
        }
      );
      var cfg = {
        "radius": .1,
        "maxOpacity": 1,
        "scaleRadius": true,
        "useLocalExtrema": true,
        latField: 'lat',
        lngField: 'lng',
        valueField: 'count'
      };
      var heatmapLayer = new HeatmapOverlay(cfg);
      var map = new L.Map('map', {
        center: new L.LatLng(50.339247, 9.902947),
        zoom: 8,
        layers: [baseLayer, heatmapLayer]
      });
      heatmapLayer.setData(myData);
      layer = heatmapLayer;
    };
  </script>

Комментарии:

1. Листовка не поставляется с какими-либо встроенными функциями тепловой карты. Используете ли вы плагин? Если да, то какой? leaflet.heat является популярным. Их пример , похоже, ведет себя аналогично Google . Пожалуйста, опубликуйте некоторый код, чтобы мы знали, как вы создали свою карту.

2. Дорогой @sethlutske, спасибо за ответ! Я использовал Patrick Wield’s github.com/pa7/heatmap.js Из-за ограничений по пространству я ввел код, который использовал при «редактировании» исходного сообщения.

3. Итак, вы выбрали scaleRadius значение true, что и вызывает ваше поведение. Я думаю scaleRadius: false , это даст вам то, что вы хотите. Я попытался реализовать это в этом codesandbox , но он выдал мне ошибку о высоте холста. Учитывая, что этот плагин не использовался примерно 5 лет, я не собираюсь спускаться в кроличью нору, пытаясь его отладить, но, похоже, это было бы вашим лучшим примером. Или используйте другой плагин и посмотрите, сможете ли вы достичь желаемых результатов.

4. Спасибо за совет! scaleRadius: false не сработало, но я решил переключиться на leaflet.heat , который, кажется, работает намного лучше.

Метки: