134 lines
4.8 KiB
PHP
Executable File
134 lines
4.8 KiB
PHP
Executable File
<?php
|
|
|
|
use common\models\GisBase;
|
|
use yii\helpers\Url;
|
|
|
|
$this->title = 'แผนที่';
|
|
?>
|
|
<!-- Leaflet -->
|
|
<?php $this->registerCssFile("https://unpkg.com/leaflet/dist/leaflet.css") ?>
|
|
<?php $this->registerJsFile("https://unpkg.com/leaflet/dist/leaflet.js") ?>
|
|
<!-- Leaflet Draw -->
|
|
<?php $this->registerCssFile("https://unpkg.com/leaflet-draw/dist/leaflet.draw.css") ?>
|
|
<?php $this->registerJsFile("https://unpkg.com/leaflet-draw/dist/leaflet.draw.js") ?>
|
|
|
|
<?php $this->registerCssFile("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css") ?>
|
|
|
|
|
|
|
|
<h5><i class="bi bi-layers"></i> เลือกชั้นข้อมูล</h5>
|
|
<select id="layerSelector" class="form-select form-select-sm mt-2">
|
|
<option value="">-- กรุณาเลือก --</option>
|
|
<?php foreach (GisBase::find()->all() as $base) { ?>
|
|
<option value="<?= $base->id ?>"><?= $base->name ?></option>
|
|
<?php } ?>
|
|
</select>
|
|
|
|
<div id="map" style="height: 800px;"></div>
|
|
|
|
|
|
|
|
<style>
|
|
#map {
|
|
height: 800px;
|
|
border-radius: 0.5rem;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
border: 1px solid #ccc;
|
|
}
|
|
|
|
.map-wrapper {
|
|
padding: 1rem;
|
|
}
|
|
</style>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
const map = L.map("map").setView([15.233509, 104.325743], 14);
|
|
const geoLayerGroup = L.layerGroup().addTo(map);
|
|
|
|
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
|
|
attribution: "© OpenStreetMap contributors"
|
|
}).addTo(map);
|
|
|
|
const layerSelector = document.getElementById("layerSelector");
|
|
|
|
function loadGeoLayer(gis_base_id = "") {
|
|
geoLayerGroup.clearLayers();
|
|
|
|
let url = '<?= Url::to(['/map/map/geojson']) ?>';
|
|
if (gis_base_id) {
|
|
url += '?GisGeoFeatures[gis_base_id]=' + encodeURIComponent(gis_base_id);
|
|
}
|
|
|
|
fetch(url)
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
L.geoJSON(data, {
|
|
/*pointToLayer: function(feature, latlng) {
|
|
const color = feature.properties?.color || '#dc3545';
|
|
|
|
return L.circleMarker(latlng, {
|
|
radius: 8,
|
|
fillColor: color,
|
|
color: '#000',
|
|
weight: 1,
|
|
opacity: 1,
|
|
fillOpacity: 0.8
|
|
});
|
|
},*/
|
|
pointToLayer: function(feature, latlng) {
|
|
const color = feature.properties?.color || '#007bff';
|
|
|
|
const icon = L.divIcon({
|
|
className: 'custom-div-icon',
|
|
html: `<div style="background:${color}; width:12px; height:12px; border-radius:50%; border:2px solid white;"></div>`,
|
|
iconSize: [16, 16],
|
|
iconAnchor: [8, 8]
|
|
});
|
|
|
|
return L.marker(latlng, {
|
|
icon
|
|
});
|
|
},
|
|
style: function(feature) {
|
|
return {
|
|
color: feature.properties?.color || '#0d6efd',
|
|
weight: 2,
|
|
fillOpacity: 0.3
|
|
};
|
|
},
|
|
onEachFeature: function(feature, layer) {
|
|
if (feature.properties.interactive === false) {
|
|
// ✅ ปิดการคลิกเฉพาะ feature นี้
|
|
layer.options.interactive = false;
|
|
layer.off(); // remove all event listeners
|
|
} else {
|
|
const name = feature.properties?.name || 'ไม่มีชื่อ';
|
|
layer.bindPopup(`<b>${name}</b>`);
|
|
}
|
|
|
|
}
|
|
}).addTo(geoLayerGroup);
|
|
});
|
|
}
|
|
|
|
// โหลดทั้งหมดตอนเริ่ม
|
|
loadGeoLayer();
|
|
|
|
// เมื่อเปลี่ยน dropdown
|
|
layerSelector.addEventListener('change', function() {
|
|
const selected = this.value;
|
|
loadGeoLayer(selected);
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<?php if(false){?>
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">รายการข้อมูล</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
|
|
</div>
|
|
</div>
|
|
<?php }?>
|