draw more than one polygon

parent d99fa5af
......@@ -144,9 +144,10 @@ function deleteProductFromShoppingCart(id) {
})
}
const drawedPolygons = new Map()
function drawPolygon(element) {
polygonList.forEach(function (polygon) {
if (polygon.id === element.id) {
if (polygon.id === element.id && !drawedPolygons.has(polygon.id)) {
// hide product panel
$('aside').removeClass("control-sidebar-open");
......@@ -158,7 +159,7 @@ function drawPolygon(element) {
$("#ajax-input").val(input_text);
// remove prev polygon
osmap.removePolygon();
// osmap.removePolygon();
// draw wkt polygon
// osmap.addWKTPolygon(polygon.wkt_polygon);
......@@ -170,11 +171,33 @@ function drawPolygon(element) {
// var biggest = osmap.getBiggestPolygon(coords);
// draw coordsR
osmap.addPolygon(coords);
polygon_added = osmap.addPolygon(coords);
drawedPolygons.set(polygon.id, polygon_added)
// show wkt
showWKT();
// add to select
$('#regionSelect').append('<option value="'+polygon.id+'" selected="selected" style="display:none;">'+polygon.city+'</option>');
$('.chosen').trigger('chosen:updated');
}
});
}
function showWKT() {
let wkt_list = []
drawedPolygons.forEach(function(feature) {
wkt_list.push(osmap.getWKT(feature.getGeometry()).replace('POLYGON',''))
})
if (drawedPolygons.size > 1) {
document.getElementById("id_polygon").value = `MULTIPOLYGON(${wkt_list.join()})`;
} else {
document.getElementById("id_polygon").value = `POLYGON${wkt_list.join()}`;
}
}
function erase_input() {
$('#ajax-input').val('');
}
......@@ -390,6 +413,16 @@ $(document).ready(function () {
}
});
$('.chosen').chosen({
placeholder_text_multiple: 'Selected areas'
});
$('.chosen').on('change', function(evt, params) {
osmap.deletefootprint(drawedPolygons.get(params.deselected));
drawedPolygons.delete(params.deselected);
showWKT();
});
// disable enter in search input
$('#ajax-input').on('keyup keypress', function(event) {
var keyCode = event.keyCode || event.which;
......
......@@ -99,7 +99,10 @@ OpenStreetMapsClass.prototype.addPolygon = function(coords)
this.vectorLayer.getSource().addFeature(feature);
// show coords
this.showCoords(feature.getGeometry());
// this.showCoords(feature.getGeometry());
// this.vectorLayer.getSource().clear();
return feature;
}
//------------------------------------------------------------------------------
/**
......@@ -216,6 +219,12 @@ OpenStreetMapsClass.prototype.showCoords = function(geometry)
var wkt_polygon = wkt.writeGeometry(geometry.clone().transform( 'EPSG:3857', 'EPSG:4326'));
document.getElementById("id_polygon").value = wkt_polygon;
}
OpenStreetMapsClass.prototype.getWKT = function(geometry)
{
const wkt = new ol.format.WKT();
return wkt.writeGeometry(geometry.clone().transform( 'EPSG:3857', 'EPSG:4326'));
}
//------------------------------------------------------------------------------
/**
* delete current polygon in map
......
......@@ -9,6 +9,7 @@
<!-- <link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">-->
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css">
<link rel="stylesheet" href="{% static 'catalog/css/waitingModal.css' %}" type="text/css">
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.min.css">
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
......@@ -17,6 +18,7 @@
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="{% static 'catalog/js/openLayers4.js' %}"></script>
<script src="{% static 'catalog/js/sidtMap.js' %}"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script>
{% endblock %}
{% block messages %}
......@@ -134,6 +136,13 @@
</div>
</div>
</form>
<!-- multiple dropdown starts-->
<div class="row" style="margin:0px; padding:0px;">
<div class="col-lg-12">
<select class="chosen" id="regionSelect" multiple="true" style="width:100% !important;"></select>
</div>
</div>
<!-- multiple dropdown ends-->
<!-- /search form -->
<!-- sidebar menu: : style can be found in sidebar.less -->
<!-- <form role="form" target="catalogFrame" action="{% url 'productList' %}" method="post"> -->
......
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