Python 如何在MapBox上显示GeoJango中的GeoJson点图层
我试着把GeoDjango模型中的一些点放在基于MapBox的地图上。这是我第一次使用MapBox,我已经看到了如何在MapBox的地图上添加GeoJson 型号.pyPython 如何在MapBox上显示GeoJango中的GeoJson点图层,python,django,mapbox,mapbox-gl-js,geodjango,Python,Django,Mapbox,Mapbox Gl Js,Geodjango,我试着把GeoDjango模型中的一些点放在基于MapBox的地图上。这是我第一次使用MapBox,我已经看到了如何在MapBox的地图上添加GeoJson 型号.py class AddPoint(models.Model): geom = models.PointField() def __int__(self): return self.pk def coordinates_geodjango(self): return str(
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控制台中也没有错误。我怎么了 你就快到了
您已成功将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
}
});
});