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') ...@@ -7,13 +7,13 @@ module.exports = fs.existsSync('./local.config.js')
devServer: { devServer: {
proxy: { proxy: {
'/sso': { '/sso': {
target: 'http://10.100.1.59:9000', target: 'http://10.102.1.182:9000',
}, },
'/design': { '/design': {
target: 'http://10.100.1.59:9000', target: 'http://10.102.1.182:9000',
}, },
'/holo': { '/holo': {
target: 'http://10.100.1.59:9000', target: 'http://10.102.1.182:9000',
}, },
}, },
serve: [], serve: [],
......
wj-data-vision/public/config.js
View file @ 612b2b39
const map_config = { const map_config = {
// SYS_ID: '61283C05C4154AA9A57BD9005ABA1BCD',
SYS_ID: 'CAFC20296895433784C193457A870DFD', SYS_ID: 'CAFC20296895433784C193457A870DFD',
MAP_TOKEN: 'pk.eyJ1IjoiZXRlcm5pdHkteHlmIiwiYSI6ImNqaDFsdXIxdTA1ODgycXJ5czdjNmF0ZTkifQ.zN7e588TqZOQMWfws-K0Yw', MAP_CENTER: [112.96306239435421, 28.182939427196445],
MAP_CENTER: [120.62663, 31.42455],
MAP_CENTER_CHANGSHA:[112.96306239435421, 28.182939427196445],
MAP_ZOOM: 14.39, MAP_ZOOM: 14.39,
MAX_ZOOM: 20.5, MAX_ZOOM: 20.5,
MAP_PITCH: 60, MAP_PITCH: 60,
// MAP_STYLE: 'mapbox://styles/mapbox/dark-v11', MAP_STYLE: `http://106.120.201.126:14724/style-changsha.json`, // 长沙
MAP_STYLE: 'http://106.120.201.126:14724/style-changsha.json', // 测试 - 2
// 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 = { const ws_config = {
// BASE_URL: 'ws://106.120.201.126:14736/holows/subscribe', // 苏州 // BASE_URL: 'ws://106.120.201.126:14736/holows/subscribe', // 苏州
BASE_URL: 'ws://10.102.1.182:18021/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 @@ ...@@ -5,32 +5,17 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/> <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<link rel="icon" href="<%= BASE_URL %>logo.png"/> <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/normalize/normalize.css" rel="stylesheet"/>
<link href="/cdn/libs/element-ui/element-ui.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/vue/vue.js"></script>
<script src="/cdn/libs/element-ui/element-ui.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/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-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"/>
<!-- <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>-->
<script src="/cdn/libs/mapbox-gl/mapbox-gl.js" type="text/javascript"></script> <script src="/cdn/libs/mapbox-gl/mapbox-gl.js" type="text/javascript"></script>
<link href="/cdn/libs/mapbox-gl/mapbox-gl.css" rel="stylesheet"/> <link href="/cdn/libs/mapbox-gl/mapbox-gl.css" rel="stylesheet"/>
...@@ -38,7 +23,7 @@ ...@@ -38,7 +23,7 @@
<link href="/cdn/libs/threebox/threebox.css" rel="stylesheet"/> <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/turf/turf.min.js" type="text/javascript"></script>
<script src="/cdn/libs/flvjs/flv.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> <script src="./config.js"></script>
<style> <style>
......
wj-data-vision/src/components/Standard/map/index.vue
View file @ 612b2b39
...@@ -5,9 +5,9 @@ ...@@ -5,9 +5,9 @@
</template> </template>
<script> <script>
import { Scene } from "@antv/l7"; import {Scene} from "@antv/l7";
import { Mapbox } from "@antv/l7-maps"; import {Mapbox} from "@antv/l7-maps";
import config from "../../../config/holo/mapConfig";
let map, scene; let map, scene;
// Point MultiPoint LineString MultiLineString Polygon MultiPolygon // Point MultiPoint LineString MultiLineString Polygon MultiPolygon
export default { export default {
...@@ -17,13 +17,18 @@ export default { ...@@ -17,13 +17,18 @@ export default {
data() { data() {
return {}; return {};
}, },
mounted() {}, mounted() {
},
methods: { methods: {
initMap() { initMap() {
mapboxgl.accessToken = config.accessToken; map = new mapboxgl.Map({
map = new mapboxgl.Map( container: this.mapId,
Object.assign({}, config.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({ scene = new Scene({
logoVisible: false, logoVisible: false,
id: this.mapId, id: this.mapId,
...@@ -32,296 +37,11 @@ export default { ...@@ -32,296 +37,11 @@ export default {
}), }),
}); });
return [map, scene]; 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: {}, computed: {},
beforeDestory() {}, beforeDestroy() {
},
}; };
</script> </script>
...@@ -330,6 +50,7 @@ export default { ...@@ -330,6 +50,7 @@ export default {
height: 100%; height: 100%;
position: relative; position: relative;
} }
#map { #map {
height: 100%; 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 { 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: { mapIcons: {
cross_location: require('../../assets/images/holo/location-yellow.png'), cross_location: require('../../assets/images/holo/location-yellow.png'),
event: require('../../assets/images/holo/event.png'), event: require('../../assets/images/holo/event.png'),
...@@ -17,5 +8,4 @@ export default { ...@@ -17,5 +8,4 @@ export default {
camera: require('../../assets/images/holo/spxj.png'), camera: require('../../assets/images/holo/spxj.png'),
sign: require('../../assets/images/holo/xhj.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"; ...@@ -59,7 +59,7 @@ import wMap from "../../components/Standard/map/index.vue";
import {initWs} from "../../config/holo/websocket"; import {initWs} from "../../config/holo/websocket";
import dict from "../../config/holo/dictionary"; import dict from "../../config/holo/dictionary";
import wsSource from "../../config/holo/wsSource"; 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 {crossInfo, eventInfo, equip_signal, equip_weather, equip_camera, equip_radar} from "../../dao/situation";
const EquipmentPopup = Vue.extend(equipmentPopup); const EquipmentPopup = Vue.extend(equipmentPopup);
...@@ -221,8 +221,8 @@ export default { ...@@ -221,8 +221,8 @@ export default {
[map, scene] = mapMethods.initMap(); [map, scene] = mapMethods.initMap();
scene.on("loaded", () => { scene.on("loaded", () => {
this.sceneLoaded = true; this.sceneLoaded = true;
for (let key in mapConfig.mapIcons) { for (let key in mapAssets.mapIcons) {
scene.addImage(key, mapConfig.mapIcons[key]); scene.addImage(key, mapAssets.mapIcons[key]);
} }
}); });
...@@ -398,7 +398,7 @@ export default { ...@@ -398,7 +398,7 @@ export default {
} }
}); });
if (!map.getLayer('raster_road')) { 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') map.setLayoutProperty('raster_road', 'visibility', 'visible')
} else { } else {
showL('raster_road') showL('raster_road')
...@@ -671,43 +671,47 @@ export default { ...@@ -671,43 +671,47 @@ export default {
// websocket 回调 // websocket 回调
callCar(msg) { callCar(msg) {
if (this.sceneLoaded) { 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车辆 this.addDelUpdateVehicleModels(allData);
if (scene.getZoom() > 17) { // 添加车牌号图层
window.tb.world.visible = true; if (!layers.first.license) {
this.currentLocation = msg; layers.first.license = l7Tools.addLicenseLayer(scene, msg);
let allData = this.diff(this.lastLocation, this.currentLocation); } else {
// allData.forEach(item => { layers.first.license.setData(msg);
// item.originalType = 5 show(layers.first.license);
// }) }
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]); // 隐藏3D
if (!layers.first.vehicle) { else {
layers.first.vehicle = l7Tools.addVehicleLayer(scene, msg); if (this.selectVehicle) {
} else { this.selectVehicle = null;
// show(layers.first.vehicle); }
layers.first.vehicle && layers.first.vehicle.setData(msg); 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) { 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) { export function addLicenseLayer(scene, msg) {
const pointLayer = new PointLayer() const pointLayer = new PointLayer()
.source(msg, { .source(msg, {
...@@ -38,7 +36,7 @@ export function addLicenseLayer(scene, msg) { ...@@ -38,7 +36,7 @@ export function addLicenseLayer(scene, msg) {
return pointLayer return pointLayer
} }
// 车辆圆点图层 // 车辆圆点
export function addVehicleLayer(scene, msg) { export function addVehicleLayer(scene, msg) {
const pointLayer = new PointLayer() const pointLayer = new PointLayer()
.source(msg, { .source(msg, {
...@@ -58,7 +56,7 @@ export function addVehicleLayer(scene, msg) { ...@@ -58,7 +56,7 @@ export function addVehicleLayer(scene, msg) {
return pointLayer return pointLayer
} }
// 等待行人数量文本图层 // 等待行人数量
export function addPasserbyText(scene, msg) { export function addPasserbyText(scene, msg) {
const pointLayer = new PointLayer() const pointLayer = new PointLayer()
.source(msg, { .source(msg, {
...@@ -81,7 +79,7 @@ export function addPasserbyText(scene, msg) { ...@@ -81,7 +79,7 @@ export function addPasserbyText(scene, msg) {
return pointLayer return pointLayer
} }
// 路口图层 // 路口图标
export function addCrossPoint(scene, msg, offset, callback) { export function addCrossPoint(scene, msg, offset, callback) {
let pointLayer = new PointLayer({ zIndex: 2 }) let pointLayer = new PointLayer({ zIndex: 2 })
.source(msg, { .source(msg, {
...@@ -107,7 +105,7 @@ export function addCrossPoint(scene, msg, offset, callback) { ...@@ -107,7 +105,7 @@ export function addCrossPoint(scene, msg, offset, callback) {
return pointLayer return pointLayer
} }
// 路口名称图层 // 路口名称文字
export function addCrossDetailPoint(scene, msg) { export function addCrossDetailPoint(scene, msg) {
const pointLayer = new PointLayer({ zIndex: 3 }) const pointLayer = new PointLayer({ zIndex: 3 })
.source(msg, { .source(msg, {
...@@ -132,7 +130,7 @@ export function addCrossDetailPoint(scene, msg) { ...@@ -132,7 +130,7 @@ export function addCrossDetailPoint(scene, msg) {
return pointLayer return pointLayer
} }
// 天交通事件点图 && 热力图 // 交通事件 / 天
export function addTrafficEventPoint1(scene, msg, callback) { export function addTrafficEventPoint1(scene, msg, callback) {
const pointLayer = new PointLayer() const pointLayer = new PointLayer()
.source(msg, { .source(msg, {
...@@ -183,7 +181,7 @@ export function addTrafficEventPoint1Heat(scene, msg) { ...@@ -183,7 +181,7 @@ export function addTrafficEventPoint1Heat(scene, msg) {
return layer return layer
} }
// 周交通事件热力图 // 交通事件 / 周
export function addTrafficEventPoint2(scene, msg) { export function addTrafficEventPoint2(scene, msg) {
const layer = new HeatmapLayer({}) const layer = new HeatmapLayer({})
.source(msg, { .source(msg, {
...@@ -213,7 +211,7 @@ export function addTrafficEventPoint2(scene, msg) { ...@@ -213,7 +211,7 @@ export function addTrafficEventPoint2(scene, msg) {
return layer return layer
} }
// 月交通事件热力图 // 交通事件 / 月
export function addTrafficEventPoint3(scene, msg) { export function addTrafficEventPoint3(scene, msg) {
const layer = new HeatmapLayer({}) const layer = new HeatmapLayer({})
.source(msg, { .source(msg, {
...@@ -243,7 +241,7 @@ export function addTrafficEventPoint3(scene, msg) { ...@@ -243,7 +241,7 @@ export function addTrafficEventPoint3(scene, msg) {
return layer return layer
} }
// 设备图层 --- // 5种设备图层 ---
export function addEquipmentMilli(scene, msg, callback) { export function addEquipmentMilli(scene, msg, callback) {
msg.map(item =>{ msg.map(item =>{
item.x = item.wkt.split(',')[0] item.x = item.wkt.split(',')[0]
......
wj-manage-web/public/config.js
View file @ 612b2b39
const map_config = { const map_config = {
// 地图引擎token // 地图引擎token
SYS_TITLE: '全息路段感知平台', SYS_TITLE: '全息路段感知平台',
SYS_ID: '61283C05C4154AA9A57BD9005ABA1BCD', SYS_ID: '61283C05C4154AA9A57BD9005ABA1BCD',
MAP_TOKEN: 'pk.eyJ1IjoiZXRlcm5pdHkteHlmIiwiYSI6ImNqaDFsdXIxdTA1ODgycXJ5czdjNmF0ZTkifQ.zN7e588TqZOQMWfws-K0Yw',
MAP_CENTER: [120.62663, 31.42455], MAP_CENTER: [120.62663, 31.42455],
MAP_ZOOM: 14.39, MAP_ZOOM: 14.39,
MAX_ZOOM: 20.5, MAX_ZOOM: 20.5,
MAP_PITCH: 60, 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 = { const cesium_config = {
center: [116.288350, 40.052407], center: [116.288350, 40.052407],
zoomHeight: 1800, zoomHeight: 1800,
baseMap: 'http://106.120.201.126:14722/styles/OSM%20OpenMapTiles/{z}/{x}/{y}@2x.png', baseMap: 'http://106.120.201.126:14722/styles/OSM%20OpenMapTiles/{z}/{x}/{y}@2x.png',
} }
const ws_config = { const ws_config = {
// BASE_URL: 'ws://10.100.1.59:17021/holo/subscribe', // 测试环境 BASE_URL: 'ws://106.120.201.126:14736/holows/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://10.102.1.182:18021/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://106.120.201.126:14724/utc/signalStatus/', // 路口灯态组件
// 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/', 演示
} }
\ No newline at end of file
wj-manage-web/src/components/Standard/map/index.vue
View file @ 612b2b39
...@@ -7,7 +7,6 @@ ...@@ -7,7 +7,6 @@
<script> <script>
import { Scene } from "@antv/l7"; import { Scene } from "@antv/l7";
import { Mapbox } from "@antv/l7-maps"; import { Mapbox } from "@antv/l7-maps";
import config from "../../../config/holo/mapConfig";
let map, scene; let map, scene;
// Point MultiPoint LineString MultiLineString Polygon MultiPolygon // Point MultiPoint LineString MultiLineString Polygon MultiPolygon
export default { export default {
...@@ -20,10 +19,14 @@ export default { ...@@ -20,10 +19,14 @@ export default {
mounted() {}, mounted() {},
methods: { methods: {
initMap() { initMap() {
mapboxgl.accessToken = config.accessToken; map = new mapboxgl.Map({
map = new mapboxgl.Map( container:this.mapId,
Object.assign({}, config.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({ scene = new Scene({
logoVisible: false, logoVisible: false,
id: this.mapId, id: this.mapId,
...@@ -33,295 +36,9 @@ export default { ...@@ -33,295 +36,9 @@ export default {
}); });
return [map, scene]; 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: {}, computed: {},
beforeDestory() {}, beforeDestroy() {},
}; };
</script> </script>
...@@ -330,13 +47,9 @@ export default { ...@@ -330,13 +47,9 @@ export default {
height: 100%; height: 100%;
position: relative; position: relative;
} }
#map {
height: 100%;
}
</style> </style>
<style> <style>
.mapboxgl-ctrl-attrib { .mapboxgl-ctrl-attrib {
display: none; display: none;
} }
</style> </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 { 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: { mapIcons: {
cross: require('../../assets/images/holo/location-yellow.png'), cross: require('../../assets/images/holo/location-yellow.png'),
event: require('../../assets/images/holo/event.png'), event: require('../../assets/images/holo/event.png'),
...@@ -16,7 +7,5 @@ export default { ...@@ -16,7 +7,5 @@ export default {
weather: require('../../assets/images/holo/qxjcy.png'), weather: require('../../assets/images/holo/qxjcy.png'),
camera: require('../../assets/images/holo/spxj.png'), camera: require('../../assets/images/holo/spxj.png'),
sign: require('../../assets/images/holo/xhj.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 @@ ...@@ -154,10 +154,7 @@
import LeftMap from "./leftMap.vue"; import LeftMap from "./leftMap.vue";
import MsgCard from "../../components/Standard/msg-card.vue"; import MsgCard from "../../components/Standard/msg-card.vue";
import CrossCompare from "./crossCompare.vue"; import CrossCompare from "./crossCompare.vue";
import WMap from "../../components/Standard/map/index1.vue";
import {getFontSize} from "../../config/holo/fontSize"; import {getFontSize} from "../../config/holo/fontSize";
import PathPlayMap from "./pathPlayMap.vue";
import {multiVehicleTrackDetail} from '../../dao/track'
import IndexThreeBox from "../situation/indexThreeBox.vue"; import IndexThreeBox from "../situation/indexThreeBox.vue";
import WsCompMap from "../situation/wsCompMap.vue"; import WsCompMap from "../situation/wsCompMap.vue";
...@@ -165,8 +162,6 @@ export default { ...@@ -165,8 +162,6 @@ export default {
components: { components: {
WsCompMap, WsCompMap,
IndexThreeBox, IndexThreeBox,
PathPlayMap,
WMap,
CrossCompare, CrossCompare,
MsgCard, MsgCard,
LeftMap LeftMap
......
wj-manage-web/src/views/efficiency/leftMap.vue
View file @ 612b2b39
...@@ -76,8 +76,6 @@ function show(ids) { ...@@ -76,8 +76,6 @@ function show(ids) {
import MsgCard from "../../components/Standard/msg-card.vue"; import MsgCard from "../../components/Standard/msg-card.vue";
import WMap from "../../components/Standard/map/index.vue"; import WMap from "../../components/Standard/map/index.vue";
import {crossInfo} from "../../dao/situation"; import {crossInfo} from "../../dao/situation";
import mapConfig from "../../config/holo/mapConfig";
import {addCrossDetailPoint} from "../situation/l7Tools";
let map, scene, crossLayer, crossDetailLayer let map, scene, crossLayer, crossDetailLayer
export default { 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"; ...@@ -55,7 +55,7 @@ import TrafficEventsTend from "./trafficEventsTend.vue";
import {initWs} from "../../config/holo/websocket"; import {initWs} from "../../config/holo/websocket";
import dict from "../../config/holo/dictionary"; import dict from "../../config/holo/dictionary";
import wsSource from "../../config/holo/wsSource"; 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 {crossInfo, eventInfo, equip_signal, equip_weather, equip_camera, equip_radar} from "../../dao/situation";
import * as l7Tools from "./l7Tools"; import * as l7Tools from "./l7Tools";
...@@ -79,25 +79,6 @@ function hide(layer) { ...@@ -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) { function show(layer) {
let arr = Array.isArray(layer) ? layer : [layer]; let arr = Array.isArray(layer) ? layer : [layer];
for (let item of arr) { for (let item of arr) {
...@@ -135,7 +116,6 @@ let map, ...@@ -135,7 +116,6 @@ let map,
}, },
}; };
export default { export default {
name: "indexThreeBox",
components: { components: {
wMap, wMap,
MessageBoxes, MessageBoxes,
...@@ -178,10 +158,6 @@ export default { ...@@ -178,10 +158,6 @@ export default {
crossData: '', crossData: '',
}; };
}, },
// beforeRouteLeave(to, from, next) {
// this.$destroy();
// next();
// },
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
this.init(); this.init();
...@@ -236,8 +212,8 @@ export default { ...@@ -236,8 +212,8 @@ export default {
[map, scene] = mapMethods.initMap(); [map, scene] = mapMethods.initMap();
scene.on("loaded", () => { scene.on("loaded", () => {
this.sceneLoaded = true; this.sceneLoaded = true;
for (let key in mapConfig.mapIcons) { for (let key in mapAssets.mapIcons) {
scene.addImage(key, mapConfig.mapIcons[key]); scene.addImage(key, mapAssets.mapIcons[key]);
} }
map.addControl(new mapboxgl.NavigationControl(), 'bottom-right'); map.addControl(new mapboxgl.NavigationControl(), 'bottom-right');
}); });
...@@ -245,6 +221,7 @@ export default { ...@@ -245,6 +221,7 @@ export default {
console.log(e.lnglat) console.log(e.lnglat)
}) })
map.on("style.load", () => { map.on("style.load", () => {
// 快捷键
window.onkeydown = function () { window.onkeydown = function () {
let center = map_config.MAP_CENTER let center = map_config.MAP_CENTER
if (event.altKey && (event.keyCode === 49 || event.keyCode === 97)) { if (event.altKey && (event.keyCode === 49 || event.keyCode === 97)) {
...@@ -284,7 +261,7 @@ export default { ...@@ -284,7 +261,7 @@ export default {
// enableHelpTooltips: true, // enableHelpTooltips: true,
}); });
for (let key in dict.vehicleTypes) { for (let key in dict.vehicleTypes) {
var options = { let options = {
obj: `gltf/car${key}.gltf`, obj: `gltf/car${key}.gltf`,
type: "gltf", type: "gltf",
units: "meters", units: "meters",
...@@ -412,20 +389,13 @@ export default { ...@@ -412,20 +389,13 @@ export default {
} }
}); });
if (!map.getLayer('raster_road')) { 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') map.setLayoutProperty('raster_road', 'visibility', 'visible')
} else { } 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) { eventPointClick(e) {
let data = e.feature let data = e.feature
...@@ -567,22 +537,26 @@ export default { ...@@ -567,22 +537,26 @@ export default {
changeCheck(item) { changeCheck(item) {
if (item.check) { if (item.check) {
this.currentCheck = item.label; this.currentCheck = item.label;
// hide other layer // 不为车辆图层则关闭 websocket
for (let key in layers) {
if (key !== item.label) {
for (let layer of values(layers[key])) {
hide(layer);
}
}
}
if (item.label !== "first") { if (item.label !== "first") {
this.closeWs(); this.closeWs();
if (window.tb) { if (window.tb) {
window.tb.world.visible = false; window.tb.world.visible = false;
} }
} }
// 不为路况图层则关闭栅格路况
if (item.label !== 'second') { 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 // add this
this[`switch${item.label}`](); this[`switch${item.label}`]();
...@@ -696,44 +670,46 @@ export default { ...@@ -696,44 +670,46 @@ export default {
// websocket 回调 // websocket 回调
callCar(msg) { callCar(msg) {
if (this.sceneLoaded) { if (this.sceneLoaded) {
if (this.loading) this.loading = false // 第一帧 || 时间戳不相同则放行
if (this.lastLocation.length === 0 || this.lastLocation[0].dateTime !== msg[0].dateTime) {
// 显示3D车辆 if (this.loading) this.loading = false
if (scene.getZoom() > 17) { // 显示3D车辆
window.tb.world.visible = true; if (scene.getZoom() > 17) {
this.currentLocation = msg; window.tb.world.visible = true;
let allData = this.diff(this.lastLocation, this.currentLocation); this.currentLocation = msg;
// allData.forEach(item => { let allData = this.diff(this.lastLocation, this.currentLocation);
// item.originalType = 5 // allData.forEach(item => {
// }) // item.originalType = 5
this.lastLocation = msg; // })
this.addDelUpdateVehicleModels(allData); this.lastLocation = msg;
// 添加车牌号图层 this.addDelUpdateVehicleModels(allData);
if (!layers.first.license) { // 添加车牌号图层
layers.first.license = l7Tools.addLicenseLayer(scene, msg); if (!layers.first.license) {
} else { layers.first.license = l7Tools.addLicenseLayer(scene, 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 { } else {
// show(layers.first.vehicle); layers.first.license.setData(msg);
layers.first.vehicle && layers.first.vehicle.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 { ...@@ -931,7 +907,6 @@ export default {
// 处理剩余秒数文字图层 // 处理剩余秒数文字图层
if (map.getLayer('light_text')) { if (map.getLayer('light_text')) {
} else { } else {
mapMethods
} }
}, },
addLightModels(array) { addLightModels(array) {
......
wj-manage-web/src/views/situation/wsCompMap.vue
View file @ 612b2b39
...@@ -37,7 +37,6 @@ import dict from "../../config/holo/dictionary"; ...@@ -37,7 +37,6 @@ import dict from "../../config/holo/dictionary";
import wsSource from "../../config/holo/wsSource"; import wsSource from "../../config/holo/wsSource";
import * as l7Tools from "./l7Tools"; import * as l7Tools from "./l7Tools";
import config from "../../config/holo/mapConfig";
import {Scene} from "@antv/l7"; import {Scene} from "@antv/l7";
import {Mapbox} from "@antv/l7-maps"; import {Mapbox} from "@antv/l7-maps";
import {eventInfo} from "../../dao/situation"; import {eventInfo} from "../../dao/situation";
...@@ -213,9 +212,14 @@ export default { ...@@ -213,9 +212,14 @@ export default {
}, },
init() { init() {
map = new mapboxgl.Map( map = new mapboxgl.Map({
Object.assign({}, config.map, {container: this.mapId}) 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({ scene = new Scene({
logoVisible: false, logoVisible: false,
id: this.mapId, id: this.mapId,
......
wj-manage-web/src/views/track/index.vue
View file @ 612b2b39
...@@ -182,7 +182,7 @@ export default { ...@@ -182,7 +182,7 @@ export default {
// if (ws && ws.ws && ws.ws.readyState === 1) { // if (ws && ws.ws && ws.ws.readyState === 1) {
// return; // 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)); // ws.ws.onmessage = (e) => this.trackCallCar(JSON.parse(e.data));
// }, // },
// trackCallCar(e) { // 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