From 331700e7e3bc4d67ceba73a21355ce675b902046 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Fri, 23 Jul 2021 11:22:38 +0800
Subject: [PATCH] 武装押运相关想改
---
src/components/map/main.vue | 107 ++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 85 insertions(+), 22 deletions(-)
diff --git a/src/components/map/main.vue b/src/components/map/main.vue
index 5633750..d20f130 100644
--- a/src/components/map/main.vue
+++ b/src/components/map/main.vue
@@ -7,7 +7,7 @@
* @LastEditTime: 2021-04-24 11:59:43
-->
<template>
- <div id="map"
+ <div id="track_map"
style="height: 100%"></div>
</template>
<script>
@@ -52,6 +52,8 @@
import LineString from 'ol/geom/LineString.js'
import { Icon, Style, Fill, Stroke } from 'ol/style.js'
+import start from '@/assets/img/start.png'
+
export default {
name: 'Map',
data () {
@@ -72,10 +74,15 @@
zIndex: 22,
source: new VectorSource()
}),
+ startPoint: new VectorLayer({ // 图标图层
+ zIndex: 22,
+ source: new VectorSource()
+ }),
+ ol2d: null,
}
},
mounted () {
- const ol2d = new OlMap({
+ this.ol2d = new OlMap({
layers: [
new OlLayerTile({
zIndex: 4,
@@ -97,20 +104,20 @@
controls: defaults().extend([
new FullScreen(),
new ScaleLine(),
- new MousePosition(),
+ // new MousePosition(),
new Rotate(),
new Attribution()
]),
- target: 'map',
+ target: 'track_map',
view: new OlView({
center: [0, 0],
zoom: 2,
projection: 'EPSG:4326'
})
})
- window.ol2d = ol2d
+ window.ol2d = this.ol2d
- var view = ol2d.getView()
+ var view = this.ol2d.getView()
view.setCenter([115.85883507433789, 28.708432053474827])
@@ -119,17 +126,19 @@
const ol3d = new OLCesium({ map: window.ol2d })
window.ol3d = ol3d
- ol2d.addLayer(this.gunAddlayer)
- ol2d.addLayer(this.peopleAddlayer)
- ol2d.addLayer(this.carAddlayer)
- ol2d.addLayer(this.peopleLineAddlayer)
- this.addLines()
+ this.ol2d.addLayer(this.gunAddlayer)
+ this.ol2d.addLayer(this.peopleAddlayer)
+ this.ol2d.addLayer(this.carAddlayer)
+ this.ol2d.addLayer(this.peopleLineAddlayer)
+ this.ol2d.addLayer(this.startPoint)
},
methods: {
init3D (val) {
window.ol3d.setEnabled(val)
},
addEntitys (item, icon, scale, name, type) {
+ this[type].getSource().clear()
+
const iconFeature = new Feature({
geometry: new Point([Number(item.LGTD), Number(item.LTTD)]),
name: name,
@@ -165,20 +174,15 @@
iconFeature.setStyle(iconStyle)
this[type].getSource().addFeature(iconFeature)
+
+ this.flyTo(Number(item.LGTD), Number(item.LTTD), 18)
},
- addLines () {
-
+ addLines (arr) {
+ this.addEntity(arr[0][0], arr[0][1])
+ this.peopleLineAddlayer.getSource().clear()
// 点坐标
- 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 = arr;// 线里点的集合
// 要素
// var lineCoords = [[featureInfo.lineString[0][0],featureInfo.lineString[0][0]],[featureInfo.lineString(0),featureInfo.lineString(0)]];
@@ -202,6 +206,65 @@
this.peopleLineAddlayer.getSource().addFeature(feature_LineString)
+ this.flyTo(arr[Math.ceil(arr.length / 2)][0], arr[Math.ceil(arr.length / 2)][1], 15)
+ },
+
+ addEntity (LGTD, LTTD) {
+ this.startPoint.getSource().clear()
+
+ const iconFeature = new Feature({
+ geometry: new Point([LGTD, LTTD]),
+ name: '起始点',
+ })
+
+ const iconStyle = new Style({
+ // text: new Text({ // 字体, 未成功, 浪费许多时间
+ // font: 'Normal ' + 12 + 'px ' + 'iconfont',
+ // text: "\e645",
+ // fill: new Fill({ color: "green" }),
+ // }),
+
+ image: new Icon({
+ anchor: [0.5, 170], //锚点
+ anchorOrigin: 'top-left', //锚点源
+ anchorXUnits: 'fraction', //锚点X值单位
+ anchorYUnits: 'pixels', //锚点Y值单位
+ offsetOrigin: 'top-left',
+ scale: 0.2,
+ opacity: 1,
+ src: start
+ // src: require('../../assets/Mark.png')
+ })
+
+ // new CircleStyle({ // 普通样式
+ // radius: 6,
+ // fill: new Fill({
+ // color: 'rgba(200, 155, 155, 0.8)'
+ // }),
+ // stroke: new Stroke({
+ // color: 'black',
+ // width: 0.3,
+ // })
+ // }),
+ })
+
+ iconFeature.setStyle(iconStyle)
+
+ this.startPoint.getSource().addFeature(iconFeature)
+
+ },
+
+ clearLine () {
+ this.peopleLineAddlayer.getSource().clear()
+ this.startPoint.getSource().clear()
+ },
+
+ flyTo (lgtd, lttd, size) {
+ var view = this.ol2d.getView()
+
+ view.setCenter([lgtd, lttd])
+
+ view.setZoom(size)
}
}
}
--
Gitblit v1.9.3