Как показать слой точек GeoJson из GeoDjango на MapBox - PullRequest
Новая
       86

Как показать слой точек GeoJson из GeoDjango на MapBox

1 голос
/ 08 октября 2019

Я пытаюсь поместить некоторые точки из модели GeoDjango на карту, основанную на MapBox. Впервые я использую MapBox и здесь Я видел, как можно добавить GeoJson на карту MapBox.

models.py 

class AddPoint(models.Model):
    geom = models.PointField()

    def __int__(self):
        return self.pk

    def coordinates_geodjango(self):
        return str(self.geom.x) + ', ' + str(self.geom.y)

map.html 

mapboxgl.accessToken = 'my.access.token';
var map = new mapboxgl.Map({
    container: 'map',
    accessToken: mapboxgl.accessToken,
    style: 'mapbox://styles/maxdragonheart/cjxkimp5j5s0o1ct4b68n4x1p', 
    minZoom: 2,
    maxZoom: 22,
    logoPosition: 'bottom-right',
    center: [15,41],
    zoom: 4,
})

map.on('load', function () {

  map.addSource('some id', {
     type: 'geojson',
     data: {
         "type": "FeatureCollection",
         "features": [{% for point in geo_objects %}
           {
             "type": "Feature",
             "properties": {
               "pk": "{{ point.pk }}"
             },
             "geometry": {
               "type": "Point",
               "coordinates": [{{ point.coordinates_geodjango }}]
             }
           {% if forloop.last %}} {% else %}}, {% endif %}{% endfor %}
         ]
     }
  });

});

Когда я вижу источник страницы, я вижу список точек: 

map.addSource('some id', {
     type: 'geojson',
     data: {
         "type": "FeatureCollection",
         "features": [
           {
             "type": "Feature",
             "properties": {
               "pk": "3"
             },
             "geometry": {
               "type": "Point",
               "coordinates": [15.996093749999993, 41.24477234308207]
             }
           }, 
           {
             "type": "Feature",
             "properties": {
               "pk": "2"
             },
             "geometry": {
               "type": "Point",
               "coordinates": [12.392578124999993, 43.13306116240612]
             }
           }, 
           {
             "type": "Feature",
             "properties": {
               "pk": "1"
             },
             "geometry": {
               "type": "Point",
               "coordinates": [14.348144531249998, 40.96330795307351]
             }
           } 
         ]
     }
  });

Проблема в том, чтоточки не отображаются на карте, и в консоли Chrome нет ошибок. Что я не прав?

1 Ответ

1 голос
/ 08 октября 2019

Вы почти у цели.

Вам удалось добавить источник GeoJSON на карту, но вы не создали слой из этого источника.

Давайте последуем этому примеру и измените его в соответствии с нашими текущими потребностями: 

map.on('load', function () {

  map.addSource('some-id', {
     type: 'geojson',
     data: {
         "type": "FeatureCollection",
         "features": [{% for point in geo_objects %}
           {
             "type": "Feature",
             "properties": {
               "pk": "{{ point.pk }}"
             },
             "geometry": {
               "type": "Point",
               "coordinates": [{{ point.coordinates_geodjango }}]
             }
           {% if forloop.last %}} {% else %}}, {% endif %}{% endfor %}
         ]
     }
  });

  map.addLayer({
    "id": "some-other-id",
    "type": "fill",
    "source": "some-id", // Here is the part where you add the source to a layer.
    "paint": {
      "fill-color": "#888888",
      "fill-opacity": 0.4
    }
  });
});

Существует прямой способ сделать это, как показано в этом другом примере (изменено для нашего случая, конечно!):

map.on('load', function() {
  map.addLayer({
    "id": "some-other-id",
    "type": "fill",
    "source": {
      type: 'geojson',
      data: {
        "type": "FeatureCollection",
        "features": [{% for point in geo_objects %}
          {
            "type": "Feature",
            "properties": {
              "pk": "{{ point.pk }}"
            },
            "geometry": {
              "type": "Point",
              "coordinates": [{{ point.coordinates_geodjango }}]
            }
          {% if forloop.last %}} {% else %}}, {% endif %}{% endfor %}
        ]
      }
    },
    "paint": {
      "fill-color": "#888888",
      "fill-opacity": 0.4
    }
  });
});
...