1

common/helper.js

@@ -12,6 +12,10 @@ import {
 	getArea,
 	getLength
 } from 'ol/sphere.js';
+import {
+	LineString
+} from "ol/geom";
+
 
 const serverUrl = 'https://app.hycdyzt.com';
 const geoserverUrl = 'http://47.109.60.82:8080';
@@ -31,6 +35,76 @@ const formatArea = function(polygon) {
 	}
 	return output;
 };
+const formatLength = function(line) {
+	const length = getLength(line, {
+		projection: 'EPSG:4326'
+	});
+	let output;
+	if (length > 100) {
+		output = Math.round((length / 1000) * 100) / 100 + ' ' + 'km';
+	} else {
+		output = Math.round(length * 100) / 100 + ' ' + 'm';
+	}
+	return output;
+};
+
+const generateStyle = (feature, {
+	fillOpt,
+	strokeOpt
+}) => {
+	let area = 0;
+	const geom = feature.getGeometry();
+	let lineStyle;
+	if (geom.getType() === 'Polygon') {
+		area = formatArea(geom);
+		const lineString = new LineString(geom.getCoordinates()[0]);
+		const length = formatLength(lineString);
+		lineStyle = new Style({
+			geometry: lineString,
+			text: new TextStyle({
+				text: length,
+				"textBaseline": "middle",
+				"font": "bold 10px/1 Verdana",
+				"offsetX": 0,
+				"offsetY": 0,
+				fill: new Fill({
+					color: 'rgba(255, 255, 255, 1)',
+				}),
+				stroke: new Stroke({
+					width: 2,
+					color: 'rgba(0, 0, 0, 1)',
+				}),
+				"placement": "line",
+				"maxAngle": 0.7853981633974483,
+				"overflow": true,
+				"rotation": 0
+			})
+		})
+	}
+	return [new Style({
+		fill: new Fill({
+			...fillOpt
+		}),
+		stroke: new Stroke({
+			width: 2,
+			...strokeOpt
+		}),
+		text: geom.getType() !== 'Polygon' ? undefined : new TextStyle({
+			text: area,
+			"textBaseline": "middle",
+			"font": "bold 10px/1 Verdana",
+			"offsetX": 0,
+			"offsetY": 0,
+			fill: new Fill({
+				color: 'rgba(0, 0, 0, 0.9)',
+			}),
+			"placement": "point",
+			"maxAngle": 0.7853981633974483,
+			"overflow": true,
+			"rotation": 0
+		})
+	}), lineStyle].filter(item => item);
+}
 
 const startMeasure = (map, callback) => {
 	map.removeLayer(map.getAllLayers().find(l => l.get('id') === 'draw-layer'));
@@ -40,31 +114,17 @@ const startMeasure = (map, callback) => {
 		id: 'draw-layer',
 		source: source,
 		style: feature => {
-			const area = formatArea(feature.getGeometry());
-			return new Style({
-				fill: new Fill({
+			return generateStyle(feature, {
+				fillOpt: {
 					color: 'rgba(255, 255, 255, 0.4)',
-				}),
-				stroke: new Stroke({
+				},
+				strokeOpt: {
 					color: '#ffcc33',
 					width: 2,
-				}),
-				text: new TextStyle({
-					text: area,
-					"textBaseline": "middle",
-					"font": "bold 10px/1 Verdana",
-					"offsetX": 0,
-					"offsetY": 0,
-					fill: new Fill({
-						color: 'rgba(0, 0, 0, 0.9)',
-					}),
-					"placement": "point",
-					"maxAngle": 0.7853981633974483,
-					"overflow": true,
-					"rotation": 0
-				})
+				}
 			})
 		}
+
 	});
 
 	const draw = new Draw({
@@ -73,32 +133,16 @@ const startMeasure = (map, callback) => {
 		stopClick: true,
 		freehand: true,
 		style: function(feature) {
-			const area = formatArea(feature.getGeometry());
-			console.log(feature.getGeometry().getCoordinates())
-			return new Style({
-				fill: new Fill({
+			return generateStyle(feature, {
+				fillOpt: {
 					color: 'rgba(255, 255, 255, 0.2)',
-				}),
-				stroke: new Stroke({
+				},
+				strokeOpt: {
 					color: 'rgba(0, 0, 0, 0.5)',
 					lineDash: [10, 10],
 					width: 2,
-				}),
-				text: new TextStyle({
-					text: area,
-					"textBaseline": "middle",
-					"font": "bold 10px/1 Verdana",
-					"offsetX": 0,
-					"offsetY": 0,
-					fill: new Fill({
-						color: 'rgba(0, 0, 0, 0.9)',
-					}),
-					"placement": "point",
-					"maxAngle": 0.7853981633974483,
-					"overflow": true,
-					"rotation": 0
-				}),
-			});;
+				}
+			})
 		},
 	});
 	map.addInteraction(draw);
@@ -116,5 +160,8 @@ export default {
 	globalMap,
 	mgServerUrl,
 	startMeasure,
-	tempToken: ''
+	tempToken: '',
+	formatArea,
+	formatLength,
+	generateStyle
 }

pages/index/index.vue

@@ -167,12 +167,19 @@
 		},
 		onLoad() {
 			this.token = helper.tempToken;
+			let testIndex = 0;
 			uni.onLocationChange(res => {
+				let {
+					longitude,
+					latitude
+				} = res;
+				// longitude = longitude + 0.01 * testIndex * (testIndex % 2 ? 1 : -1);
+				// latitude = latitude + 0.01 * testIndex * (testIndex % 2 ? 1 : -1);
+				// ++testIndex;
 				if (!this.xzgjPoints.find(point => {
-						return point[0] === res.longitude && point[1] === res
-							.latitude;
+						return point[0] === longitude && point[1] === latitude;
 					})) {
-					this.xzgjPoints.push([res.longitude, res.latitude]);
+					this.xzgjPoints.push([longitude, latitude]);
 				}
 				console.log(this.xzgjPoints)
 				if (this.xzgjPoints.length >= 3) {
@@ -439,7 +446,8 @@
 		Icon as IconStyle,
 		Circle as CircleStyle,
 		Fill,
-		Stroke
+		Stroke,
+		Text as TextStyle
 	} from 'ol/style'
 	import helper from '../../common/helper';
 	import {
@@ -454,7 +462,7 @@
 	} from 'ol/format'
 	import {
 		getForViewAndSize
-	} from 'ol/extent'
+	} from 'ol/extent';
 	let map, vectorLayer;
 	export default {
 		name: 'c-ol-map',
@@ -574,34 +582,19 @@
 						const feature = new Feature({
 							geometry: polygon
 						})
-						const area = helper.formatArea(polygon);
-						const style = new Style({
-							fill: new Fill({
+						const style = helper.generateStyle(feature, {
+							fillOpt: {
 								color: 'rgba(255, 255, 255, 0.4)',
-							}),
-							stroke: new Stroke({
+							},
+							strokeOpt: {
 								color: '#ffcc33',
 								width: 2,
-							}),
-							text: new TextStyle({
-								text: area,
-								"textBaseline": "middle",
-								"font": "bold 10px/1 Verdana",
-								"offsetX": 0,
-								"offsetY": 0,
-								fill: new Fill({
-									color: 'rgba(0, 0, 0, 0.9)',
-								}),
-								"placement": "point",
-								"maxAngle": 0.7853981633974483,
-								"overflow": true,
-								"rotation": 0
-							})
+							}
 						})
-
 						feature.setStyle(style);
 						vectorLayer.getSource().addFeature(feature)
-						const geom = polygon.clone().scale(0.5, 0.5);
+						const geom = polygon.clone();
+						geom.scale(0.5, 0.5)
 						map.getView().fit(geom)
 					}
 				}