Skip to content

O
OKU-GIS
Commit 70293fb8 authored by Muhamad's avatar Muhamad
Browse files
Options

func kdb(start)

parent b5d5df4a
Show whitespace changes
Inline Side-by-side
Showing with 250 additions and 5 deletions
templates/includes/js-o.html
View file @ 70293fb8
...@@ -3584,8 +3584,10 @@ ...@@ -3584,8 +3584,10 @@
}); });
map_create_all.on('draw:created', function(e) { map_create_all.on('draw:created', function(e) {
var type = e.layerType, var type = e.layerType,
layer = e.layer; layer = e.layer;
layer.options.color = 'yellow'; layer.options.color = 'yellow';
layer.options.weight = 10; layer.options.weight = 10;
var koordina = "" var koordina = ""
...@@ -3789,7 +3791,7 @@ ...@@ -3789,7 +3791,7 @@
}, 500); }, 500);
$('#create').click(function() { $('#create').click(function() {
map_create_all.enable(); polygonDraweredit.enable();
}); });
var Marker = {}; var Marker = {};
...@@ -3834,10 +3836,10 @@ ...@@ -3834,10 +3836,10 @@
var polygonDraweredit = new L.Draw.Polygon(map_create_all, polygon_options); var polygonDraweredit = new L.Draw.Polygon(map_create_all, polygon_options);
polygonDraweredit.on("click", function(event) { // polygonDraweredit.on("click", function(event) {
shapecoords.innerHTML = event.latlng.toString(); // shapecoords.innerHTML = event.latlng.toString();
map_create_all.fire("click", event); // Trigger a map click as well. // map_create_all.fire("click", event); // Trigger a map click as well.
}); // });
map_create_all.on('draw:created', function(e) { map_create_all.on('draw:created', function(e) {
var type = e.layerType, var type = e.layerType,
...@@ -4096,6 +4098,249 @@ ...@@ -4096,6 +4098,249 @@
}); });
}); });
$(".btn_cek_KDBKLB").click(function() {
$("#modal__create").modal("show");
$(".title-create").html("Cek KDB & KLB")
$(".tombol_action_create").html(`<input type="button" id="create-jal" value="Create" style="z-index: 1000;position:relative;">`)
$(".tab_1").html("Koordinat")
$(".tab_2").html("Informasi")
$("#koordinatjalan").html(`
<div class="form-group">
<div id="map-create-all" style="height: 300px;">
<!-- <div class="tombol_action_create">
<input type="button" class="leaflet-draw-draw-marker" value="Create" style="z-index: 1000;position:relative;">
</div> -->
<div style="margi:10px;">
<input type="button" id="create_poly_rumah" value="Create Polygon Rumah" style="z-index: 1000;position:relative;">
<input type="button" id="create_poly_tanah" value="Create Polygon Tanah" style="z-index: 1000;position:relative;display:none;">
<input type="button" id="delete_poly" value="Delete Polygon" style="z-index: 1000;position:relative;display:none;">
</div>
</div>
</div>`)
$("#informasi_create").html(`
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">Luas Rumah</label>
<div class="col-lg-9">
<input id="luas_polygon_rumah" type="text" class="form-control" value="" required>
</div>
</div>
</div>
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">Luas Tanah</label>
<div class="col-lg-9">
<input id="luas_polygon_tanah" type="text" class="form-control" value="" required>
</div>
</div>
</div>
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">KDB</label>
<div class="col-lg-9">
<input id="KDB_polygon_rumah" type="text" class="form-control" value="" required>
</div>
</div>
</div>
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">KLB</label>
<div class="col-lg-9">
<input id="KLB_polygon_rumah" type="text" class="form-control" value="" required>
</div>
</div>
</div>`);
var map_create_all = L.map('map-create-all', {
editable: true,
zoomControl: false,
drawControl: true
}).setView([e.latlng.lat, e.latlng.lng], 20.5);
L.tileLayer('https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
maxZoom: 22,
minZoom: 4,
}).addTo(map_create_all);
setTimeout(function() {
map_create_all.invalidateSize();
}, 500);
$("#map-create-all > div.leaflet-control-container > div.leaflet-top.leaflet-left > div > div > div").css("display", "none")
$("#create_poly_rumah").click(function() {
$('#create_poly_rumah').css("display", "none")
$('#create_poly_tanah').css("display", "block")
$('#delete_poly').css("display", "block")
polygonDraweredit.enable();
})
$("#create_poly_tanah").click(function() {
$('#create_poly_rumah').css("display", "none")
$('#delete_poly').css("display", "block")
polygonDraweredit_tanah.enable();
})
function get_luas(lt_p, lo_p) {
var lt_po = lt_p
var lo_po = lo_p
var lat_rad = []
var YY = []
var XX = []
var area = []
for (var i = 0; i < lt_po.length; i++) {
lt_rad = lt_po[i] / 180 * (22 / 7)
lat_rad.push(lt_rad)
}
for (var y = 0; y < lt_po.length; y++) {
if (y == 0 || y == lt_po.length - 1) {
YY.push(0)
} else {
yyy = (lt_po[y] - lt_po[0]) / 360 * (6378137 * 2 * (22 / 7))
YY.push(yyy)
}
}
for (var x = 0; x < lo_po.length; x++) {
if (x == 0 || x == lo_po.length - 1) {
XX.push(0)
} else {
xxx = (lo_po[x] - lo_po[0]) / 360 * (6378137 * 2 * (22 / 7) * Math.cos(lat_rad[x]))
XX.push(xxx)
}
}
for (var i = 0; i < lo_po.length; i++) {
if (i == 0 || i == lo_po.length - 1) {
area.push(0)
} else {
are = ((YY[i - 1] * XX[i]) - (XX[i - 1] * YY[i])) / 2
area.push(are)
}
}
function getSum(total, num) {
return total + Math.round(num);
}
var luas_area = area.reduce(getSum, 0)
return luas_area
}
var luas_all = []
map_create_all.on(L.Draw.Event.CREATED, function(e) {
var type = e.layerType;
var layer = e.layer;
var shape = layer.toGeoJSON();
let geoShape = shape.geometry.coordinates[0];
let kordinat = "";
var lt_p = []
var lo_p = []
for (j in geoShape) {
kordinat += geoShape[j][0] + ' ' + geoShape[j][1];
lt_p.push(geoShape[j][1])
lo_p.push(geoShape[j][0])
if (j <= (geoShape.length - 2)) {
kordinat += ', ';
}
}
luas_all.push(get_luas(lt_p, lo_p))
alert(luas_all)
//res_kord.push(kordinat)
window.thisBaseDrawPolygonLayer = layer;
});
polygon_options = {
showArea: false,
shapeOptions: {
stroke: true,
color: '#6e83f0',
weight: 1.5,
opacity: 2,
fill: true,
fillColor: null, //same as color by default
fillOpacity: 0.3,
clickable: true
}
}
polygon_options_tanah = {
showArea: false,
shapeOptions: {
stroke: true,
color: '#fff',
weight: 1.5,
opacity: 2,
fill: true,
fillColor: null, //same as color by default
fillOpacity: 0.3,
clickable: true
}
}
var polygonDraweredit_tanah = new L.Draw.Polygon(map_create_all, polygon_options_tanah);
var polygonDraweredit = new L.Draw.Polygon(map_create_all, polygon_options);
// polygonDraweredit.on("click", function(event) {
// shapecoords.innerHTML = event.latlng.toString();
// map_create_all.fire("click", event); // Trigger a map click as well.
// });
//
// polygonDraweredit_tanah.on("click", function(event) {
// var type = event.layerType;map_
// shapecoords.innerHTML = event.latlng.toString();
// map_create_all.fire("click", event); // Trigger a map click as well.
// });
map_create_all.on('draw:created', function(e) {
var type = e.layerType,
layer = e.layer;
var lay = layer.addTo(map_create_all);
Poly = lay;
});
$("#delete_poly").click(function() {
if (map_create_all.hasLayer(lay)) {
lay.remove()
}
})
})
}); });
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment