diadia

興味があることをやってみる。自分のメモを残しておきます。

geodjangoでポリゴンデータを表示したい

前提

モデルにポリゴンデータを格納済みで、views.pyで如何にして表示させるかを焦点とする。

資料:
https://medium.com/@h4k1m0u/display-a-polygonized-raster-in-a-django-webapp-1-2-polygonize-a-raster-and-save-polygons-to-the-7779680a029e

https://github.com/makinacorpus/django-leaflet/issues/211

参考先

https://www.youtube.com/watch?v=ieJ0J-iFJuY

マップに描画するまでのイメージ:
templateを呼び出すためのviewを用意することに加え、polygonデータを呼び出すためのviewの2つを用意する。前者を使ってleafletのマップをテンプレートに表示させる。テンプレート内にjavascriptのコードを記述する。ロジックはpolygonデータの変数を作成する。jQueryのgetJSONを使い、読み込んだpolygonデータをmapに加える。

<!DOCTYPE html>
<html>
<head>
{% load leaflet_tags %}
{% leaflet_css %}
{% leaflet_js %}
<style type="text/css">
	.leaflet-container {height : 80%;}
</style>
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<h1>list</h1>


<div style="height :1200px;">
{% leaflet_map "main" callback="map_init_basic" %}
</div>

<script type="text/javascript">
	function map_init_basic(map, options){
	
		var polygons = "{% url 'prefecturas:data' %}";
		console.log(polygons);
		$.getJSON(polygons, function(data){
			//console.log(data);
			L.geoJson(data).addTo(map);

		})
}
</script>
</body>
</html>