370 lines
11 KiB
Vue
370 lines
11 KiB
Vue
<template>
|
||
<div id="content">
|
||
<div id="map" ref="map" style="width: 100vw; height: 100vh"/>
|
||
<div id="overlay-box"/>
|
||
<div class="actionList">
|
||
<van-grid :column-num="3">
|
||
<van-grid-item>
|
||
<van-button size="mini" type="primary" @click="canAddPoints=true">开始新增点位</van-button>
|
||
</van-grid-item>
|
||
<van-grid-item>
|
||
<van-button size="mini" type="primary" @click="canAddPoints=false">结束新增点位</van-button>
|
||
</van-grid-item>
|
||
<van-grid-item>
|
||
<van-button size="mini" type="primary" @click="clearPointsLayers">清除点位</van-button>
|
||
</van-grid-item>
|
||
<van-grid-item>
|
||
<van-button size="mini" type="primary" @click="startAnimation()">开始沿轨迹运动</van-button>
|
||
</van-grid-item>
|
||
<van-grid-item>
|
||
<van-button size="mini" type="primary" @click="stopAnimation()">结束沿轨迹运动</van-button>
|
||
</van-grid-item>
|
||
<van-grid-item>
|
||
<van-button size="mini" type="primary" @click="planningPath()">planningPath</van-button>
|
||
</van-grid-item>
|
||
</van-grid>
|
||
<br/>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import "ol/ol.css";
|
||
import TileLayer from "ol/layer/Tile";
|
||
import VectorLayer from "ol/layer/Vector";
|
||
import VectorSource from "ol/source/Vector";
|
||
import XYZ from "ol/source/XYZ";
|
||
import {Map, View, Feature} from "ol";
|
||
import { Icon, Fill, Stroke, Style, Circle } from "ol/style";
|
||
import Overlay from "ol/Overlay";
|
||
import {Point, LineString} from "ol/geom.js";
|
||
import { getVectorContext } from "ol/render";
|
||
import axios from "axios";
|
||
|
||
|
||
|
||
|
||
|
||
import {OL as ol} from "plot-ol/plottingol";
|
||
export default {
|
||
data() {
|
||
return {
|
||
map: {},
|
||
pointLayer: {},
|
||
canAddPoints: false,
|
||
coordinate: [],
|
||
route: new LineString([[12496610.1929, 2476571.7426],[12496623.829, 2476586.2505]]),
|
||
route1: new LineString([[113.95113841271974,22.568523240293505],[113.94452944970705,22.563351941312792],[113.95188943124391,22.559317898954394],[113.94467965341188,22.555326771940233]]),
|
||
geometryMove: {},
|
||
featureMove: {},
|
||
styles: {
|
||
route: new Style({
|
||
stroke: new Stroke({
|
||
width: 6,
|
||
color: [237, 212, 0, 0.8],
|
||
}),
|
||
}),
|
||
icon: new Style({
|
||
image: new Icon({
|
||
anchor: [0.5, 1],
|
||
src: "https://openlayers.org/en/v4.6.5/examples/data/icon.png",
|
||
scale: 1, //设置大小
|
||
}),
|
||
}),
|
||
featureMove: new Style({
|
||
image: new Circle({
|
||
radius: 7,
|
||
fill: new Fill({color: "black"}),
|
||
stroke: new Stroke({
|
||
color: "white",
|
||
width: 2,
|
||
}),
|
||
}),
|
||
}),
|
||
},
|
||
vectorLayer: {},
|
||
distance: 0,
|
||
lastTime: 0,
|
||
speed: 0.1
|
||
};
|
||
},
|
||
mounted() {
|
||
this.initMap();
|
||
this.clickMap();
|
||
},
|
||
methods: {
|
||
showHistory() {
|
||
var _list = [[113.94755498147583, 22.565597285534384], [113.9468468782959, 22.563151110912802], [113.9487566111145, 22.56018995216036], [113.95017281747437, 22.55748628547335]]
|
||
console.log(_list)
|
||
|
||
},
|
||
clearPointsLayers() {
|
||
this.coordinate = []
|
||
this.map.removeLayer(this.pointLayer);
|
||
this.pointLayer = {};
|
||
if (Object.keys(this.pointLayer).length == 0) {
|
||
// 创建图层
|
||
this.pointLayer = new VectorLayer({
|
||
source: new VectorSource(),
|
||
});
|
||
// 图层添加到地图上
|
||
this.map.addLayer(this.pointLayer);
|
||
}
|
||
},
|
||
initMap() {
|
||
|
||
this.geometryMove = new Point(this.route.getFirstCoordinate());
|
||
|
||
this.featureMove = new Feature({
|
||
type: "featureMove",
|
||
geometry: this.geometryMove,
|
||
});
|
||
|
||
|
||
this.vectorLayer = new VectorLayer({
|
||
source: new VectorSource({
|
||
features: [
|
||
new Feature({
|
||
type: "route",
|
||
geometry: this.route,
|
||
}),
|
||
this.featureMove,
|
||
new Feature({
|
||
type: "icon",
|
||
geometry: new Point(this.route.getFirstCoordinate()),
|
||
}),
|
||
new Feature({
|
||
type: "icon",
|
||
geometry: new Point(this.route.getLastCoordinate()),
|
||
}),
|
||
],
|
||
}),
|
||
style: (feature) => {
|
||
return this.styles[feature.get("type")];
|
||
},
|
||
});
|
||
|
||
|
||
|
||
this.map = new Map({
|
||
target: "map",
|
||
layers: [
|
||
new TileLayer({
|
||
source: new XYZ({
|
||
url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
|
||
}),
|
||
}),
|
||
],
|
||
view: new View({
|
||
projection: "EPSG:3857",
|
||
center: [12497018.585823221, 2476783.2447665134],
|
||
zoom: 12,
|
||
}),
|
||
});
|
||
|
||
this.map.addLayer(this.vectorLayer);
|
||
},
|
||
/**
|
||
* 点击地图添加摄像头要素
|
||
*/
|
||
clickMap() {
|
||
|
||
this.map.on("click", (e) => {
|
||
if (this.canAddPoints) {
|
||
this.addPoints(e.coordinate);
|
||
}
|
||
});
|
||
},
|
||
planningPath() {
|
||
|
||
axios({
|
||
method: "post",
|
||
url: process.env.VUE_APP_MAP_URL + "/wfs?authkey=" + process.env.VUE_APP_MAP_AUTHKEY,
|
||
headers: {
|
||
'Content-Type': 'text/xml'
|
||
},
|
||
data: `<GetFeature xmlns="http://www.opengis.net/wfs" service="WFS" version="1.1.0"
|
||
outputFormat="application/json"
|
||
viewParams="points:12496603.063359383#2476576.2207514597@12497163.153583003#2477213.6636166913@12497590.025377853#2477169.2574819643@12497545.869867127#2477020.727166339@12496603.063359383#2476576.2207514597"
|
||
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
||
xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.1.0/wfs.xsd">
|
||
<Query typeName="china:planning-path" xmlns:china="www.shgis.com"/>
|
||
</GetFeature>`,
|
||
}).then(res => {
|
||
// console.log(res.data.features)
|
||
|
||
let pathList=[];
|
||
res.data.features.map((item,index) => {
|
||
if(index<50){
|
||
pathList.push(item.geometry.coordinates[0])
|
||
pathList.push(item.geometry.coordinates[1])
|
||
}
|
||
// console.log(item.geometry.coordinates[0])
|
||
// console.log(item.geometry.coordinates[0])
|
||
})
|
||
|
||
|
||
const route=new LineString(pathList)
|
||
|
||
const geometryMove = new Point(route.getFirstCoordinate());
|
||
|
||
const featureMove = new Feature({
|
||
type: "featureMove",
|
||
geometry: geometryMove,
|
||
});
|
||
|
||
const vectorLayer = new VectorLayer({
|
||
source: new VectorSource({
|
||
features: [
|
||
new Feature({
|
||
type: "route",
|
||
geometry: route,
|
||
}),
|
||
featureMove,
|
||
new Feature({
|
||
type: "icon",
|
||
geometry: new Point(route.getFirstCoordinate()),
|
||
}),
|
||
new Feature({
|
||
type: "icon",
|
||
geometry: new Point(route.getLastCoordinate()),
|
||
}),
|
||
],
|
||
}),
|
||
style: (feature) => {
|
||
return this.styles[feature.get("type")];
|
||
},
|
||
});
|
||
|
||
console.log(route.getFirstCoordinate())
|
||
console.log(route.getLastCoordinate())
|
||
this.map.addLayer(vectorLayer)
|
||
})
|
||
},
|
||
/**
|
||
* 根据经纬度坐标添加摄像头要素
|
||
*/
|
||
addPoints(coordinate) {
|
||
this.coordinate.push(coordinate)
|
||
console.log(JSON.stringify(this.coordinate))
|
||
if (Object.keys(this.pointLayer).length == 0) {
|
||
// 创建图层
|
||
this.pointLayer = new VectorLayer({
|
||
source: new VectorSource(),
|
||
});
|
||
// 图层添加到地图上
|
||
this.map.addLayer(this.pointLayer);
|
||
}
|
||
|
||
// 创建feature要素，一个feature就是一个点坐标信息
|
||
const feature = new Feature({
|
||
geometry: new Point(coordinate),
|
||
});
|
||
// 设置要素的图标
|
||
feature.setStyle(
|
||
new Style({
|
||
// 设置图片效果
|
||
image: new Icon({
|
||
src: "https://smart-garden-manage.oss-cn-chengdu.aliyuncs.com/shexiangtou.png",
|
||
// anchor: [0.5, 0.5],
|
||
scale: 0.3,
|
||
}),
|
||
})
|
||
);
|
||
// 要素添加到地图图层上
|
||
|
||
this.pointLayer.getSource().addFeature(feature);
|
||
|
||
// 设置文字信息
|
||
// this.addText(coordinate);
|
||
},
|
||
addText(coordinate) {
|
||
const overlayBox = document.getElementById("overlay-box"); //获取一个div
|
||
const oSpan = document.createElement("span"); //创建一个span
|
||
oSpan.contentEditable = true; //设置文字是否可编辑
|
||
oSpan.id = coordinate[0]; //创建一个id
|
||
let pText = document.createTextNode("摄像头" + coordinate[0].toFixed(2)); //创建span的文本信息
|
||
oSpan.appendChild(pText); //将文本信息添加到span
|
||
overlayBox.appendChild(oSpan); //将span添加到div中
|
||
let textInfo = new Overlay({
|
||
position: coordinate, //设置位置
|
||
element: document.getElementById(coordinate[0]),
|
||
offset: [-25, 30], //设置偏移
|
||
});
|
||
this.map.addOverlay(textInfo);
|
||
},
|
||
|
||
moveFeature(e) {
|
||
let time = e.frameState.time;
|
||
this.distance =
|
||
(this.distance + (this.speed * (time - this.lastTime)) / 1000) % 1; //%2表示：起止止起；%1表示：起止起止
|
||
|
||
this.lastTime = time;
|
||
|
||
const currentCoordinate = this.route.getCoordinateAt(
|
||
this.distance > 1 ? 2 - this.distance : this.distance
|
||
);
|
||
this.geometryMove.setCoordinates(currentCoordinate);
|
||
const vectorContext = getVectorContext(e);
|
||
vectorContext.setStyle(this.styles.featureMove);
|
||
vectorContext.drawGeometry(this.geometryMove);
|
||
this.map.render();
|
||
},
|
||
startAnimation() {
|
||
this.lastTime = Date.now();
|
||
this.vectorLayer.on("postrender", this.moveFeature);
|
||
this.featureMove.setGeometry(null); //必须用null，不能用{}
|
||
},
|
||
|
||
stopAnimation() {
|
||
this.featureMove.setGeometry(this.geometryMove);
|
||
this.vectorLayer.un("postrender", this.moveFeature);
|
||
}
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less">
|
||
// 非核心已删除
|
||
#content {
|
||
width: 100%;
|
||
height: 100vh;
|
||
|
||
#map {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.ol-touch .ol-control button {
|
||
font-size: 26px;
|
||
}
|
||
|
||
.actionList {
|
||
position: fixed;
|
||
bottom: 0px;
|
||
left: 0px;
|
||
height: 200px;
|
||
width: 100vw;
|
||
|
||
.addAlarmPoint {
|
||
width: 100%;
|
||
height: 100px;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
z-index: 100;
|
||
|
||
.addAlarmPointNext {
|
||
width: 80%;
|
||
height: 80px;
|
||
line-height: 80px;
|
||
background-color: #369FFF;
|
||
border-radius: 20px;
|
||
font-size: 26px;
|
||
color: white;
|
||
}
|
||
}
|
||
}
|
||
</style>
|