事例の概要
- 事例２で示したコードは、①WordPressのサブクエリー・サブループによるテキスト表示、②HTMLによる背景地図の表示、③Leaflet.jsによる事物の描画を順に行うものでした。
- 本事例では、コードの再利用性を高めることを目的に、①②③をそれぞれ別のClassに記述します。
コード例
//外部からLeafletを操作する（オブジエクト指向ＭＶＣモデル）
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