MVCモデルにLeafletを組み込む

事例の概要

  • 事例2で示したコードは、①WordPressのサブクエリー・サブループによるテキスト表示、②HTMLによる背景地図の表示、③Leaflet.jsによる事物の描画を順に行うものでした。
  • 本事例では、コードの再利用性を高めることを目的に、①②③をそれぞれ別のClassに記述します。

コード例

//外部からLeafletを操作する(オブジエクト指向MVCモデル)
class code40309
{

static public $const = array() ;//クラス定数を定義
	
	public function __construct()
	{
		$args = array(
			'model' => '37694',
			'view' => '40309',
			'pattern_m' => 'Sour',
			'entity_from' => 'Term',
			'entity_to' => 'Post',
			'post_type' => 'post',
			'orand' => 'and',			
			'tax' => array('region','genre'),//地域、ジャンル
			'field_value' => array('9809','10274'),	//台東区、商店街		
		);
		$user = new Controller37694($args) ;
	
		$user = new View40309Map() ;
		
		$user = new View40309Mapmarker() ;
			
	}
}

//表示を行うクラス(View)
class View40309
{
	public function __construct($par)
	{
		$array2 = code40309::$const ;//クラス定数を読み込み
		$num = $par->num ;
		$num = $num-1 ;
		$id = get_the_ID() ;
		$title = get_post($id)->post_title ;
		$lat = get_post_meta($id, 'latitude', true);//緯度
		$lon = get_post_meta($id, 'longitude', true);//経度
		$array2[] = [$id, $lat, $lon, $num, $title];//多次元配列に要素を追加
		code40309::$const = $array2 ;//クラス定数へ書き込み
				
		?><a class="<?php
			echo $par2->id ;
			echo ' ' ;
			echo 'tag' ;
		?>"href="<?php
			echo get_permalink();
		?>" onmouseover="<?php
			echo 'popupOn('.$num.');' ;
		?>"><?php	
			the_title() ;
			echo "<br>\n" ;
		?></a><?php

	}//endfunction
}//endclass


//背景地図を表示するクラス
class View40309Map
{
	public function __construct()
	{
?>
	<body>
    	<div id="map_3" style="height: 400px;"></div>
	</body>

<script>
	var osm = new L.tileLayer
	('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    	maxZoom: 19,
    	attribution: "Map data © <a href='https://www.openstreetmap.org/copyright' target='_blank'>OpenStreetMap</a> contributors"
	});
	
	var map_3 = L.map('map_3', {
		//layers: [osm,old1],
		layers: [osm],	
		center: [35.712364,139.787258],
		zoom: 14,
    	zoomControl: true
		});
</script>

<?php
	}//endfunction
}//endclass

//マーカーを表示するクラス
class View40309Mapmarker
{
	public function __construct()
	{
		$map_marker_json2 = json_encode(code40309::$const);
		?>
<script>
		var array = JSON.parse('<?php echo $map_marker_json2; ?>');
		var addmarker=[];
		var i = 0
		array.forEach(function(id){
    		addmarker[i]=L.marker([id[1],id[2]]).addTo(map_3).bindPopup(id[4]);
			i++;
		});//endeach

  //ポップアップを開く関数
  function popupOn(id){
    addmarker[id].openPopup();
  }

</script>
<?php
	}//endfunction
}//endclass

上記コードの実行結果

参考文献

参考記事