From 492113ab01dfcc4e8a58560de42d8dbceb770005 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Wed, 14 Jul 2021 09:22:06 +0800
Subject: [PATCH] 解决页面不显示的问题
---
src/components/map/main.vue | 48 ++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 46 insertions(+), 2 deletions(-)
diff --git a/src/components/map/main.vue b/src/components/map/main.vue
index adf1df2..5633750 100644
--- a/src/components/map/main.vue
+++ b/src/components/map/main.vue
@@ -49,7 +49,8 @@
import Feature from 'ol/Feature.js'
import Point from 'ol/geom/Point.js'
-import { Icon, Style } from 'ol/style.js'
+import LineString from 'ol/geom/LineString.js'
+import { Icon, Style, Fill, Stroke } from 'ol/style.js'
export default {
name: 'Map',
@@ -64,6 +65,10 @@
source: new VectorSource()
}),
carAddlayer: new VectorLayer({ // 图标图层
+ zIndex: 22,
+ source: new VectorSource()
+ }),
+ peopleLineAddlayer: new VectorLayer({ // 图标图层
zIndex: 22,
source: new VectorSource()
}),
@@ -92,7 +97,7 @@
controls: defaults().extend([
new FullScreen(),
new ScaleLine(),
- // new MousePosition(),
+ new MousePosition(),
new Rotate(),
new Attribution()
]),
@@ -117,6 +122,8 @@
ol2d.addLayer(this.gunAddlayer)
ol2d.addLayer(this.peopleAddlayer)
ol2d.addLayer(this.carAddlayer)
+ ol2d.addLayer(this.peopleLineAddlayer)
+ this.addLines()
},
methods: {
init3D (val) {
@@ -158,6 +165,43 @@
iconFeature.setStyle(iconStyle)
this[type].getSource().addFeature(iconFeature)
+ },
+
+ addLines () {
+
+ // 点坐标
+ var lineCoords = [
+ [115.87471898408013, 28.720924466928977],
+ [115.87471898408013, 28.724163802651635],
+ [115.87401037939081, 28.72456871961697],
+ [115.87147964835748, 28.7246699488583],
+ [115.86925260504815, 28.7246699488583],
+ [115.86621572780817, 28.7246699488583],
+ [115.8635837675335, 28.72578347051296]
+ ];// 线里点的集合
+
+ // 要素
+ // var lineCoords = [[featureInfo.lineString[0][0],featureInfo.lineString[0][0]],[featureInfo.lineString(0),featureInfo.lineString(0)]];
+ var feature_LineString = new Feature({
+ geometry: new LineString(lineCoords)
+ });
+
+
+ feature_LineString.setStyle(new Style({
+ //填充色
+ fill: new Fill({
+ color: 'rgba(255, 255, 255, 0.2)'
+ }),
+ //边线颜色
+ stroke: new Stroke({
+ color: 'rgb(252, 94, 32)',
+ width: 5
+ })
+ }))
+
+
+ this.peopleLineAddlayer.getSource().addFeature(feature_LineString)
+
}
}
}
--
Gitblit v1.9.3