95 lines
3.2 KiB
PHP
95 lines
3.2 KiB
PHP
|
<?php
|
||
|
|
|
||
|
|
use common\models\GisBase;
|
||
|
|
use yii\helpers\ArrayHelper;
|
||
|
|
use yii\helpers\Html;
|
||
|
|
use yii\helpers\Url;
|
||
|
|
use yii\widgets\ActiveForm;
|
||
|
|
|
||
|
|
/** @var yii\web\View $this */
|
||
|
|
/** @var common\models\GisGeoFeatures $model */
|
||
|
|
/** @var yii\widgets\ActiveForm $form */
|
||
|
|
?>
|
||
|
|
<!-- 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") ?>
|
||
|
|
|
||
|
|
<div id="map" style="height: 600px;"></div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
document.addEventListener("DOMContentLoaded", function() {
|
||
|
|
const map = L.map("map").setView([15.233509, 104.325743], 14); // ตำแหน่งเริ่มต้นประเทศไทย
|
||
|
|
|
||
|
|
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
|
||
|
|
attribution: "© OpenStreetMap contributors"
|
||
|
|
}).addTo(map);
|
||
|
|
|
||
|
|
const drawnItems = new L.FeatureGroup();
|
||
|
|
map.addLayer(drawnItems);
|
||
|
|
|
||
|
|
const drawControl = new L.Control.Draw({
|
||
|
|
draw: {
|
||
|
|
marker: true, // จุด (Point)
|
||
|
|
polyline: true, // เส้น (Line)
|
||
|
|
polygon: true, // พื้นที่ (Polygon)
|
||
|
|
circle: false,
|
||
|
|
rectangle: false
|
||
|
|
},
|
||
|
|
edit: {
|
||
|
|
featureGroup: drawnItems,
|
||
|
|
remove: true
|
||
|
|
}
|
||
|
|
});
|
||
|
|
map.addControl(drawControl);
|
||
|
|
|
||
|
|
// เก็บ Geometry ลง hidden input
|
||
|
|
map.on(L.Draw.Event.CREATED, function(e) {
|
||
|
|
const layer = e.layer;
|
||
|
|
drawnItems.addLayer(layer);
|
||
|
|
const geojson = layer.toGeoJSON();
|
||
|
|
document.getElementById("geometry").value = JSON.stringify(geojson.geometry);
|
||
|
|
});
|
||
|
|
|
||
|
|
// ลบแล้วล้างค่า geometry
|
||
|
|
map.on(L.Draw.Event.DELETED, function() {
|
||
|
|
document.getElementById("geometry").value = "";
|
||
|
|
});
|
||
|
|
|
||
|
|
fetch('<?= Url::to(['/map/map/geojson']) ?>') // ✅ URL ไปยัง controller ที่คุณสร้าง
|
||
|
|
.then(res => res.json())
|
||
|
|
.then(data => {
|
||
|
|
L.geoJSON(data, {
|
||
|
|
onEachFeature: function(feature, layer) {
|
||
|
|
layer.bindPopup('' + feature.properties.name);
|
||
|
|
},
|
||
|
|
style: {
|
||
|
|
color: '#3388ff',
|
||
|
|
weight: 2,
|
||
|
|
fillOpacity: 0.2
|
||
|
|
}
|
||
|
|
}).addTo(map);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div class="gis-geo-features-form">
|
||
|
|
|
||
|
|
<?php $form = ActiveForm::begin(); ?>
|
||
|
|
|
||
|
|
<?= $form->field($model, 'gis_base_id')->dropDownList(ArrayHelper::map(GisBase::find()->all(), 'id', 'name')) ?>
|
||
|
|
|
||
|
|
<?= $form->field($model, 'name')->textInput(['maxlength' => true]) ?>
|
||
|
|
|
||
|
|
<?= $form->field($model, 'geometry')->label(false)->hiddenInput(['id' => 'geometry']) ?>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="form-group">
|
||
|
|
<?= Html::submitButton('Save', ['class' => 'btn btn-success']) ?>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<?php ActiveForm::end(); ?>
|
||
|
|
|
||
|
|
</div>
|