From 89b7484e15b159cff7a9191f0b92176fb3c6e215 Mon Sep 17 00:00:00 2001
From: florent <flavelle@neogeo.fr>
Date: Wed, 27 Apr 2022 17:48:27 +0200
Subject: [PATCH] dev
---
src/assets/styles/openlayers-custom.css | 4 +-
src/components/Map/EditingToolbar.vue | 91 +++++++++++++------------
src/services/edition-service.js | 32 +++++----
3 files changed, 68 insertions(+), 59 deletions(-)
diff --git a/src/assets/styles/openlayers-custom.css b/src/assets/styles/openlayers-custom.css
index ffe44fb7..34f063f7 100644
--- a/src/assets/styles/openlayers-custom.css
+++ b/src/assets/styles/openlayers-custom.css
@@ -41,7 +41,7 @@
right: 5px;
}
-.leaflet-bar {
+/* .leaflet-bar {
box-shadow: none !important;
}
@@ -60,7 +60,7 @@
.leaflet-bar a > i {
margin: 0;
-}
+} */
/* For geocoder search bar */
diff --git a/src/components/Map/EditingToolbar.vue b/src/components/Map/EditingToolbar.vue
index e0d7f4a9..3ea23915 100644
--- a/src/components/Map/EditingToolbar.vue
+++ b/src/components/Map/EditingToolbar.vue
@@ -41,20 +41,21 @@
import editionService from '@/services/edition-service';
export default {
+
name: 'EditingToolbar',
+
data() {
return {
editionService: editionService,
};
},
+
computed: {
showDrawTool() {
return this.editionService && this.editionService.editing_feature === undefined;
}
},
- mounted() {
- },
methods: {
update(){
editionService.activeUpdateFeature();
@@ -67,7 +68,8 @@ export default {
};
</script>
-<style scoped>
+<style lang="less" scoped>
+
.editionToolbar{
position: absolute;
top: 80px;
@@ -78,44 +80,49 @@ export default {
background-clip: padding-box;
padding: 0;
border-radius: 2px;
-}
-.leaflet-bar a:first-child {
- border-top-left-radius: 2px;
- border-top-right-radius: 2px;
-}
-.leaflet-bar a:last-child {
- border-bottom-left-radius: 2px;
- border-bottom-right-radius: 2px;
- border-bottom: none;
-}
-.leaflet-bar a, .leaflet-control-layers-toggle {
- background-position: 50% 50%;
- background-repeat: no-repeat;
- display: block;
-}
-.leaflet-bar a {
- background-color: #fff;
- width: 30px;
- height: 30px;
- display: block;
- text-align: center;
- text-decoration: none;
- color: black;
-}
-.leaflet-bar a > i {
- margin: 0;
- vertical-align: middle;
-}
-.list-image-type {
- height: 20px;
- vertical-align: middle;
- margin: 5px 0 5px 0;
-}
-.leaflet-bar a:hover {
- cursor: pointer;
- background-color: #ebebeb;
-}
-.leaflet-bar a:focus {
- background-color: #ebebeb;
+
+ a:first-child {
+ border-top-left-radius: 2px;
+ border-top-right-radius: 2px;
+ }
+ a:last-child {
+ border-bottom-left-radius: 2px;
+ border-bottom-right-radius: 2px;
+ border-bottom: none;
+ }
+
+ a, .leaflet-control-layers-toggle {
+ background-position: 50% 50%;
+ background-repeat: no-repeat;
+ display: block;
+ }
+
+ a {
+ background-color: #fff;
+ width: 30px;
+ height: 30px;
+ display: block;
+ text-align: center;
+ text-decoration: none;
+ color: black;
+
+ i {
+ margin: 0;
+ vertical-align: middle;
+ }
+ }
+
+ .list-image-type {
+ height: 20px;
+ vertical-align: middle;
+ margin: 5px 0 5px 0;
+ }
+ a:hover {
+ cursor: pointer !important;
+ background-color: #ebebeb !important;
+ }
+ a:focus {
+ background-color: #ebebeb !important;
+ }
}
</style>
diff --git a/src/services/edition-service.js b/src/services/edition-service.js
index c0c9f85d..fdb63c61 100644
--- a/src/services/edition-service.js
+++ b/src/services/edition-service.js
@@ -12,6 +12,11 @@ import VectorLayer from 'ol/layer/Vector';
import mapService from '@/services/map-service';
import { buffer } from 'ol/extent';
+// device detection
+const isMobile = /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent)
+//eslint-disable-next-line
+ || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4));
+
const editionService = {
editing_feature: {},
geom_type: 'linestring',
@@ -52,7 +57,7 @@ const editionService = {
},
startEditFeature(feature){
- this.editing_feature=feature;
+ this.editing_feature = feature;
this.draw.setActive(false);
this.drawSource.addFeature(feature);
this.drawnItems.setZIndex(50);
@@ -60,7 +65,7 @@ const editionService = {
},
addEditionControls(geomType) {
- this.geom_type=geomType;
+ this.geom_type = geomType;
this.drawSource = new VectorSource();
this.drawnItems = new VectorLayer({
source: this.drawSource,
@@ -80,21 +85,10 @@ const editionService = {
gType = GeometryType.LINE_STRING;
}
- let isMobile = false;
- // device detection
- if (
- /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent)
- //eslint-disable-next-line
- || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))
- ) {
- isMobile = true;
- }
-
this.draw = new Draw({
source: this.drawSource,
type: gType,
style: this.drawStyle,
- freehand: isMobile,
//geometryName: layer.getGeomAttributeName()
});
mapService.getMap().addInteraction(this.draw);
@@ -127,6 +121,16 @@ const editionService = {
})
]
});
+
+ // On mobile stop drawing when selecting a drawn point
+ if (isMobile) {
+ this.selectForUpdate.once('select', () => {
+ if (this.draw.getActive() && this.draw.sketchCoords_.length > 2) {
+ this.draw.finishDrawing();
+ }
+ });
+ }
+
this.modify = new Modify({
style: this.drawStyle,
features: this.selectForUpdate.getFeatures()
@@ -154,8 +158,6 @@ const editionService = {
mapService.getMap().addInteraction(this.modify);
// je garde ce bout de code pour l'implementation a venir du snapping
//map.addInteraction(snap);
-
-
},
resetAllTools() {
if (this.draw) {
--
GitLab