Skip to content

H
holo-web
Commit 612b2b39 authored by ninglx's avatar ninglx
Browse files
Options

调整mapConfig配置, 剔除websocket重复数据

parent 9a0c7edc
Hide whitespace changes
Inline Side-by-side
Showing with 187 additions and 1626 deletions
build-tools/server.config.js
View file @ 612b2b39
......@@ -7,13 +7,13 @@ module.exports = fs.existsSync('./local.config.js')
devServer: {
proxy: {
'/sso': {
target: 'http://10.100.1.59:9000',
target: 'http://10.102.1.182:9000',
},
'/design': {
target: 'http://10.100.1.59:9000',
target: 'http://10.102.1.182:9000',
},
'/holo': {
target: 'http://10.100.1.59:9000',
target: 'http://10.102.1.182:9000',
},
},
serve: [],
......
wj-data-vision/public/config.js
View file @ 612b2b39
const map_config = {
// SYS_ID: '61283C05C4154AA9A57BD9005ABA1BCD',
SYS_ID: 'CAFC20296895433784C193457A870DFD',
MAP_TOKEN: 'pk.eyJ1IjoiZXRlcm5pdHkteHlmIiwiYSI6ImNqaDFsdXIxdTA1ODgycXJ5czdjNmF0ZTkifQ.zN7e588TqZOQMWfws-K0Yw',
MAP_CENTER: [120.62663, 31.42455],
MAP_CENTER_CHANGSHA:[112.96306239435421, 28.182939427196445],
MAP_CENTER: [112.96306239435421, 28.182939427196445],
MAP_ZOOM: 14.39,
MAX_ZOOM: 20.5,
MAP_PITCH: 60,
// MAP_STYLE: 'mapbox://styles/mapbox/dark-v11',
MAP_STYLE: 'http://106.120.201.126:14724/style-changsha.json', // 测试 - 2
MAP_STYLE: `http://106.120.201.126:14724/style-changsha.json`, // 长沙
// MAP_STYLE: `http://106.120.201.126:14724/style.json`, // 苏州
MAP_STYLE_XL: 'http://106.120.201.126:14724/style-xl.json',
MAP_STYLE_XL: `http://106.120.201.126:14724/style-xl.json`, // 苏州 带路口箭头
RASTER_ROAD: 'http://106.120.201.126:14724/tile?lid=traffic&get=map&cache=off&x={x}&y={y}&z={z}',
RASTER_ROAD: `http://10.102.1.180:9000/tile?lid=traffic&get=map&cache=off&x={x}&y={y}&z={z}`,
}
const ws_config = {
// BASE_URL: 'ws://106.120.201.126:14736/holows/subscribe', // 苏州
BASE_URL: 'ws://10.102.1.182:18021/holows/subscribe', // 长沙
CROSS_CONTROL: 'ws://106.120.201.126:14724/utc/signalStatus/', // 路口
CROSS_CONTROL: 'ws://10.102.1.180:9000/utc/signalStatus/', // 路口灯态组件
}
\ No newline at end of file
wj-data-vision/public/index.html
View file @ 612b2b39
......@@ -5,32 +5,17 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<link rel="icon" href="<%= BASE_URL %>logo.png"/>
<title>全息路段感知平台</title>
<title></title>
<link href="/cdn/libs/normalize/normalize.css" rel="stylesheet"/>
<link href="/cdn/libs/element-ui/element-ui.css" rel="stylesheet"/>
<!-- <link href="/cdn/libs/st-ui/st-ui.css" rel="stylesheet"/>-->
<!-- <link href="/cdn/font/font.css" rel="stylesheet"/>-->
<script src="/cdn/libs/vue/vue.js"></script>
<script src="/cdn/libs/element-ui/element-ui.js"></script>
<!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
<!-- <script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
<script src="/cdn/libs/echarts/echarts.min.js"></script>
<!-- <script src="/cdn/libs/lodash/lodash.js"></script>-->
<!-- <script src="/cdn/libs/st-util/st-util.js"></script>-->
<script src="/cdn/libs/st-dao/st-dao.js"></script>
<!-- <script src="/cdn/libs/st-ui/st-ui.js"></script>-->
<!-- <link href="/cdn/libs/example/styles/lib.css" rel="stylesheet" type="text/css"/>-->
<!-- <link href="/cdn/libs/example/styles/jsDemo.css" rel="stylesheet" type="text/css" media="all"/>-->
<!-- <script src="/cdn/libs/example/scripts/jquery-1.11.3.min.js" type="text/javascript"></script>-->
<!-- <script src="/cdn/libs/example/scripts/lib/ZeroClipboard.min.js" type="text/javascript" charset="utf-8"></script>-->
<!-- <script src="/cdn/libs/example/scripts/lib/codemirror.js" type="text/javascript" charset="utf-8"></script>-->
<!-- <script src="/cdn/libs/example/scripts/lib/codemirror-plugins.js" type="text/javascript" charset="utf-8"></script>-->
<!-- <script src="/cdn/libs/example/scripts/lib/slimscroll.js" type="text/javascript" charset="utf-8"></script>-->
<!-- <script src="/cdn/libs/example/scripts/lib/layer/layer.js" type="text/javascript" charset="utf-8"></script>-->
<link href="/cdn/libs/example/styles/jsDemo.css" rel="stylesheet" type="text/css" media="all"/>
<script src="/cdn/libs/mapbox-gl/mapbox-gl.js" type="text/javascript"></script>
<link href="/cdn/libs/mapbox-gl/mapbox-gl.css" rel="stylesheet"/>
......@@ -38,7 +23,7 @@
<link href="/cdn/libs/threebox/threebox.css" rel="stylesheet"/>
<script src="/cdn/libs/turf/turf.min.js" type="text/javascript"></script>
<script src="/cdn/libs/flvjs/flv.min.js" type="text/javascript"></script>
<!-- <script src='/cdn/libs/mapUtil/mapUtilsV3.js' type="text/javascript"></script>-->
<script src='/cdn/libs/mapUtil/mapUtilsV3.js' type="text/javascript"></script>
<script src="./config.js"></script>
<style>
......
wj-data-vision/src/components/Standard/map/index.vue
View file @ 612b2b39
......@@ -5,9 +5,9 @@
</template>
<script>
import { Scene } from "@antv/l7";
import { Mapbox } from "@antv/l7-maps";
import config from "../../../config/holo/mapConfig";
import {Scene} from "@antv/l7";
import {Mapbox} from "@antv/l7-maps";
let map, scene;
// Point MultiPoint LineString MultiLineString Polygon MultiPolygon
export default {
......@@ -17,13 +17,18 @@ export default {
data() {
return {};
},
mounted() {},
mounted() {
},
methods: {
initMap() {
mapboxgl.accessToken = config.accessToken;
map = new mapboxgl.Map(
Object.assign({}, config.map, { container: this.mapId })
);
map = new mapboxgl.Map({
container: this.mapId,
style: map_config.MAP_STYLE,
center: map_config.MAP_CENTER,
zoom: map_config.MAP_ZOOM,
maxZoom: map_config.MAX_ZOOM,
pitch: map_config.MAP_PITCH,
});
scene = new Scene({
logoVisible: false,
id: this.mapId,
......@@ -32,296 +37,11 @@ export default {
}),
});
return [map, scene];
},
removeLayer(name) {
if (map.getLayer(name)) {
map.removeLayer(name);
}
},
removeSource(name) {
if (map.getSource(name)) {
map.removeSource(name);
}
},
/**
* coordinates
* html
*/
addPopup(options) {
let popups = [];
for (let i = 0; i < options.length; i++) {
let p = new mapboxgl.Popup();
// let popupHTML = `<div id="base-detail-${i}"></div>`;
p.setLngLat(options[i].coordinates).setHTML(options[i].html).addTo(map);
popups.push(p);
}
return popups;
},
/**
* layerId
* sourceId
* imgStep ['img1', 100, 'img2'] means: ( 0-100:img1 ) ( >100:img2 )
* sizeStep
*/
addClusterSymbolLayer(options) {
map.addLayer({
id: options.layerId,
type: "symbol",
source: options.sourceId,
filter: ["has", "point_count"],
layout: {
"icon-image": ["step", ["get", "point_count"], ...options.imgStep],
"icon-allow-overlap": true,
"icon-ignore-placement": true,
"icon-size": ["step", ["get", "point_count"], ...options.sizeStep],
},
});
map.on("mouseenter", options.layerId, () => {
map.getCanvas().style.cursor = "pointer";
});
map.on("mouseleave", "clusters", () => {
map.getCanvas().style.cursor = "unset";
});
},
/**
* sourceId
* sourceTypes: [type1, type2, ...]
* coordinateses [coord1, coord2, ...]
* propertieses [prop1{}, prop2{},]
*/
setSource(options) {
let features = [];
for (let key in options.coordinateses) {
features.push({
type: "Feature",
properties: options.propertieses[key],
geometry: {
type: options.sourceTypes[key],
coordinates: options.coordinateses[key],
},
});
}
map.getSource(options.sourceId).setData({
type: "FeatureCollection",
features: features,
});
},
/**
* el
* markers
* marker of markers : { coordinates: [] }
*/
addMarker(options, callback) {
let markerGroup = [];
for (const coordinates of options.markers) {
const markerItem = new mapboxgl.Marker(options.el || "")
.setLngLat(coordinates)
.addTo(map);
console.log(markerItem);
markerGroup.push(markerItem);
}
return markerGroup;
},
/**
* layerId
* sourceId
* imgId
*/
addHighLightLayer(options, callback) {
map.addLayer({
id: options.layerId,
type: "symbol",
source: options.sourceId,
layout: {
"icon-image": options.imgId,
"icon-size": 1,
"icon-rotate": ["get", "courseAngle"],
"icon-rotation-alignment": "map",
"icon-allow-overlap": true,
"icon-ignore-placement": true,
},
paint: {
"icon-color": "#129646",
},
filter: ["in", ["get", "picLicense"], ""],
});
callback && map.on("click", options.layerId, callback);
},
/**
* sourceId
* sourceTypes: [type1, type2, ...]
* coordinateses [coord1, coord2, ...]
* propertieses [prop1{}, prop2{},]
*/
addSource(options) {
let features = [];
for (let key in options.coordinateses) {
features.push({
type: "Feature",
properties: options.propertieses[key],
geometry: {
type: options.sourceTypes[key],
coordinates: options.coordinateses[key],
},
});
}
map.addSource(options.sourceId, {
type: "geojson",
data: {
type: "FeatureCollection",
features: features,
},
});
},
/**
* layerId
* sourceId
*/
addCircleLayer(options, callback) {
map.addLayer({
id: options.layerId,
type: "circle",
source: options.sourceId,
filter: [options.show ? "==" : "!=", "$type", "Point"],
paint: {
"circle-radius": 6,
"circle-color": "#5470c6",
},
});
map.on("mouseenter", options.layerId, () => {
map.getCanvas().style.cursor = "pointer";
});
map.on("mouseleave", options.layerId, () => {
map.getCanvas().style.cursor = "unset";
});
callback && map.on("click", options.layerId, callback);
},
/**
* layerId
* sourceId
* imgId - icon-image
* label
*/
addSymbolLayer(options, callback) {
map.addLayer({
id: options.layerId,
type: "symbol",
source: options.sourceId,
filter: [options.show ? "==" : "!=", "$type", "Point"],
layout: {
"icon-image": options.imgId,
"icon-size": 1,
"icon-rotate": options.text ? 0 : ["get", "courseAngle"],
"icon-rotation-alignment": "map",
"icon-allow-overlap": true,
"icon-ignore-placement": true,
"text-field": options.text
? ["concat", "等待人数 ", ["get", options.text], "人"]
: "",
"text-ignore-placement": true,
"text-rotation-alignment": "map",
"text-offset": [0, 1],
},
paint: {
"icon-color": ["get", "color"],
},
});
map.on("mouseenter", options.layerId, () => {
map.getCanvas().style.cursor = "pointer";
});
map.on("mouseleave", options.layerId, () => {
map.getCanvas().style.cursor = "unset";
});
callback && map.on("click", options.layerId, callback);
},
/**
* sourceId
* layerId
*/
addLineLayer(options) {
map.addLayer({
type: "line",
source: options.sourceId,
id: options.layerId,
paint: {
"line-color": "yellow",
"line-width": 6,
"line-dasharray": [0, 4, 3],
},
});
},
/**
* sourceId
* layerId
*/
addPolygonLayer(options) {
map.addLayer({
id: options.layerId,
type: "fill",
source: options.sourceId, // reference the data source
layout: {},
paint: {
"fill-color": "#0080ff", // blue color fill
"fill-opacity": 0.5,
},
});
},
/**
* sourceId
* sourceType
* coordinates
* properties
*/
addMultiSource(options) {
map.addSource(options.sourceId, {
type: "geojson",
data: {
type: "Feature",
geometry: {
type: options.sourceType,
coordinates: options.coordinates,
},
properties: options.properties,
},
});
},
/**
* sourceType
* sourceId
* coordinates
*/
setMultiSourceData(options) {
map.getSource(options.sourceId).setData({
type: "FeatureCollection",
features: [
{
type: "Feature",
properties: {},
geometry: {
type: options.sourceType,
coordinates: options.coordinates,
},
},
],
});
},
}
},
computed: {},
beforeDestory() {},
beforeDestroy() {
},
};
</script>
......@@ -330,6 +50,7 @@ export default {
height: 100%;
position: relative;
}
#map {
height: 100%;
}
......
wj-data-vision/src/components/Standard/map/index1.vue deleted 100644 → 0
View file @ 9a0c7edc
<template>
<div class="map_main">
<div :id="mapId" style="height: 100%"></div>
</div>
</template>
<script>
import { Scene } from "@antv/l7";
import { Mapbox } from "@antv/l7-maps";
import config from "../../../config/holo/mapConfig";
let map, scene;
// Point MultiPoint LineString MultiLineString Polygon MultiPolygon
export default {
name: "wMap",
props: ["mapId"],
components: {},
data() {
return {};
},
mounted() {},
methods: {
initMap() {
mapboxgl.accessToken = config.accessToken;
map = new mapboxgl.Map(
Object.assign({}, config.map, { container: this.mapId })
);
// scene = new Scene({
// logoVisible: false,
// id: this.mapId,
// map: new Mapbox({
// mapInstance: map,
// }),
// });
return map
},
removeLayer(name) {
if (map.getLayer(name)) {
map.removeLayer(name);
}
},
removeSource(name) {
if (map.getSource(name)) {
map.removeSource(name);
}
},
/**
* coordinates
* html
*/
addPopup(options) {
let popups = [];
for (let i = 0; i < options.length; i++) {
let p = new mapboxgl.Popup();
// let popupHTML = `<div id="base-detail-${i}"></div>`;
p.setLngLat(options[i].coordinates).setHTML(options[i].html).addTo(map);
popups.push(p);
}
return popups;
},
/**
* layerId
* sourceId
* imgStep ['img1', 100, 'img2'] means: ( 0-100:img1 ) ( >100:img2 )
* sizeStep
*/
addClusterSymbolLayer(options) {
map.addLayer({
id: options.layerId,
type: "symbol",
source: options.sourceId,
filter: ["has", "point_count"],
layout: {
"icon-image": ["step", ["get", "point_count"], ...options.imgStep],
"icon-allow-overlap": true,
"icon-ignore-placement": true,
"icon-size": ["step", ["get", "point_count"], ...options.sizeStep],
},
});
map.on("mouseenter", options.layerId, () => {
map.getCanvas().style.cursor = "pointer";
});
map.on("mouseleave", "clusters", () => {
map.getCanvas().style.cursor = "unset";
});
},
/**
* sourceId
* sourceTypes: [type1, type2, ...]
* coordinateses [coord1, coord2, ...]
* propertieses [prop1{}, prop2{},]
*/
setSource(options) {
let features = [];
for (let key in options.coordinateses) {
features.push({
type: "Feature",
properties: options.propertieses[key],
geometry: {
type: options.sourceTypes[key],
coordinates: options.coordinateses[key],
},
});
}
map.getSource(options.sourceId).setData({
type: "FeatureCollection",
features: features,
});
},
/**
* el
* markers
* marker of markers : { coordinates: [] }
*/
addMarker(options, callback) {
let markerGroup = [];
for (const coordinates of options.markers) {
const markerItem = new mapboxgl.Marker(options.el || "")
.setLngLat(coordinates)
.addTo(map);
console.log(markerItem);
markerGroup.push(markerItem);
}
return markerGroup;
},
/**
* layerId
* sourceId
* imgId
*/
addHighLightLayer(options, callback) {
map.addLayer({
id: options.layerId,
type: "symbol",
source: options.sourceId,
layout: {
"icon-image": options.imgId,
"icon-size": 1,
"icon-rotate": ["get", "courseAngle"],
"icon-rotation-alignment": "map",
"icon-allow-overlap": true,
"icon-ignore-placement": true,
},
paint: {
"icon-color": "#129646",
},
filter: ["in", ["get", "picLicense"], ""],
});
callback && map.on("click", options.layerId, callback);
},
/**
* sourceId
* sourceTypes: [type1, type2, ...]
* coordinateses [coord1, coord2, ...]
* propertieses [prop1{}, prop2{},]
*/
addSource(options) {
let features = [];
for (let key in options.coordinateses) {
features.push({
type: "Feature",
properties: options.propertieses[key],
geometry: {
type: options.sourceTypes[key],
coordinates: options.coordinateses[key],
},
});
}
map.addSource(options.sourceId, {
type: "geojson",
data: {
type: "FeatureCollection",
features: features,
},
});
},
/**
* layerId
* sourceId
*/
addCircleLayer(options, callback) {
map.addLayer({
id: options.layerId,
type: "circle",
source: options.sourceId,
filter: [options.show ? "==" : "!=", "$type", "Point"],
paint: {
"circle-radius": 6,
"circle-color": "#5470c6",
},
});
map.on("mouseenter", options.layerId, () => {
map.getCanvas().style.cursor = "pointer";
});
map.on("mouseleave", options.layerId, () => {
map.getCanvas().style.cursor = "unset";
});
callback && map.on("click", options.layerId, callback);
},
/**
* layerId
* sourceId
* imgId - icon-image
* label
*/
addSymbolLayer(options, callback) {
map.addLayer({
id: options.layerId,
type: "symbol",
source: options.sourceId,
filter: [options.show ? "==" : "!=", "$type", "Point"],
layout: {
"icon-image": options.imgId,
"icon-size": 1,
"icon-rotate": options.text ? 0 : ["get", "courseAngle"],
"icon-rotation-alignment": "map",
"icon-allow-overlap": true,
"icon-ignore-placement": true,
"text-field": options.text
? ["concat", "等待人数 ", ["get", options.text], "人"]
: "",
"text-ignore-placement": true,
"text-rotation-alignment": "map",
"text-offset": [0, 1],
},
paint: {
"icon-color": ["get", "color"],
},
});
map.on("mouseenter", options.layerId, () => {
map.getCanvas().style.cursor = "pointer";
});
map.on("mouseleave", options.layerId, () => {
map.getCanvas().style.cursor = "unset";
});
callback && map.on("click", options.layerId, callback);
},
/**
* sourceId
* layerId
*/
addLineLayer(options) {
map.addLayer({
type: "line",
source: options.sourceId,
id: options.layerId,
paint: {
"line-color": "yellow",
"line-width": 6,
"line-dasharray": [0, 4, 3],
},
});
},
/**
* sourceId
* layerId
*/
addPolygonLayer(options) {
map.addLayer({
id: options.layerId,
type: "fill",
source: options.sourceId, // reference the data source
layout: {},
paint: {
"fill-color": "#0080ff", // blue color fill
"fill-opacity": 0.5,
},
});
},
/**
* sourceId
* sourceType
* coordinates
* properties
*/
addMultiSource(options) {
map.addSource(options.sourceId, {
type: "geojson",
data: {
type: "Feature",
geometry: {
type: options.sourceType,
coordinates: options.coordinates,
},
properties: options.properties,
},
});
},
/**
* sourceType
* sourceId
* coordinates
*/
setMultiSourceData(options) {
map.getSource(options.sourceId).setData({
type: "FeatureCollection",
features: [
{
type: "Feature",
properties: {},
geometry: {
type: options.sourceType,
coordinates: options.coordinates,
},
},
],
});
},
},
computed: {},
beforeDestory() {},
};
</script>
<style scoped>
.map_main {
height: 100%;
position: relative;
}
#map {
height: 100%;
}
</style>
<style>
.mapboxgl-ctrl-attrib {
display: none;
}
</style>
wj-data-vision/src/config/holo/mapConfig.js → wj-data-vision/src/config/holo/mapAssets.js
View file @ 612b2b39
export default {
accessToken: 'pk.eyJ1IjoiZXRlcm5pdHkteHlmIiwiYSI6ImNqaDFsdXIxdTA1ODgycXJ5czdjNmF0ZTkifQ.zN7e588TqZOQMWfws-K0Yw',
map: {
container: 'map',
style: map_config.MAP_STYLE,
center: map_config.MAP_CENTER_CHANGSHA,
zoom: map_config.MAP_ZOOM,
maxZoom: map_config.MAX_ZOOM,
pitch: map_config.MAP_PITCH,
},
mapIcons: {
cross_location: require('../../assets/images/holo/location-yellow.png'),
event: require('../../assets/images/holo/event.png'),
......@@ -17,5 +8,4 @@ export default {
camera: require('../../assets/images/holo/spxj.png'),
sign: require('../../assets/images/holo/xhj.png'),
},
rasterRoad: map_config.RASTER_ROAD,
}
wj-data-vision/src/views/situation/index.vue
View file @ 612b2b39
......@@ -59,7 +59,7 @@ import wMap from "../../components/Standard/map/index.vue";
import {initWs} from "../../config/holo/websocket";
import dict from "../../config/holo/dictionary";
import wsSource from "../../config/holo/wsSource";
import mapConfig from "../../config/holo/mapConfig";
import mapAssets from "../../config/holo/mapAssets";
import {crossInfo, eventInfo, equip_signal, equip_weather, equip_camera, equip_radar} from "../../dao/situation";
const EquipmentPopup = Vue.extend(equipmentPopup);
......@@ -221,8 +221,8 @@ export default {
[map, scene] = mapMethods.initMap();
scene.on("loaded", () => {
this.sceneLoaded = true;
for (let key in mapConfig.mapIcons) {
scene.addImage(key, mapConfig.mapIcons[key]);
for (let key in mapAssets.mapIcons) {
scene.addImage(key, mapAssets.mapIcons[key]);
}
});
......@@ -398,7 +398,7 @@ export default {
}
});
if (!map.getLayer('raster_road')) {
mapUtils.addrasterLayer(map, 'raster_road', mapConfig.rasterRoad)
mapUtils.addrasterLayer(map, 'raster_road', map_config.RASTER_ROAD)
map.setLayoutProperty('raster_road', 'visibility', 'visible')
} else {
showL('raster_road')
......@@ -671,43 +671,47 @@ export default {
// websocket 回调
callCar(msg) {
if (this.sceneLoaded) {
if (this.loading) this.loading = false
// 第一帧 || 时间戳不相同则放行
if (this.lastLocation.length === 0 || this.lastLocation[0].dateTime !== msg[0].dateTime) {
if (this.loading) this.loading = false
// 显示3D车辆
if (scene.getZoom() > 17) {
window.tb.world.visible = true;
this.currentLocation = msg;
let allData = this.diff(this.lastLocation, this.currentLocation);
// allData.forEach(item => {
// item.originalType = 5
// })
this.lastLocation = msg;
// 显示3D车辆
if (scene.getZoom() > 17) {
window.tb.world.visible = true;
this.currentLocation = msg;
let allData = this.diff(this.lastLocation, this.currentLocation);
// allData.forEach(item => {
// item.originalType = 5
// })
this.lastLocation = msg;
this.addDelUpdateVehicleModels(allData);
// 添加车牌号图层
if (!layers.first.license) {
layers.first.license = l7Tools.addLicenseLayer(scene, msg);
} else {
layers.first.license.setData(msg);
show(layers.first.license);
}
}
// 隐藏3D
else {
if (this.selectVehicle) {
this.selectVehicle = null;
}
if (window.tb) {
window.tb.world.visible = false;
this.addDelUpdateVehicleModels(allData);
// 添加车牌号图层
if (!layers.first.license) {
layers.first.license = l7Tools.addLicenseLayer(scene, msg);
} else {
layers.first.license.setData(msg);
show(layers.first.license);
}
}
hide([layers.first.license]);
if (!layers.first.vehicle) {
layers.first.vehicle = l7Tools.addVehicleLayer(scene, msg);
} else {
// show(layers.first.vehicle);
layers.first.vehicle && layers.first.vehicle.setData(msg);
// 隐藏3D
else {
if (this.selectVehicle) {
this.selectVehicle = null;
}
if (window.tb) {
window.tb.world.visible = false;
}
hide([layers.first.license]);
if (!layers.first.vehicle) {
layers.first.vehicle = l7Tools.addVehicleLayer(scene, msg);
} else {
// show(layers.first.vehicle);
layers.first.vehicle && layers.first.vehicle.setData(msg);
}
this.lastLocation = [];
}
this.lastLocation = [];
}
}
},
callPasserby(msg) {
......
wj-data-vision/src/views/situation/l7Tools.js
View file @ 612b2b39
// noinspection JSVoidFunctionReturnValueUsed
import { PointLayer, HeatmapLayer, PolygonLayer } from '@antv/l7'
import { PointLayer, RasterLayer, HeatmapLayer, PolygonLayer } from '@antv/l7'
// 车牌号图层
// 车牌号
export function addLicenseLayer(scene, msg) {
const pointLayer = new PointLayer()
.source(msg, {
......@@ -38,7 +36,7 @@ export function addLicenseLayer(scene, msg) {
return pointLayer
}
// 车辆圆点图层
// 车辆圆点
export function addVehicleLayer(scene, msg) {
const pointLayer = new PointLayer()
.source(msg, {
......@@ -58,7 +56,7 @@ export function addVehicleLayer(scene, msg) {
return pointLayer
}
// 等待行人数量文本图层
// 等待行人数量
export function addPasserbyText(scene, msg) {
const pointLayer = new PointLayer()
.source(msg, {
......@@ -81,7 +79,7 @@ export function addPasserbyText(scene, msg) {
return pointLayer
}
// 路口图层
// 路口图标
export function addCrossPoint(scene, msg, offset, callback) {
let pointLayer = new PointLayer({ zIndex: 2 })
.source(msg, {
......@@ -107,7 +105,7 @@ export function addCrossPoint(scene, msg, offset, callback) {
return pointLayer
}
// 路口名称图层
// 路口名称文字
export function addCrossDetailPoint(scene, msg) {
const pointLayer = new PointLayer({ zIndex: 3 })
.source(msg, {
......@@ -132,7 +130,7 @@ export function addCrossDetailPoint(scene, msg) {
return pointLayer
}
// 天交通事件点图 && 热力图
// 交通事件 / 天
export function addTrafficEventPoint1(scene, msg, callback) {
const pointLayer = new PointLayer()
.source(msg, {
......@@ -183,7 +181,7 @@ export function addTrafficEventPoint1Heat(scene, msg) {
return layer
}
// 周交通事件热力图
// 交通事件 / 周
export function addTrafficEventPoint2(scene, msg) {
const layer = new HeatmapLayer({})
.source(msg, {
......@@ -213,7 +211,7 @@ export function addTrafficEventPoint2(scene, msg) {
return layer
}
// 月交通事件热力图
// 交通事件 / 月
export function addTrafficEventPoint3(scene, msg) {
const layer = new HeatmapLayer({})
.source(msg, {
......@@ -243,7 +241,7 @@ export function addTrafficEventPoint3(scene, msg) {
return layer
}
// 设备图层 ---
// 5种设备图层 ---
export function addEquipmentMilli(scene, msg, callback) {
msg.map(item =>{
item.x = item.wkt.split(',')[0]
......
wj-manage-web/public/config.js
View file @ 612b2b39
const map_config = {
// 地图引擎token
SYS_TITLE: '全息路段感知平台',
SYS_ID: '61283C05C4154AA9A57BD9005ABA1BCD',
MAP_TOKEN: 'pk.eyJ1IjoiZXRlcm5pdHkteHlmIiwiYSI6ImNqaDFsdXIxdTA1ODgycXJ5czdjNmF0ZTkifQ.zN7e588TqZOQMWfws-K0Yw',
MAP_CENTER: [120.62663, 31.42455],
MAP_ZOOM: 14.39,
MAX_ZOOM: 20.5,
MAP_PITCH: 60,
// MAP_STYLE: 'mapbox://styles/mapbox/dark-v11',
MAP_STYLE: 'http://106.120.201.126:14724/style.json', // 测试 - 2
MAP_STYLE_XL: 'http://106.120.201.126:14724/style-xl.json',
// MAP_STYLE: 'http://10.100.4.17:9090/style.json', // 演示
// RASTER_ROAD: 'http://10.100.1.59:8883/tile?lid=traffic&get=map&cache=off&x={x}&y={y}&z={z}', // 测试环境
RASTER_ROAD: 'http://106.120.201.126:14724/tile?lid=traffic&get=map&cache=off&x={x}&y={y}&z={z}', // 测试 - 2
// RASTER_ROAD: 'http://10.100.4.35:8883/tile?lid=traffic&get=map&cache=off&x={x}&y={y}&z={z}', // 演示
MAP_STYLE: 'http://106.120.201.126:14724/style.json', // 苏州高精
MAP_STYLE_XL: 'http://106.120.201.126:14724/style-xl.json', // 苏州高精带路口箭头
RASTER_ROAD: 'http://106.120.201.126:14724/tile?lid=traffic&get=map&cache=off&x={x}&y={y}&z={z}', // 路况栅格
}
const cesium_config = {
center: [116.288350, 40.052407],
zoomHeight: 1800,
baseMap: 'http://106.120.201.126:14722/styles/OSM%20OpenMapTiles/{z}/{x}/{y}@2x.png',
}
const ws_config = {
// BASE_URL: 'ws://10.100.1.59:17021/holo/subscribe', // 测试环境
// BASE_URL: 'ws://106.120.201.126:14724/holows/subscribe', // 测试 - 2
BASE_URL: 'ws://106.120.201.126:14736/holows/subscribe', // 测试 - 2
BASE_URL: 'ws://106.120.201.126:14736/holows/subscribe', // 苏州
// BASE_URL:'ws://10.102.1.182:18021/holows/subscribe',// 长沙
BASE_URL_TRACK: 'ws://10.102.1.182:18021/holows/subscribe',
// BASE_URL: 'ws://10.100.4.35:17021/holo/subscribe', // 演示
// CROSS_CONTROL: 'ws://10.100.1.59:32000/utc/signalStatus/', // 测试环境
// CROSS_CONTROL: 'ws://106.120.201.126:14724/utc/signalStatus/', // 测试 - 2
CROSS_CONTROL: 'ws://106.120.201.126:14724/utc/signalStatus/', // 测试 - 2
// CROSS_CONTROL: 'ws://10.100.4.14:32000/utc/signalStatus/', 演示
CROSS_CONTROL: 'ws://106.120.201.126:14724/utc/signalStatus/', // 路口灯态组件
}
\ No newline at end of file
wj-manage-web/src/components/Standard/map/index.vue
View file @ 612b2b39
......@@ -7,7 +7,6 @@
<script>
import { Scene } from "@antv/l7";
import { Mapbox } from "@antv/l7-maps";
import config from "../../../config/holo/mapConfig";
let map, scene;
// Point MultiPoint LineString MultiLineString Polygon MultiPolygon
export default {
......@@ -20,10 +19,14 @@ export default {
mounted() {},
methods: {
initMap() {
mapboxgl.accessToken = config.accessToken;
map = new mapboxgl.Map(
Object.assign({}, config.map, { container: this.mapId })
);
map = new mapboxgl.Map({
container:this.mapId,
style: map_config.MAP_STYLE,
center: map_config.MAP_CENTER,
zoom: map_config.MAP_ZOOM,
maxZoom: map_config.MAX_ZOOM,
pitch: map_config.MAP_PITCH,
})
scene = new Scene({
logoVisible: false,
id: this.mapId,
......@@ -33,295 +36,9 @@ export default {
});
return [map, scene];
},
removeLayer(name) {
if (map.getLayer(name)) {
map.removeLayer(name);
}
},
removeSource(name) {
if (map.getSource(name)) {
map.removeSource(name);
}
},
/**
* coordinates
* html
*/
addPopup(options) {
let popups = [];
for (let i = 0; i < options.length; i++) {
let p = new mapboxgl.Popup();
// let popupHTML = `<div id="base-detail-${i}"></div>`;
p.setLngLat(options[i].coordinates).setHTML(options[i].html).addTo(map);
popups.push(p);
}
return popups;
},
/**
* layerId
* sourceId
* imgStep ['img1', 100, 'img2'] means: ( 0-100:img1 ) ( >100:img2 )
* sizeStep
*/
addClusterSymbolLayer(options) {
map.addLayer({
id: options.layerId,
type: "symbol",
source: options.sourceId,
filter: ["has", "point_count"],
layout: {
"icon-image": ["step", ["get", "point_count"], ...options.imgStep],
"icon-allow-overlap": true,
"icon-ignore-placement": true,
"icon-size": ["step", ["get", "point_count"], ...options.sizeStep],
},
});
map.on("mouseenter", options.layerId, () => {
map.getCanvas().style.cursor = "pointer";
});
map.on("mouseleave", "clusters", () => {
map.getCanvas().style.cursor = "unset";
});
},
/**
* sourceId
* sourceTypes: [type1, type2, ...]
* coordinateses [coord1, coord2, ...]
* propertieses [prop1{}, prop2{},]
*/
setSource(options) {
let features = [];
for (let key in options.coordinateses) {
features.push({
type: "Feature",
properties: options.propertieses[key],
geometry: {
type: options.sourceTypes[key],
coordinates: options.coordinateses[key],
},
});
}
map.getSource(options.sourceId).setData({
type: "FeatureCollection",
features: features,
});
},
/**
* el
* markers
* marker of markers : { coordinates: [] }
*/
addMarker(options, callback) {
let markerGroup = [];
for (const coordinates of options.markers) {
const markerItem = new mapboxgl.Marker(options.el || "")
.setLngLat(coordinates)
.addTo(map);
console.log(markerItem);
markerGroup.push(markerItem);
}
return markerGroup;
},
/**
* layerId
* sourceId
* imgId
*/
addHighLightLayer(options, callback) {
map.addLayer({
id: options.layerId,
type: "symbol",
source: options.sourceId,
layout: {
"icon-image": options.imgId,
"icon-size": 1,
"icon-rotate": ["get", "courseAngle"],
"icon-rotation-alignment": "map",
"icon-allow-overlap": true,
"icon-ignore-placement": true,
},
paint: {
"icon-color": "#129646",
},
filter: ["in", ["get", "picLicense"], ""],
});
callback && map.on("click", options.layerId, callback);
},
/**
* sourceId
* sourceTypes: [type1, type2, ...]
* coordinateses [coord1, coord2, ...]
* propertieses [prop1{}, prop2{},]
*/
addSource(options) {
let features = [];
for (let key in options.coordinateses) {
features.push({
type: "Feature",
properties: options.propertieses[key],
geometry: {
type: options.sourceTypes[key],
coordinates: options.coordinateses[key],
},
});
}
map.addSource(options.sourceId, {
type: "geojson",
data: {
type: "FeatureCollection",
features: features,
},
});
},
/**
* layerId
* sourceId
*/
addCircleLayer(options, callback) {
map.addLayer({
id: options.layerId,
type: "circle",
source: options.sourceId,
filter: [options.show ? "==" : "!=", "$type", "Point"],
paint: {
"circle-radius": 6,
"circle-color": "#5470c6",
},
});
map.on("mouseenter", options.layerId, () => {
map.getCanvas().style.cursor = "pointer";
});
map.on("mouseleave", options.layerId, () => {
map.getCanvas().style.cursor = "unset";
});
callback && map.on("click", options.layerId, callback);
},
/**
* layerId
* sourceId
* imgId - icon-image
* label
*/
addSymbolLayer(options, callback) {
map.addLayer({
id: options.layerId,
type: "symbol",
source: options.sourceId,
filter: [options.show ? "==" : "!=", "$type", "Point"],
layout: {
"icon-image": options.imgId,
"icon-size": 1,
"icon-rotate": options.text ? 0 : ["get", "courseAngle"],
"icon-rotation-alignment": "map",
"icon-allow-overlap": true,
"icon-ignore-placement": true,
"text-field": options.text
? ["concat", "等待人数 ", ["get", options.text], "人"]
: "",
"text-ignore-placement": true,
"text-rotation-alignment": "map",
"text-offset": [0, 1],
},
paint: {
"icon-color": ["get", "color"],
},
});
map.on("mouseenter", options.layerId, () => {
map.getCanvas().style.cursor = "pointer";
});
map.on("mouseleave", options.layerId, () => {
map.getCanvas().style.cursor = "unset";
});
callback && map.on("click", options.layerId, callback);
},
/**
* sourceId
* layerId
*/
addLineLayer(options) {
map.addLayer({
type: "line",
source: options.sourceId,
id: options.layerId,
paint: {
"line-color": "yellow",
"line-width": 6,
"line-dasharray": [0, 4, 3],
},
});
},
/**
* sourceId
* layerId
*/
addPolygonLayer(options) {
map.addLayer({
id: options.layerId,
type: "fill",
source: options.sourceId, // reference the data source
layout: {},
paint: {
"fill-color": "#0080ff", // blue color fill
"fill-opacity": 0.5,
},
});
},
/**
* sourceId
* sourceType
* coordinates
* properties
*/
addMultiSource(options) {
map.addSource(options.sourceId, {
type: "geojson",
data: {
type: "Feature",
geometry: {
type: options.sourceType,
coordinates: options.coordinates,
},
properties: options.properties,
},
});
},
/**
* sourceType
* sourceId
* coordinates
*/
setMultiSourceData(options) {
map.getSource(options.sourceId).setData({
type: "FeatureCollection",
features: [
{
type: "Feature",
properties: {},
geometry: {
type: options.sourceType,
coordinates: options.coordinates,
},
},
],
});
},
},
computed: {},
beforeDestory() {},
beforeDestroy() {},
};
</script>
......@@ -330,13 +47,9 @@ export default {
height: 100%;
position: relative;
}
#map {
height: 100%;
}
</style>
<style>
.mapboxgl-ctrl-attrib {
display: none;
}
</style>
wj-manage-web/src/components/Standard/map/index1.vue deleted 100644 → 0
View file @ 9a0c7edc
<template>
<div class="map_main">
<div :id="mapId" style="height: 100%"></div>
</div>
</template>
<script>
import { Scene } from "@antv/l7";
import { Mapbox } from "@antv/l7-maps";
import config from "../../../config/holo/mapConfig";
let map, scene;
// Point MultiPoint LineString MultiLineString Polygon MultiPolygon
export default {
name: "wMap",
props: ["mapId"],
components: {},
data() {
return {};
},
mounted() {},
methods: {
initMap() {
mapboxgl.accessToken = config.accessToken;
map = new mapboxgl.Map(
Object.assign({}, config.map, { container: this.mapId })
);
// scene = new Scene({
// logoVisible: false,
// id: this.mapId,
// map: new Mapbox({
// mapInstance: map,
// }),
// });
return map
},
removeLayer(name) {
if (map.getLayer(name)) {
map.removeLayer(name);
}
},
removeSource(name) {
if (map.getSource(name)) {
map.removeSource(name);
}
},
/**
* coordinates
* html
*/
addPopup(options) {
let popups = [];
for (let i = 0; i < options.length; i++) {
let p = new mapboxgl.Popup();
// let popupHTML = `<div id="base-detail-${i}"></div>`;
p.setLngLat(options[i].coordinates).setHTML(options[i].html).addTo(map);
popups.push(p);
}
return popups;
},
/**
* layerId
* sourceId
* imgStep ['img1', 100, 'img2'] means: ( 0-100:img1 ) ( >100:img2 )
* sizeStep
*/
addClusterSymbolLayer(options) {
map.addLayer({
id: options.layerId,
type: "symbol",
source: options.sourceId,
filter: ["has", "point_count"],
layout: {
"icon-image": ["step", ["get", "point_count"], ...options.imgStep],
"icon-allow-overlap": true,
"icon-ignore-placement": true,
"icon-size": ["step", ["get", "point_count"], ...options.sizeStep],
},
});
map.on("mouseenter", options.layerId, () => {
map.getCanvas().style.cursor = "pointer";
});
map.on("mouseleave", "clusters", () => {
map.getCanvas().style.cursor = "unset";
});
},
/**
* sourceId
* sourceTypes: [type1, type2, ...]
* coordinateses [coord1, coord2, ...]
* propertieses [prop1{}, prop2{},]
*/
setSource(options) {
let features = [];
for (let key in options.coordinateses) {
features.push({
type: "Feature",
properties: options.propertieses[key],
geometry: {
type: options.sourceTypes[key],
coordinates: options.coordinateses[key],
},
});
}
map.getSource(options.sourceId).setData({
type: "FeatureCollection",
features: features,
});
},
/**
* el
* markers
* marker of markers : { coordinates: [] }
*/
addMarker(options, callback) {
let markerGroup = [];
for (const coordinates of options.markers) {
const markerItem = new mapboxgl.Marker(options.el || "")
.setLngLat(coordinates)
.addTo(map);
console.log(markerItem);
markerGroup.push(markerItem);
}
return markerGroup;
},
/**
* layerId
* sourceId
* imgId
*/
addHighLightLayer(options, callback) {
map.addLayer({
id: options.layerId,
type: "symbol",
source: options.sourceId,
layout: {
"icon-image": options.imgId,
"icon-size": 1,
"icon-rotate": ["get", "courseAngle"],
"icon-rotation-alignment": "map",
"icon-allow-overlap": true,
"icon-ignore-placement": true,
},
paint: {
"icon-color": "#129646",
},
filter: ["in", ["get", "picLicense"], ""],
});
callback && map.on("click", options.layerId, callback);
},
/**
* sourceId
* sourceTypes: [type1, type2, ...]
* coordinateses [coord1, coord2, ...]
* propertieses [prop1{}, prop2{},]
*/
addSource(options) {
let features = [];
for (let key in options.coordinateses) {
features.push({
type: "Feature",
properties: options.propertieses[key],
geometry: {
type: options.sourceTypes[key],
coordinates: options.coordinateses[key],
},
});
}
map.addSource(options.sourceId, {
type: "geojson",
data: {
type: "FeatureCollection",
features: features,
},
});
},
/**
* layerId
* sourceId
*/
addCircleLayer(options, callback) {
map.addLayer({
id: options.layerId,
type: "circle",
source: options.sourceId,
filter: [options.show ? "==" : "!=", "$type", "Point"],
paint: {
"circle-radius": 6,
"circle-color": "#5470c6",
},
});
map.on("mouseenter", options.layerId, () => {
map.getCanvas().style.cursor = "pointer";
});
map.on("mouseleave", options.layerId, () => {
map.getCanvas().style.cursor = "unset";
});
callback && map.on("click", options.layerId, callback);
},
/**
* layerId
* sourceId
* imgId - icon-image
* label
*/
addSymbolLayer(options, callback) {
map.addLayer({
id: options.layerId,
type: "symbol",
source: options.sourceId,
filter: [options.show ? "==" : "!=", "$type", "Point"],
layout: {
"icon-image": options.imgId,
"icon-size": 1,
"icon-rotate": options.text ? 0 : ["get", "courseAngle"],
"icon-rotation-alignment": "map",
"icon-allow-overlap": true,
"icon-ignore-placement": true,
"text-field": options.text
? ["concat", "等待人数 ", ["get", options.text], "人"]
: "",
"text-ignore-placement": true,
"text-rotation-alignment": "map",
"text-offset": [0, 1],
},
paint: {
"icon-color": ["get", "color"],
},
});
map.on("mouseenter", options.layerId, () => {
map.getCanvas().style.cursor = "pointer";
});
map.on("mouseleave", options.layerId, () => {
map.getCanvas().style.cursor = "unset";
});
callback && map.on("click", options.layerId, callback);
},
/**
* sourceId
* layerId
*/
addLineLayer(options) {
map.addLayer({
type: "line",
source: options.sourceId,
id: options.layerId,
paint: {
"line-color": "yellow",
"line-width": 6,
"line-dasharray": [0, 4, 3],
},
});
},
/**
* sourceId
* layerId
*/
addPolygonLayer(options) {
map.addLayer({
id: options.layerId,
type: "fill",
source: options.sourceId, // reference the data source
layout: {},
paint: {
"fill-color": "#0080ff", // blue color fill
"fill-opacity": 0.5,
},
});
},
/**
* sourceId
* sourceType
* coordinates
* properties
*/
addMultiSource(options) {
map.addSource(options.sourceId, {
type: "geojson",
data: {
type: "Feature",
geometry: {
type: options.sourceType,
coordinates: options.coordinates,
},
properties: options.properties,
},
});
},
/**
* sourceType
* sourceId
* coordinates
*/
setMultiSourceData(options) {
map.getSource(options.sourceId).setData({
type: "FeatureCollection",
features: [
{
type: "Feature",
properties: {},
geometry: {
type: options.sourceType,
coordinates: options.coordinates,
},
},
],
});
},
},
computed: {},
beforeDestory() {},
};
</script>
<style scoped>
.map_main {
height: 100%;
position: relative;
}
#map {
height: 100%;
}
</style>
<style>
.mapboxgl-ctrl-attrib {
display: none;
}
</style>
wj-manage-web/src/config/holo/mapConfig.js → wj-manage-web/src/config/holo/mapAssets.js
View file @ 612b2b39
export default {
accessToken: 'pk.eyJ1IjoiZXRlcm5pdHkteHlmIiwiYSI6ImNqaDFsdXIxdTA1ODgycXJ5czdjNmF0ZTkifQ.zN7e588TqZOQMWfws-K0Yw',
map: {
container: 'map',
style: map_config.MAP_STYLE,
center: map_config.MAP_CENTER,
zoom: map_config.MAP_ZOOM,
maxZoom: map_config.MAX_ZOOM,
pitch: map_config.MAP_PITCH,
},
mapIcons: {
cross: require('../../assets/images/holo/location-yellow.png'),
event: require('../../assets/images/holo/event.png'),
......@@ -16,7 +7,5 @@ export default {
weather: require('../../assets/images/holo/qxjcy.png'),
camera: require('../../assets/images/holo/spxj.png'),
sign: require('../../assets/images/holo/xhj.png'),
},
rasterRoad: map_config.RASTER_ROAD,
// rasterRoad: 'http://10.100.4.14:8883/tile?lid=traffic&get=map&cache=on&x={x}&y={y}&z={z}',
}
}
wj-manage-web/src/views/efficiency/index.vue
View file @ 612b2b39
......@@ -154,10 +154,7 @@
import LeftMap from "./leftMap.vue";
import MsgCard from "../../components/Standard/msg-card.vue";
import CrossCompare from "./crossCompare.vue";
import WMap from "../../components/Standard/map/index1.vue";
import {getFontSize} from "../../config/holo/fontSize";
import PathPlayMap from "./pathPlayMap.vue";
import {multiVehicleTrackDetail} from '../../dao/track'
import IndexThreeBox from "../situation/indexThreeBox.vue";
import WsCompMap from "../situation/wsCompMap.vue";
......@@ -165,8 +162,6 @@ export default {
components: {
WsCompMap,
IndexThreeBox,
PathPlayMap,
WMap,
CrossCompare,
MsgCard,
LeftMap
......
wj-manage-web/src/views/efficiency/leftMap.vue
View file @ 612b2b39
......@@ -76,8 +76,6 @@ function show(ids) {
import MsgCard from "../../components/Standard/msg-card.vue";
import WMap from "../../components/Standard/map/index.vue";
import {crossInfo} from "../../dao/situation";
import mapConfig from "../../config/holo/mapConfig";
import {addCrossDetailPoint} from "../situation/l7Tools";
let map, scene, crossLayer, crossDetailLayer
export default {
......
wj-manage-web/src/views/efficiency/pathPlayMap.vue deleted 100644 → 0
View file @ 9a0c7edc
<template>
<wMap :mapId="'pathPlay-map'" ref="wMap"/>
</template>
<script>
import wMap from "../../components/Standard/map/index1.vue";
import dict from "../../config/holo/dictionary";
// let stats;
// import Stats from 'three/examples/jsm/libs/stats.module.js'
//
// function animate() {
// requestAnimationFrame(animate);
// stats.update();
// }
let {keys, values, entries} = Object;
let map,
mapMethods,
vehicleModelTypes = {},
mods=[],geos= []
export default {
name: "pathPlayMap",
components: {
wMap,
},
props: ['pathData'],
computed: {},
data() {
return {
loading: true,
duration:'',
};
},
beforeRouteLeave(to, from, next) {
this.$destroy();
next();
},
mounted() {
this.$nextTick(() => {
this.init();
});
},
methods: {
init() {
mapMethods = this.$refs.wMap;
map = mapMethods.initMap();
// stats = new Stats();
// map.getContainer().appendChild(stats.dom);
map.setCenter([120.62665852582649, 31.424490360048452]);
map.setZoom(18);
map.setPitch(0);
// map.setMinZoom(17.5);
map.on("style.load", () => {
this.loading = false
// animate()
map.addLayer({
id: "vehicle3D",
type: "custom",
renderingMode: "3d",
onAdd: (map, mbxContext) => {
window.tb = new Threebox(map, mbxContext, {
defaultLights: true,
});
for (let key in dict.vehicleTypes) {
window.tb.loadObj({
obj: `gltf/car${key}.gltf`,
type: "gltf",
units: "meters",
adjustment: {x: 0.5, y: 1, z: -0.6},
anchor: "bottom",
cloned: true,
rotation: { x: 90, y: 90, z: 0 },
bbox: false,
scale:1
}, (model) => {
vehicleModelTypes[`car${key}`] = model;
});
}
},
render: function (gl, matrix) {
window.tb.update();
},
});
});
},
anim() {
for (let i = 0; i < this.pathData.length; i++) {
mods[i].followPath({
path: geos[i],
duration: this.duration
}, function () {
})
}
},
play() {
if(this.pathData && this.pathData.length){
map.setCenter([this.pathData[0].tracks[0].longitude, this.pathData[0].tracks[0].latitude])
for (let path of this.pathData) {
let g = []
this.duration = path.endTime - path.startTime
for (let track of path.tracks) {
g.push([track.longitude, track.latitude])
}
let model = vehicleModelTypes[`car${path.originalType}`].duplicate()
model.setCoords([path.tracks[0].longitude, path.tracks[0].latitude]);
model.traverse((child) => {
if (child.isMesh && child.name.includes("_19")) {
child.material = child.material.clone();
child.material.color.set(
dict.vehicleRealColors[path.originalColor]
);
}
});
window.tb.add(model)
mods.push(model)
geos.push(g)
// let line = tb.line({
// geometry: g,
// width: 5,
// color: 'steelblue'
// })
// tb.add(line);
}
this.anim()
}
}
},
beforeDestroy() {
map && map.remove();
},
};
</script>
<style lang='less' scoped>
#map {
position: absolute;
width: 100%;
height: 100%;
}
</style>
\ No newline at end of file
wj-manage-web/src/views/situation/index.vue
View file @ 612b2b39
......@@ -55,7 +55,7 @@ import TrafficEventsTend from "./trafficEventsTend.vue";
import {initWs} from "../../config/holo/websocket";
import dict from "../../config/holo/dictionary";
import wsSource from "../../config/holo/wsSource";
import mapConfig from "../../config/holo/mapConfig";
import mapAssets from "../../config/holo/mapAssets";
import {crossInfo, eventInfo, equip_signal, equip_weather, equip_camera, equip_radar} from "../../dao/situation";
import * as l7Tools from "./l7Tools";
......@@ -79,25 +79,6 @@ function hide(layer) {
}
}
function hideL(ids) {
let arr = Array.isArray(ids) ? ids : [ids]
for (let item of arr) {
console.log(item, map.getLayer(item), map.getLayoutProperty(item, 'visibility'))
if (map.getLayoutProperty(item, 'visibility') === 'visible') {
map.setLayoutProperty(item, 'visibility', 'none')
}
}
}
function showL(ids) {
let arr = Array.isArray(ids) ? ids : [ids]
for (let item of arr) {
if (map.getLayoutProperty(item, 'visibility') === 'none') {
map.setLayoutProperty(item, 'visibility', 'visible')
}
}
}
function show(layer) {
let arr = Array.isArray(layer) ? layer : [layer];
for (let item of arr) {
......@@ -135,7 +116,6 @@ let map,
},
};
export default {
name: "indexThreeBox",
components: {
wMap,
MessageBoxes,
......@@ -178,10 +158,6 @@ export default {
crossData: '',
};
},
// beforeRouteLeave(to, from, next) {
// this.$destroy();
// next();
// },
mounted() {
this.$nextTick(() => {
this.init();
......@@ -236,8 +212,8 @@ export default {
[map, scene] = mapMethods.initMap();
scene.on("loaded", () => {
this.sceneLoaded = true;
for (let key in mapConfig.mapIcons) {
scene.addImage(key, mapConfig.mapIcons[key]);
for (let key in mapAssets.mapIcons) {
scene.addImage(key, mapAssets.mapIcons[key]);
}
map.addControl(new mapboxgl.NavigationControl(), 'bottom-right');
});
......@@ -245,6 +221,7 @@ export default {
console.log(e.lnglat)
})
map.on("style.load", () => {
// 快捷键
window.onkeydown = function () {
let center = map_config.MAP_CENTER
if (event.altKey && (event.keyCode === 49 || event.keyCode === 97)) {
......@@ -284,7 +261,7 @@ export default {
// enableHelpTooltips: true,
});
for (let key in dict.vehicleTypes) {
var options = {
let options = {
obj: `gltf/car${key}.gltf`,
type: "gltf",
units: "meters",
......@@ -412,20 +389,13 @@ export default {
}
});
if (!map.getLayer('raster_road')) {
mapUtils.addrasterLayer(map, 'raster_road', mapConfig.rasterRoad)
mapUtils.addrasterLayer(map, 'raster_road', map_config.RASTER_ROAD)
map.setLayoutProperty('raster_road', 'visibility', 'visible')
} else {
showL('raster_road')
if (map.getLayoutProperty('raster_road', 'visibility') === 'none') {
map.setLayoutProperty('raster_road', 'visibility', 'visible')
}
}
// if (!layers.second.roadRasterLayer) {
// layers.second.roadRasterLayer = l7Tools.addRoadRasterLayer(
// scene,
// mapConfig.rasterRoad
// );
// scene.addLayer(layers.second.roadRasterLayer);
// } else {
// show(layers.second.roadRasterLayer);
// }
},
eventPointClick(e) {
let data = e.feature
......@@ -567,22 +537,26 @@ export default {
changeCheck(item) {
if (item.check) {
this.currentCheck = item.label;
// hide other layer
for (let key in layers) {
if (key !== item.label) {
for (let layer of values(layers[key])) {
hide(layer);
}
}
}
// 不为车辆图层则关闭 websocket
if (item.label !== "first") {
this.closeWs();
if (window.tb) {
window.tb.world.visible = false;
}
}
// 不为路况图层则关闭栅格路况
if (item.label !== 'second') {
hideL('raster_road')
if (map.getLayoutProperty('raster_road', 'visibility') === 'visible') {
map.setLayoutProperty('raster_road', 'visibility', 'none')
}
}
// hide other layer
for (let key in layers) {
if (key !== item.label) {
for (let layer of values(layers[key])) {
hide(layer);
}
}
}
// add this
this[`switch${item.label}`]();
......@@ -696,44 +670,46 @@ export default {
// websocket 回调
callCar(msg) {
if (this.sceneLoaded) {
if (this.loading) this.loading = false
// 显示3D车辆
if (scene.getZoom() > 17) {
window.tb.world.visible = true;
this.currentLocation = msg;
let allData = this.diff(this.lastLocation, this.currentLocation);
// allData.forEach(item => {
// item.originalType = 5
// })
this.lastLocation = msg;
this.addDelUpdateVehicleModels(allData);
// 添加车牌号图层
if (!layers.first.license) {
layers.first.license = l7Tools.addLicenseLayer(scene, msg);
} else {
layers.first.license.setData(msg);
show(layers.first.license);
}
}
// 隐藏3D
else {
if (this.selectVehicle) {
this.selectVehicle = null;
}
if (window.tb) {
window.tb.world.visible = false;
}
hide([layers.first.license]);
if (!this.onlyMap) {
if (!layers.first.vehicle) {
layers.first.vehicle = l7Tools.addVehicleLayer(scene, msg);
// 第一帧 || 时间戳不相同则放行
if (this.lastLocation.length === 0 || this.lastLocation[0].dateTime !== msg[0].dateTime) {
if (this.loading) this.loading = false
// 显示3D车辆
if (scene.getZoom() > 17) {
window.tb.world.visible = true;
this.currentLocation = msg;
let allData = this.diff(this.lastLocation, this.currentLocation);
// allData.forEach(item => {
// item.originalType = 5
// })
this.lastLocation = msg;
this.addDelUpdateVehicleModels(allData);
// 添加车牌号图层
if (!layers.first.license) {
layers.first.license = l7Tools.addLicenseLayer(scene, msg);
} else {
// show(layers.first.vehicle);
layers.first.vehicle && layers.first.vehicle.setData(msg);
layers.first.license.setData(msg);
show(layers.first.license);
}
}
// 隐藏3D
else {
if (this.selectVehicle) {
this.selectVehicle = null;
}
if (window.tb) {
window.tb.world.visible = false;
}
hide([layers.first.license]);
if (!this.onlyMap) {
if (!layers.first.vehicle) {
layers.first.vehicle = l7Tools.addVehicleLayer(scene, msg);
} else {
// show(layers.first.vehicle);
layers.first.vehicle && layers.first.vehicle.setData(msg);
}
}
this.lastLocation = [];
}
this.lastLocation = [];
}
}
},
......@@ -931,7 +907,6 @@ export default {
// 处理剩余秒数文字图层
if (map.getLayer('light_text')) {
} else {
mapMethods
}
},
addLightModels(array) {
......
wj-manage-web/src/views/situation/wsCompMap.vue
View file @ 612b2b39
......@@ -37,7 +37,6 @@ import dict from "../../config/holo/dictionary";
import wsSource from "../../config/holo/wsSource";
import * as l7Tools from "./l7Tools";
import config from "../../config/holo/mapConfig";
import {Scene} from "@antv/l7";
import {Mapbox} from "@antv/l7-maps";
import {eventInfo} from "../../dao/situation";
......@@ -213,9 +212,14 @@ export default {
},
init() {
map = new mapboxgl.Map(
Object.assign({}, config.map, {container: this.mapId})
);
map = new mapboxgl.Map({
container: this.mapId,
style: map_config.MAP_STYLE,
center: map_config.MAP_CENTER,
zoom: map_config.MAP_ZOOM,
maxZoom: map_config.MAX_ZOOM,
pitch: map_config.MAP_PITCH,
});
scene = new Scene({
logoVisible: false,
id: this.mapId,
......
wj-manage-web/src/views/track/index.vue
View file @ 612b2b39
......@@ -182,7 +182,7 @@ export default {
// if (ws && ws.ws && ws.ws.readyState === 1) {
// return;
// }
// ws = initWs({name: 'trackCallCar', url: ws_config.BASE_URL_TRACK, sendData: JSON.stringify({dataType: 1})})
// ws = initWs({name: 'trackCallCar', url: ws_config.BASE_URL, sendData: JSON.stringify({dataType: 1})})
// ws.ws.onmessage = (e) => this.trackCallCar(JSON.parse(e.data));
// },
// trackCallCar(e) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment