Ajoutez des fichiers projet.
This commit is contained in:
@@ -0,0 +1,31 @@
|
||||
.switch-type {
|
||||
background-repeat: no-repeat;
|
||||
cursor: pointer;
|
||||
top: 0.5em;
|
||||
width: 22px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.type-Point {
|
||||
background-image: url("../img/draw_point_off.svg");
|
||||
right: 5px;
|
||||
}
|
||||
.type-Point.type-active {
|
||||
background-image: url("../img/draw_point_on.svg");
|
||||
}
|
||||
|
||||
.type-LineString {
|
||||
background-image: url("../img/draw_line_off.svg");
|
||||
right: 30px;
|
||||
}
|
||||
.type-LineString.type-active {
|
||||
background-image: url("../img/draw_line_on.svg");
|
||||
}
|
||||
|
||||
.type-Polygon {
|
||||
background-image: url("../img/draw_polygon_off.svg");
|
||||
right: 55px;
|
||||
}
|
||||
.type-Polygon.type-active {
|
||||
background-image: url("../img/draw_polygon_on.svg");
|
||||
}
|
@@ -0,0 +1 @@
|
||||
<svg width="22" height="20" viewBox="0 0 1000 915" xmlns="http://www.w3.org/2000/svg"><g><rect fill="#EDEDE8" x="20" y="20" width="960" height="875" rx="119" ry="119"/><path fill="#9F9F93" class="fil1" d="M139 0l722 0c38,0 73,16 98,41 25,25 41,60 41,98l0 637c0,38 -16,73 -41,98 -25,25 -60,41 -98,41l-722 0c-38,0 -73,-16 -98,-41 -25,-25 -41,-60 -41,-98l0 -637c0,-38 16,-73 41,-98 25,-25 60,-41 98,-41zm722 40l-722 0c-27,0 -52,11 -70,29 -18,18 -29,43 -29,70l0 637c0,27 11,52 29,70 18,18 43,29 70,29l722 0c27,0 52,-11 70,-29 18,-18 29,-43 29,-70l0 -637c0,-27 -11,-52 -29,-70 -18,-18 -43,-29 -70,-29z"/><polygon fill="#ABABA7" class="fil2" points="159,536 378,194 848,368 761,713 738,707 820,383 387,222 179,548 "/><circle fill="#000000" cx="383" cy="208" r="49"/><circle fill="#000000" cx="169" cy="542" r="49"/><circle fill="#000000" cx="834" cy="375" r="49"/><circle fill="#000000" cx="749" cy="710" r="49"/></g></svg>
|
After Width: | Height: | Size: 918 B |
@@ -0,0 +1 @@
|
||||
<svg width="22" height="20" viewBox="0 0 1000 915" xmlns="http://www.w3.org/2000/svg"><g><rect fill="#F3C022" x="20" y="20" width="960" height="875" rx="119" ry="119"/><path fill="#9F9F93" d="M139 0l722 0c38,0 73,16 98,41 25,25 41,60 41,98l0 637c0,38 -16,73 -41,98 -25,25 -60,41 -98,41l-722 0c-38,0 -73,-16 -98,-41 -25,-25 -41,-60 -41,-98l0 -637c0,-38 16,-73 41,-98 25,-25 60,-41 98,-41zm722 40l-722 0c-27,0 -52,11 -70,29 -18,18 -29,43 -29,70l0 637c0,27 11,52 29,70 18,18 43,29 70,29l722 0c27,0 52,-11 70,-29 18,-18 29,-43 29,-70l0 -637c0,-27 -11,-52 -29,-70 -18,-18 -43,-29 -70,-29z"/><polygon fill="#B08A15" points="159,536 378,194 848,368 761,713 738,707 820,383 387,222 179,548 "/><circle fill="#000000" cx="383" cy="208" r="49"/><circle fill="#000000" cx="169" cy="542" r="49"/><circle fill="#000000" cx="834" cy="375" r="49"/><circle fill="#000000" cx="749" cy="710" r="49"/></g></svg>
|
After Width: | Height: | Size: 892 B |
@@ -0,0 +1 @@
|
||||
<svg width="22" height="20" viewBox="0 0 1000 915" xmlns="http://www.w3.org/2000/svg"><g><rect fill="#EDEDE8" x="20" y="20" width="960" height="875" rx="119" ry="119"/><path fill="#9F9F93" d="M139 0l722 0c38,0 73,16 98,41 25,25 41,60 41,98l0 637c0,38 -16,73 -41,98 -25,25 -60,41 -98,41l-722 0c-38,0 -73,-16 -98,-41 -25,-25 -41,-60 -41,-98l0 -637c0,-38 16,-73 41,-98 25,-25 60,-41 98,-41zm722 40l-722 0c-27,0 -52,11 -70,29 -18,18 -29,43 -29,70l0 637c0,27 11,52 29,70 18,18 43,29 70,29l722 0c27,0 52,-11 70,-29 18,-18 29,-43 29,-70l0 -637c0,-27 -11,-52 -29,-70 -18,-18 -43,-29 -70,-29z"/><path fill="#000000" d="M573 269l114 114 -289 288 -114 -114 289 -288zm200 -28l-51 -50c-19,-20 -51,-20 -71,0l-49 48 114 114 57 -57c15,-15 15,-39 0,-55zm-548 476c-2,10 6,18 15,16l127 -31 -113 -114 -29 129z"/></g></svg>
|
After Width: | Height: | Size: 803 B |
@@ -0,0 +1 @@
|
||||
<svg width="22" height="20" viewBox="0 0 1000 915" xmlns="http://www.w3.org/2000/svg"><g><rect fill="#F3C022" x="20" y="20" width="960" height="875" rx="119" ry="119"/><path fill="#9F9F93" d="M139 0l722 0c38,0 73,16 98,41 25,25 41,60 41,98l0 637c0,38 -16,73 -41,98 -25,25 -60,41 -98,41l-722 0c-38,0 -73,-16 -98,-41 -25,-25 -41,-60 -41,-98l0 -637c0,-38 16,-73 41,-98 25,-25 60,-41 98,-41zm722 40l-722 0c-27,0 -52,11 -70,29 -18,18 -29,43 -29,70l0 637c0,27 11,52 29,70 18,18 43,29 70,29l722 0c27,0 52,-11 70,-29 18,-18 29,-43 29,-70l0 -637c0,-27 -11,-52 -29,-70 -18,-18 -43,-29 -70,-29z"/><path fill="#000000" d="M573 269l114 114 -289 288 -114 -114 289 -288zm200 -28l-51 -50c-19,-20 -51,-20 -71,0l-49 48 114 114 57 -57c15,-15 15,-39 0,-55zm-548 476c-2,10 6,18 15,16l127 -31 -113 -114 -29 129z"/></g></svg>
|
After Width: | Height: | Size: 803 B |
@@ -0,0 +1 @@
|
||||
<svg width="22" height="20" viewBox="0 0 1000 915" xmlns="http://www.w3.org/2000/svg"><g><rect fill="#EDEDE8" x="20" y="20" width="960" height="875" rx="119" ry="119"/><path fill="#9F9F93" d="M139 0l722 0c38,0 73,16 98,41 25,25 41,60 41,98l0 637c0,38 -16,73 -41,98 -25,25 -60,41 -98,41l-722 0c-38,0 -73,-16 -98,-41 -25,-25 -41,-60 -41,-98l0 -637c0,-38 16,-73 41,-98 25,-25 60,-41 98,-41zm722 40l-722 0c-27,0 -52,11 -70,29 -18,18 -29,43 -29,70l0 637c0,27 11,52 29,70 18,18 43,29 70,29l722 0c27,0 52,-11 70,-29 18,-18 29,-43 29,-70l0 -637c0,-27 -11,-52 -29,-70 -18,-18 -43,-29 -70,-29z"/><polygon fill="#F1DFAC" points="169,542 749,710 834,375 383,208 "/><path fill="ABABA7" d="M188 535l553 160 79 -312 -433 -161 -199 313zm558 186l-595 -172 227 -355 470 174 -90 356 -12 -3z"/><circle fill="#000000" cx="383" cy="208" r="49"/><circle fill="#000000" cx="169" cy="542" r="49"/><circle fill="#000000" cx="834" cy="375" r="49"/><circle fill="#000000" cx="749" cy="710" r="49"/></g></svg>
|
After Width: | Height: | Size: 981 B |
@@ -0,0 +1 @@
|
||||
<svg width="22" height="20" viewBox="0 0 1000 915" xmlns="http://www.w3.org/2000/svg"><g><rect fill="#F3C022" x="20" y="20" width="960" height="875" rx="119" ry="119"/><path fill="#9F9F93" d="M139 0l722 0c38,0 73,16 98,41 25,25 41,60 41,98l0 637c0,38 -16,73 -41,98 -25,25 -60,41 -98,41l-722 0c-38,0 -73,-16 -98,-41 -25,-25 -41,-60 -41,-98l0 -637c0,-38 16,-73 41,-98 25,-25 60,-41 98,-41zm722 40l-722 0c-27,0 -52,11 -70,29 -18,18 -29,43 -29,70l0 637c0,27 11,52 29,70 18,18 43,29 70,29l722 0c27,0 52,-11 70,-29 18,-18 29,-43 29,-70l0 -637c0,-27 -11,-52 -29,-70 -18,-18 -43,-29 -70,-29z"/><polygon fill="#F7D56E" points="169,542 749,710 834,375 383,208 "/><path fill="#B08A15" d="M188 535l553 160 79 -312 -433 -161 -199 313zm558 186l-595 -172 227 -355 470 174 -90 356 -12 -3z"/><circle fill="#000000" cx="383" cy="208" r="49"/><circle fill="#000000" cx="169" cy="542" r="49"/><circle fill="#000000" cx="834" cy="375" r="49"/><circle fill="#000000" cx="749" cy="710" r="49"/></g></svg>
|
After Width: | Height: | Size: 982 B |
@@ -0,0 +1,228 @@
|
||||
/* global ol */
|
||||
'use strict';
|
||||
function GeometryTypeControl(opt_options) {
|
||||
// Map control to switch type when geometry type is unknown
|
||||
const options = opt_options || {};
|
||||
|
||||
const element = document.createElement('div');
|
||||
element.className = 'switch-type type-' + options.type + ' ol-control ol-unselectable';
|
||||
if (options.active) {
|
||||
element.classList.add("type-active");
|
||||
}
|
||||
|
||||
const self = this;
|
||||
const switchType = function(e) {
|
||||
e.preventDefault();
|
||||
if (options.widget.currentGeometryType !== self) {
|
||||
options.widget.map.removeInteraction(options.widget.interactions.draw);
|
||||
options.widget.interactions.draw = new ol.interaction.Draw({
|
||||
features: options.widget.featureCollection,
|
||||
type: options.type
|
||||
});
|
||||
options.widget.map.addInteraction(options.widget.interactions.draw);
|
||||
options.widget.currentGeometryType.element.classList.remove('type-active');
|
||||
options.widget.currentGeometryType = self;
|
||||
element.classList.add("type-active");
|
||||
}
|
||||
};
|
||||
|
||||
element.addEventListener('click', switchType, false);
|
||||
element.addEventListener('touchstart', switchType, false);
|
||||
|
||||
ol.control.Control.call(this, {
|
||||
element: element
|
||||
});
|
||||
};
|
||||
ol.inherits(GeometryTypeControl, ol.control.Control);
|
||||
|
||||
// TODO: allow deleting individual features (#8972)
|
||||
{
|
||||
const jsonFormat = new ol.format.GeoJSON();
|
||||
|
||||
function MapWidget(options) {
|
||||
this.map = null;
|
||||
this.interactions = {draw: null, modify: null};
|
||||
this.typeChoices = false;
|
||||
this.ready = false;
|
||||
|
||||
// Default options
|
||||
this.options = {
|
||||
default_lat: 0,
|
||||
default_lon: 0,
|
||||
default_zoom: 12,
|
||||
is_collection: options.geom_name.includes('Multi') || options.geom_name.includes('Collection')
|
||||
};
|
||||
|
||||
// Altering using user-provided options
|
||||
for (const property in options) {
|
||||
if (options.hasOwnProperty(property)) {
|
||||
this.options[property] = options[property];
|
||||
}
|
||||
}
|
||||
if (!options.base_layer) {
|
||||
this.options.base_layer = new ol.layer.Tile({source: new ol.source.OSM()});
|
||||
}
|
||||
|
||||
this.map = this.createMap();
|
||||
this.featureCollection = new ol.Collection();
|
||||
this.featureOverlay = new ol.layer.Vector({
|
||||
map: this.map,
|
||||
source: new ol.source.Vector({
|
||||
features: this.featureCollection,
|
||||
useSpatialIndex: false // improve performance
|
||||
}),
|
||||
updateWhileAnimating: true, // optional, for instant visual feedback
|
||||
updateWhileInteracting: true // optional, for instant visual feedback
|
||||
});
|
||||
|
||||
// Populate and set handlers for the feature container
|
||||
const self = this;
|
||||
this.featureCollection.on('add', function(event) {
|
||||
const feature = event.element;
|
||||
feature.on('change', function() {
|
||||
self.serializeFeatures();
|
||||
});
|
||||
if (self.ready) {
|
||||
self.serializeFeatures();
|
||||
if (!self.options.is_collection) {
|
||||
self.disableDrawing(); // Only allow one feature at a time
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const initial_value = document.getElementById(this.options.id).value;
|
||||
if (initial_value) {
|
||||
const features = jsonFormat.readFeatures('{"type": "Feature", "geometry": ' + initial_value + '}');
|
||||
const extent = ol.extent.createEmpty();
|
||||
features.forEach(function(feature) {
|
||||
this.featureOverlay.getSource().addFeature(feature);
|
||||
ol.extent.extend(extent, feature.getGeometry().getExtent());
|
||||
}, this);
|
||||
// Center/zoom the map
|
||||
this.map.getView().fit(extent, {maxZoom: this.options.default_zoom});
|
||||
} else {
|
||||
this.map.getView().setCenter(this.defaultCenter());
|
||||
}
|
||||
this.createInteractions();
|
||||
if (initial_value && !this.options.is_collection) {
|
||||
this.disableDrawing();
|
||||
}
|
||||
this.ready = true;
|
||||
}
|
||||
|
||||
MapWidget.prototype.createMap = function() {
|
||||
const map = new ol.Map({
|
||||
target: this.options.map_id,
|
||||
layers: [this.options.base_layer],
|
||||
view: new ol.View({
|
||||
zoom: this.options.default_zoom
|
||||
})
|
||||
});
|
||||
return map;
|
||||
};
|
||||
|
||||
MapWidget.prototype.createInteractions = function() {
|
||||
// Initialize the modify interaction
|
||||
this.interactions.modify = new ol.interaction.Modify({
|
||||
features: this.featureCollection,
|
||||
deleteCondition: function(event) {
|
||||
return ol.events.condition.shiftKeyOnly(event) &&
|
||||
ol.events.condition.singleClick(event);
|
||||
}
|
||||
});
|
||||
|
||||
// Initialize the draw interaction
|
||||
let geomType = this.options.geom_name;
|
||||
if (geomType === "Geometry" || geomType === "GeometryCollection") {
|
||||
// Default to Point, but create icons to switch type
|
||||
geomType = "Point";
|
||||
this.currentGeometryType = new GeometryTypeControl({widget: this, type: "Point", active: true});
|
||||
this.map.addControl(this.currentGeometryType);
|
||||
this.map.addControl(new GeometryTypeControl({widget: this, type: "LineString", active: false}));
|
||||
this.map.addControl(new GeometryTypeControl({widget: this, type: "Polygon", active: false}));
|
||||
this.typeChoices = true;
|
||||
}
|
||||
this.interactions.draw = new ol.interaction.Draw({
|
||||
features: this.featureCollection,
|
||||
type: geomType
|
||||
});
|
||||
|
||||
this.map.addInteraction(this.interactions.draw);
|
||||
this.map.addInteraction(this.interactions.modify);
|
||||
};
|
||||
|
||||
MapWidget.prototype.defaultCenter = function() {
|
||||
const center = [this.options.default_lon, this.options.default_lat];
|
||||
if (this.options.map_srid) {
|
||||
return ol.proj.transform(center, 'EPSG:4326', this.map.getView().getProjection());
|
||||
}
|
||||
return center;
|
||||
};
|
||||
|
||||
MapWidget.prototype.enableDrawing = function() {
|
||||
this.interactions.draw.setActive(true);
|
||||
if (this.typeChoices) {
|
||||
// Show geometry type icons
|
||||
const divs = document.getElementsByClassName("switch-type");
|
||||
for (let i = 0; i !== divs.length; i++) {
|
||||
divs[i].style.visibility = "visible";
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
MapWidget.prototype.disableDrawing = function() {
|
||||
if (this.interactions.draw) {
|
||||
this.interactions.draw.setActive(false);
|
||||
if (this.typeChoices) {
|
||||
// Hide geometry type icons
|
||||
const divs = document.getElementsByClassName("switch-type");
|
||||
for (let i = 0; i !== divs.length; i++) {
|
||||
divs[i].style.visibility = "hidden";
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
MapWidget.prototype.clearFeatures = function() {
|
||||
this.featureCollection.clear();
|
||||
// Empty textarea widget
|
||||
document.getElementById(this.options.id).value = '';
|
||||
this.enableDrawing();
|
||||
};
|
||||
|
||||
MapWidget.prototype.serializeFeatures = function() {
|
||||
// Three use cases: GeometryCollection, multigeometries, and single geometry
|
||||
let geometry = null;
|
||||
const features = this.featureOverlay.getSource().getFeatures();
|
||||
if (this.options.is_collection) {
|
||||
if (this.options.geom_name === "GeometryCollection") {
|
||||
const geometries = [];
|
||||
for (let i = 0; i < features.length; i++) {
|
||||
geometries.push(features[i].getGeometry());
|
||||
}
|
||||
geometry = new ol.geom.GeometryCollection(geometries);
|
||||
} else {
|
||||
geometry = features[0].getGeometry().clone();
|
||||
for (let j = 1; j < features.length; j++) {
|
||||
switch (geometry.getType()) {
|
||||
case "MultiPoint":
|
||||
geometry.appendPoint(features[j].getGeometry().getPoint(0));
|
||||
break;
|
||||
case "MultiLineString":
|
||||
geometry.appendLineString(features[j].getGeometry().getLineString(0));
|
||||
break;
|
||||
case "MultiPolygon":
|
||||
geometry.appendPolygon(features[j].getGeometry().getPolygon(0));
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (features[0]) {
|
||||
geometry = features[0].getGeometry();
|
||||
}
|
||||
}
|
||||
document.getElementById(this.options.id).value = jsonFormat.writeGeometry(geometry);
|
||||
};
|
||||
|
||||
window.MapWidget = MapWidget;
|
||||
}
|
Reference in New Issue
Block a user