准备接入minIO
This commit is contained in:
@@ -1,148 +1,533 @@
|
||||
<template>
|
||||
<div class="hd_map">
|
||||
<div id="icon" style="display: none"><img style="width: 40px;height: 40px" src="../assets/map/icon_paishuibeng_h_3.png"></div>
|
||||
<div id="map2" ref="roadmap" style="width: 100%;height: 100%">
|
||||
</div>
|
||||
<div id="content">
|
||||
<div id="map" ref="map" style="width: 100vw; height: 100vh"/>
|
||||
<div id="overlay-box"/>
|
||||
<div class="addAlarmPoint" v-if="page=='addAlarmPoint'">
|
||||
<div class="addAlarmPointNext" @click="addAlarmPointNextAction">下一步</div>
|
||||
</div>
|
||||
<div class="mobileHomePageExpandBtn" v-if="page=='mobileHomePage'">
|
||||
<van-icon name="expand-o" color="white" @click="switchFullScreen"/>
|
||||
</div>
|
||||
<!--
|
||||
<div class="pcPlanningPath" v-if="page=='pcPlanningPath'">
|
||||
<div class="pcPlanningPathNext" @click="clearPcPlanningPath">清空重新绘制</div>
|
||||
</div>
|
||||
-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {OL as ol, api, PlottingLayer, FeatureOperatorEvent, PlotTypes} from 'plot-ol/plottingol'
|
||||
import { Notify,Dialog } from 'vant';
|
||||
import service from "../utils/service"
|
||||
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 TileWMS from "ol/source/TileWMS"
|
||||
import {Notify, Dialog} from 'vant';
|
||||
import * as interaction from 'ol/interaction'; // 交互
|
||||
import {OL as ol} from "plot-ol/plottingol";
|
||||
import GeoJSON from 'ol/format/GeoJSON'
|
||||
import service from "@/utils/service";
|
||||
import {appInit,getStatisFileUrl} from "../utils/publicFun";
|
||||
|
||||
export default {
|
||||
name: "hd_map",
|
||||
data() {
|
||||
// const loadMap = new api.LoadMap("http://172.16.2.2:8600/geoserver", "30efbafe-d218-4d77-8200-0207246924be");
|
||||
const loadMap = new api.LoadMap(process.env.VUE_APP_MAP_URL, process.env.VUE_APP_MAP_AUTHKEY);
|
||||
return {
|
||||
map2: null,
|
||||
loadMap: loadMap,
|
||||
selectPoint: [], //选择的点位
|
||||
center: [12497018.585823221, 2476783.2447665134],
|
||||
icon: require("../assets/map.png"),
|
||||
page: null
|
||||
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,
|
||||
page: null,
|
||||
selectPoint: [],
|
||||
drawPlanningPathLayer: null,
|
||||
draw: null,
|
||||
snap: null,
|
||||
pcDrawType: ""
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
console.log(process.env.NODE_ENV)
|
||||
console.log(process.env.NODE_ENV)
|
||||
console.log(process.env.NODE_ENV)
|
||||
console.log(process.env.NODE_ENV)
|
||||
console.log(process.env.NODE_ENV)
|
||||
console.log(this.$route.query.page)
|
||||
this.page = this.$route.query.page;
|
||||
|
||||
this.init();
|
||||
this.initMap();
|
||||
switch (this.page) {
|
||||
case "addAlarmPoint":
|
||||
console.log("新增报警点");
|
||||
this.PageAddAlarmPoint()
|
||||
break
|
||||
case "pcPlanningPath":
|
||||
this.pcDrawType = "LineString";
|
||||
this.pcPlanningPath()
|
||||
break
|
||||
case "pcDrawArea":
|
||||
this.pcDrawType = "Polygon"
|
||||
this.pcPlanningPath();
|
||||
break
|
||||
case "mobileHomePage":
|
||||
appInit(500).then((e) => {
|
||||
console.log("获取到token，开始执行后续")
|
||||
console.log(e)
|
||||
this.queryAlarmList();
|
||||
this.queryAllEquipment();
|
||||
}).then((e) => {
|
||||
console.error(e)
|
||||
})
|
||||
break
|
||||
default:
|
||||
console.log("未匹配到page参数")
|
||||
this.queryAlarmList()
|
||||
this.queryAllEquipment()
|
||||
this.planningPath()
|
||||
// this.queryAlarmList()
|
||||
// this.queryAllEquipment()
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
// console.log(this.$utils.getUrlParam("page"))
|
||||
//限制地图移动范围
|
||||
const extent = [12482643.010892345, 2470943.170650934, 12505548.591601802, 2482396.032222487];
|
||||
//地图中心点
|
||||
let center = "ol.proj.transform([112.26173, 21.70896], 'EPSG:4326', 'EPSG:3857')"
|
||||
center = [12497018.585823221, 2476783.2447665134];
|
||||
// 初始化地图参数
|
||||
const option = {
|
||||
target: 'map2',
|
||||
layers: [
|
||||
{
|
||||
type: 'WMTS',
|
||||
layerName: 'china:yangjianghedian_dt',
|
||||
projection: 'EPSG:3857',
|
||||
version: '1.0.0',
|
||||
format: 'image/png'
|
||||
},
|
||||
{
|
||||
type: 'WMS',
|
||||
layerName: 'china:yangjianghedian'
|
||||
}
|
||||
],
|
||||
view: {
|
||||
extent: extent,
|
||||
center: center,
|
||||
zoom: 16,
|
||||
minZoom: 14
|
||||
}
|
||||
}
|
||||
this.map2 = this.loadMap.init(option);
|
||||
PageAddAlarmPoint() {
|
||||
this.canAddPoints = true;
|
||||
this.clickMap();
|
||||
},
|
||||
|
||||
//载入点位
|
||||
const markerOption = {
|
||||
markers: [{coordinates: this.center}],
|
||||
source: 'EPSG:4326', //源坐标系
|
||||
destination: 'EPSG:3857', //目标坐标系
|
||||
style: new ol.style.Style({
|
||||
image: new ol.style.Icon({
|
||||
src: this.icon
|
||||
})
|
||||
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,
|
||||
});
|
||||
|
||||
console.log(this.route)
|
||||
|
||||
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")];
|
||||
},
|
||||
});
|
||||
|
||||
const wmsLayer = new TileLayer({
|
||||
source: new TileWMS({
|
||||
// 设置 Geoserver 服务的 URL
|
||||
url: process.env.VUE_APP_MAP_URL + "/wms",
|
||||
// 设置请求参数
|
||||
params: {
|
||||
// 指定要获取的图层名称
|
||||
LAYERS: "china:yangjianghedian",
|
||||
// 设置为平铺模式获取
|
||||
TILED: true
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
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}",
|
||||
}),
|
||||
}),
|
||||
wmsLayer
|
||||
],
|
||||
|
||||
view: new View({
|
||||
projection: "EPSG:4326",
|
||||
center: [112.26173, 21.70896],
|
||||
zoom: 15,
|
||||
}),
|
||||
});
|
||||
|
||||
// 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) => {
|
||||
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) {
|
||||
console.log(coordinate)
|
||||
if (this.selectPoint.length > 0) {
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
}
|
||||
this.selectPoint = coordinate;
|
||||
this.coordinate = 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);
|
||||
}
|
||||
this.loadMap.loadMarkerFromData(markerOption);
|
||||
|
||||
// 创建feature要素，一个feature就是一个点坐标信息
|
||||
const feature = new Feature({
|
||||
geometry: new Point(coordinate),
|
||||
});
|
||||
// 设置要素的图标
|
||||
feature.setStyle(
|
||||
new Style({
|
||||
// 设置图片效果
|
||||
image: new Icon({
|
||||
src: getStatisFileUrl("/map/icon_paishuibeng_h_2.png"),
|
||||
// anchor: [0.5, 0.5],
|
||||
scale: 0.4,
|
||||
}),
|
||||
})
|
||||
);
|
||||
// 要素添加到地图图层上
|
||||
|
||||
this.pointLayer.getSource().addFeature(feature);
|
||||
|
||||
// 设置文字信息
|
||||
// this.addText(coordinate);
|
||||
},
|
||||
queryAllEquipment(){
|
||||
service.get(`/sys/equipment/pageList`,{
|
||||
params:{
|
||||
pageNo:1,
|
||||
pageSize:50
|
||||
}
|
||||
})
|
||||
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);
|
||||
},
|
||||
queryAlarmList(){
|
||||
service.get(`/api/alarm/list`,{
|
||||
params:{
|
||||
sendStatus:1,
|
||||
pageNo:1,
|
||||
pageSize:50
|
||||
}
|
||||
})
|
||||
|
||||
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);
|
||||
},
|
||||
addAlarmPointNextAction() {
|
||||
if(this.selectPoint.length==0){
|
||||
Dialog({ message: '请先选择点位' });
|
||||
}
|
||||
const result = JSON.stringify(this.selectPoint)
|
||||
location.href = "uniwebview://action?function=addAlarmPoint¶ms1=" + result;
|
||||
if (this.selectPoint.length == 0) {
|
||||
Dialog({message: '请先选择点位'});
|
||||
}
|
||||
const result = JSON.stringify(this.selectPoint)
|
||||
location.href = "uniwebview://action?function=addAlarmPoint¶ms1=" + result;
|
||||
},
|
||||
PageAddAlarmPoint() {
|
||||
//获取点击的点位信息
|
||||
const _this = this;
|
||||
const element = document.getElementById('icon');
|
||||
element.style.display="block"
|
||||
const popup = new ol.Overlay({
|
||||
element: element,
|
||||
positioning: 'bottom-center',
|
||||
stopEvent: false,
|
||||
pcPlanningPath() {
|
||||
//https://blog.csdn.net/Raccon_/article/details/127491268
|
||||
|
||||
console.log("pcPlanningPath")
|
||||
// const interaction = this.map
|
||||
// .getInteractions()
|
||||
// .getArray()
|
||||
// .find(interaction => {
|
||||
// return interaction instanceof ol.interaction.DoubleClickZoom;
|
||||
// });
|
||||
// // 移除原始地图双击事件
|
||||
// this.map.removeInteraction(interaction);
|
||||
|
||||
|
||||
// 矢量地图源
|
||||
let vectorSource = new VectorSource();
|
||||
// 矢量地图
|
||||
this.drawPlanningPathLayer = new VectorLayer({
|
||||
source: vectorSource,
|
||||
style: new Style({
|
||||
stroke: new Stroke({
|
||||
width: 6,
|
||||
color: [237, 212, 0, 0.8],
|
||||
}),
|
||||
})
|
||||
});
|
||||
this.map2.addOverlay(popup);
|
||||
this.map2.on('singleclick', function (evt) {
|
||||
popup.setPosition(evt.coordinate);
|
||||
_this.selectPoint = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
|
||||
|
||||
let modify = new interaction.Modify({
|
||||
source: vectorSource
|
||||
});
|
||||
|
||||
this.map.addInteraction(modify);
|
||||
|
||||
// 绘制图形类型
|
||||
// Point 点
|
||||
// LineString 线
|
||||
// Polygon 多边形
|
||||
// Circle 圆
|
||||
|
||||
this.draw = new interaction.Draw({
|
||||
source: vectorSource,
|
||||
type: this.pcDrawType
|
||||
});
|
||||
|
||||
this.map.addInteraction(this.draw);
|
||||
|
||||
// 创建一个Snap控件，并加入到Map对象中
|
||||
this.snap = new interaction.Snap({
|
||||
source: vectorSource
|
||||
});
|
||||
this.map.addLayer(this.drawPlanningPathLayer);
|
||||
|
||||
this.map.addInteraction(this.snap);
|
||||
|
||||
this.draw.on('drawend', (e) => {
|
||||
Dialog.confirm({
|
||||
title: '绘制完成',
|
||||
message: '取消则会重新绘制',
|
||||
})
|
||||
.then(() => {
|
||||
// on confirm
|
||||
console.log(this.drawPlanningPathLayer.getSource().getFeatures())
|
||||
const featureGeoJson = JSON.parse(new GeoJSON().writeFeature(e.feature))
|
||||
console.log(featureGeoJson.geometry.coordinates)
|
||||
|
||||
window.parent.postMessage(JSON.stringify(featureGeoJson.geometry.coordinates), "*");
|
||||
|
||||
})
|
||||
.catch(() => {
|
||||
// on cancel
|
||||
this.drawPlanningPathLayer.getSource().clear();
|
||||
// this.map.removeLayer(this.drawPlanningPathLayer)
|
||||
// this.map.addLayer(this.drawPlanningPathLayer)
|
||||
});
|
||||
// this.map.removeInteraction(draw); // 在此处清除交互会触发地图默认的双击放大
|
||||
});
|
||||
|
||||
},
|
||||
clearPcPlanningPath() {
|
||||
|
||||
},
|
||||
queryAllEquipment() {
|
||||
service.get(`/sys/equipment/pageList`, {
|
||||
params: {
|
||||
pageNo: 1,
|
||||
pageSize: 50
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
queryAlarmList() {
|
||||
service.get(`/api/alarm/list`, {
|
||||
params: {
|
||||
sendStatus: 1,
|
||||
pageNo: 1,
|
||||
pageSize: 50
|
||||
}
|
||||
})
|
||||
},
|
||||
switchFullScreen() {
|
||||
location.href = "uniwebview://action?function=switchBigScreen"
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
<style lang="less">
|
||||
// 非核心已删除
|
||||
#content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
#map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.ol-touch .ol-control button {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.actionList {
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
height: 200px;
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.addAlarmPoint {
|
||||
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
@@ -163,24 +548,33 @@ export default {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
@import '~plot-ol/ol.css';
|
||||
|
||||
.ol-touch .ol-control button {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.hd_map {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#map2 {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.pcPlanningPath {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
z-index: 100;
|
||||
|
||||
.pcPlanningPathNext {
|
||||
width: 80%;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
background-color: #369FFF;
|
||||
border-radius: 20px;
|
||||
font-size: 16px;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.mobileHomePageExpandBtn {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 30px;
|
||||
z-index: 100;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user