draw more than one polygon

parent d99fa5af
...@@ -144,9 +144,10 @@ function deleteProductFromShoppingCart(id) { ...@@ -144,9 +144,10 @@ function deleteProductFromShoppingCart(id) {
}) })
} }
const drawedPolygons = new Map()
function drawPolygon(element) { function drawPolygon(element) {
polygonList.forEach(function (polygon) { polygonList.forEach(function (polygon) {
if (polygon.id === element.id) { if (polygon.id === element.id && !drawedPolygons.has(polygon.id)) {
// hide product panel // hide product panel
$('aside').removeClass("control-sidebar-open"); $('aside').removeClass("control-sidebar-open");
...@@ -158,7 +159,7 @@ function drawPolygon(element) { ...@@ -158,7 +159,7 @@ function drawPolygon(element) {
$("#ajax-input").val(input_text); $("#ajax-input").val(input_text);
// remove prev polygon // remove prev polygon
osmap.removePolygon(); // osmap.removePolygon();
// draw wkt polygon // draw wkt polygon
// osmap.addWKTPolygon(polygon.wkt_polygon); // osmap.addWKTPolygon(polygon.wkt_polygon);
...@@ -170,11 +171,33 @@ function drawPolygon(element) { ...@@ -170,11 +171,33 @@ function drawPolygon(element) {
// var biggest = osmap.getBiggestPolygon(coords); // var biggest = osmap.getBiggestPolygon(coords);
// draw coordsR // 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() { function erase_input() {
$('#ajax-input').val(''); $('#ajax-input').val('');
} }
...@@ -390,6 +413,16 @@ $(document).ready(function () { ...@@ -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 // disable enter in search input
$('#ajax-input').on('keyup keypress', function(event) { $('#ajax-input').on('keyup keypress', function(event) {
var keyCode = event.keyCode || event.which; var keyCode = event.keyCode || event.which;
......
...@@ -99,7 +99,10 @@ OpenStreetMapsClass.prototype.addPolygon = function(coords) ...@@ -99,7 +99,10 @@ OpenStreetMapsClass.prototype.addPolygon = function(coords)
this.vectorLayer.getSource().addFeature(feature); this.vectorLayer.getSource().addFeature(feature);
// show coords // 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) ...@@ -216,6 +219,12 @@ OpenStreetMapsClass.prototype.showCoords = function(geometry)
var wkt_polygon = wkt.writeGeometry(geometry.clone().transform( 'EPSG:3857', 'EPSG:4326')); var wkt_polygon = wkt.writeGeometry(geometry.clone().transform( 'EPSG:3857', 'EPSG:4326'));
document.getElementById("id_polygon").value = wkt_polygon; 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 * delete current polygon in map
......
...@@ -9,6 +9,7 @@ ...@@ -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://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="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" 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> <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
...@@ -17,6 +18,7 @@ ...@@ -17,6 +18,7 @@
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <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/openLayers4.js' %}"></script>
<script src="{% static 'catalog/js/sidtMap.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 %} {% endblock %}
{% block messages %} {% block messages %}
...@@ -123,10 +125,10 @@ ...@@ -123,10 +125,10 @@
<div class="input-group"> <div class="input-group">
<input type="text" id="ajax-input" value="" name="value" class="form-control" autocomplete="off" placeholder="Search region..."> <input type="text" id="ajax-input" value="" name="value" class="form-control" autocomplete="off" placeholder="Search region...">
<span class="input-group-btn"> <span class="input-group-btn">
<button type="button" name="search" id="erase-btn" class="btn btn-flat" onclick="erase_input()"> <button type="button" name="search" id="erase-btn" class="btn btn-flat" onclick="erase_input()">
<i class="fa fa-eraser"></i> <i class="fa fa-eraser"></i>
</button> </button>
</span> </span>
</div> </div>
<div class="row" id="option-list"> <div class="row" id="option-list">
<div class="col-12"> <div class="col-12">
...@@ -134,6 +136,13 @@ ...@@ -134,6 +136,13 @@
</div> </div>
</div> </div>
</form> </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 --> <!-- /search form -->
<!-- sidebar menu: : style can be found in sidebar.less --> <!-- sidebar menu: : style can be found in sidebar.less -->
<!-- <form role="form" target="catalogFrame" action="{% url 'productList' %}" method="post"> --> <!-- <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