Skip to content

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

迁移mine map

parent b1343828
Show whitespace changes
Inline Side-by-side
Showing with 226 additions and 610 deletions
login/vue.config.js
View file @ fa67efed
...@@ -10,6 +10,8 @@ const proxy = { ...@@ -10,6 +10,8 @@ const proxy = {
// target: 'http://10.102.1.182:9000', // target: 'http://10.102.1.182:9000',
// target: 'http://10.102.1.182:9100', // target: 'http://10.102.1.182:9100',
target: 'http://106.120.201.126:14724', target: 'http://106.120.201.126:14724',
// target: 'http://37.12.182.29:9000', // 济南
}, },
'/cdn': { '/cdn': {
target: 'http://127.0.0.1:3000', target: 'http://127.0.0.1:3000',
......
wj-manage-web/public/index.html
View file @ fa67efed
...@@ -22,22 +22,21 @@ ...@@ -22,22 +22,21 @@
href="/cdn/libs/mapbox-gl-draw/mapbox-gl-draw.css" href="/cdn/libs/mapbox-gl-draw/mapbox-gl-draw.css"
type="text/css" type="text/css"
/> />
<link rel="stylesheet" href="//119.163.106.187:11080/minemapapi/v2.1.0/minemap.css"> <link rel="stylesheet" href="//37.8.188.98:21009/minemapapi/v2.1.0/minemap.css">
<script src="//119.163.106.187:11080/minemapapi/v2.1.0/minemap.js"></script> <script src="//37.8.188.98:21009/minemapapi/v2.1.0/minemap.js"></script>
<script> <script>
/** /**
* 全局参数设置 * 全局参数设置
*/ */
minemap.domainUrl = '//119.163.106.187:11080'; minemap.domainUrl = '//37.8.188.98:21009';
minemap.dataDomainUrl = '//119.163.106.187:11080'; minemap.dataDomainUrl = '//37.8.188.98:21009';
minemap.serverDomainUrl = '//119.163.106.187:11080'; minemap.serverDomainUrl = '//37.8.188.98:21009';
minemap.spriteUrl = '//119.163.106.187:11080/minemapapi/v2.1.0/sprite/sprite'; minemap.spriteUrl = '//37.8.188.98:21009/minemapapi/v2.1.0/sprite/sprite';
minemap.serviceUrl = '//119.163.106.187:11080/service/'; minemap.serviceUrl = '//37.8.188.98:21009/service/';
/** /**
* key、solution设置 * key、solution设置
*/ */
minemap.key = 'fe874f67b89d4c0dab56780f8423324c'; minemap.key = 'fe874f67b89d4c0dab56780f8423324c';
minemap.solution = 12612;
</script> </script>
<style> <style>
#app, #app,
......
wj-manage-web/src/main.js
View file @ fa67efed
...@@ -20,7 +20,8 @@ import 'element-ui/lib/theme-chalk/index.css'; ...@@ -20,7 +20,8 @@ import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI, { Vue.use(ElementUI, {
size: 'small', size: 'small',
}) })
window.wsHost = (process.env.NODE_ENV==='development'?'10.102.1.182:9000':location.host) // window.wsHost = (process.env.NODE_ENV==='development'?'10.102.1.182:9000':location.host)
window.wsHost = (process.env.NODE_ENV==='development'?'37.12.182.29:9000':location.host)
// 暂时挂载到window 以支持项目之前的ELEMENT.Message写法 // 暂时挂载到window 以支持项目之前的ELEMENT.Message写法
window.ELEMENT = ElementUI window.ELEMENT = ElementUI
// 事件总线 // 事件总线
......
wj-manage-web/src/utils/map/mapUtilsV2.js
View file @ fa67efed
...@@ -418,7 +418,7 @@ export default { ...@@ -418,7 +418,7 @@ export default {
var offset = offset ? offset : [0, 0]; var offset = offset ? offset : [0, 0];
var className = className ? className :''; var className = className ? className :'';
var popup = new mapboxgl.Popup({ closeOnClick: false, offset: offset,className:className}) var popup = new mapboxgl.Popup({ closeOnClick: false, offset: offset,className:className})
.setLngLat([lng, lat]) .setLngLat(wgs84togcj02(lng, lat))
.setHTML(html) .setHTML(html)
.addTo(map); .addTo(map);
var obj = { var obj = {
......
wj-manage-web/src/utils/mapUtils.js
View file @ fa67efed
...@@ -5,8 +5,8 @@ const ee = 0.00669342162296594323 ...@@ -5,8 +5,8 @@ const ee = 0.00669342162296594323
export function initWMap(id,center,zoom) { export function initWMap(id,center,zoom) {
let map = new minemap.Map({ let map = new minemap.Map({
container: id, container: id,
// style: '//119.163.106.187:11080/service/solu/style/id/12612', /*白色底图样式*/ // style: '//37.8.188.98:21009/service/solu/style/id/16976', /*白色底图样式*/
style: '//119.163.106.187:11080/service/solu/style/id/12620', /*蓝色底图样式*/ style: '//37.8.188.98:21009/service/solu/style/id/16980', /*蓝色底图样式*/
center: center || map_config.MAP_CENTER, center: center || map_config.MAP_CENTER,
zoom: zoom || map_config.MAP_ZOOM, zoom: zoom || map_config.MAP_ZOOM,
pitch: map_config.MAP_PITCH, pitch: map_config.MAP_PITCH,
......
wj-manage-web/src/utils/mapboxTools.js
View file @ fa67efed
...@@ -17,25 +17,17 @@ function createTriangleIcon(color) { ...@@ -17,25 +17,17 @@ function createTriangleIcon(color) {
export function addOrUpdateSelectVehicleTrack(map, geo) { export function addOrUpdateSelectVehicleTrack(map, geo) {
if (!map.getSource("selectVehicleTrack")) { if (!map.getSource("selectVehicleTrack")) {
map.addSource("selectVehicleTrack", { map.addSource("selectVehicleTrack", {
type: "geojson", type: "geojson", data: geo,
data: geo,
}); });
} else { } else {
map.getSource("selectVehicleTrack").setData(geo); map.getSource("selectVehicleTrack").setData(geo);
} }
if (!map.getLayer("selectVehicleTrack")) { if (!map.getLayer("selectVehicleTrack")) {
map.addLayer( map.addLayer({
{ id: "selectVehicleTrack", type: "line", source: "selectVehicleTrack", paint: {
id: "selectVehicleTrack", "line-color": 'red', "line-width": 3,
type: "line",
source: "selectVehicleTrack",
paint: {
"line-color": 'red',
"line-width": 3,
},
}, },
"vehicle3D" });
);
} }
} }
...@@ -43,22 +35,15 @@ export function addOrUpdateSelectVehicleTrack(map, geo) { ...@@ -43,22 +35,15 @@ export function addOrUpdateSelectVehicleTrack(map, geo) {
export function addOrUpdateMilliScope(map, geo) { export function addOrUpdateMilliScope(map, geo) {
if (!map.getSource(`milliScope`)) { if (!map.getSource(`milliScope`)) {
map.addSource(`milliScope`, { map.addSource(`milliScope`, {
type: "geojson", type: "geojson", data: geo,
data: geo,
}); });
} }
if (!map.getLayer(`milliScope`)) { if (!map.getLayer(`milliScope`)) {
map.addLayer( map.addLayer({
{ id: `milliScope`, source: `milliScope`, type: "fill", paint: {
id: `milliScope`, "fill-color": 'rgba(68, 114, 196, 0.4)',
source: `milliScope`,
type: "fill",
paint: {
"fill-color": 'rgba(68, 114, 196, 0.4)', // 默认值，如果没有匹配到上述枚举值]
},
}, },
"vehicle3D" });
);
} }
} }
...@@ -66,76 +51,51 @@ export function addOrUpdateMilliScope(map, geo) { ...@@ -66,76 +51,51 @@ export function addOrUpdateMilliScope(map, geo) {
export function addOrUpdateLightLayers(map, geo) { export function addOrUpdateLightLayers(map, geo) {
if (!map.getSource("lightLayer")) { if (!map.getSource("lightLayer")) {
map.addSource("lightLayer", { map.addSource("lightLayer", {
type: "geojson", type: "geojson", data: geo,
data: geo,
}); });
} else { } else {
map.getSource("lightLayer").setData(geo); map.getSource("lightLayer").setData(geo);
} }
if (!map.getSource("lightLayerText")) { if (!map.getSource("lightLayerText")) {
map.addSource("lightLayerText", { map.addSource("lightLayerText", {
type: "geojson", type: "geojson", data: geo,
data: geo,
}); });
} else { } else {
map.getSource("lightLayerText").setData(geo); map.getSource("lightLayerText").setData(geo);
} }
if (!map.getLayer("lightLayer")) { if (!map.getLayer("lightLayer")) {
map.addLayer( map.addLayer({
{ id: "lightLayer", type: "symbol", source: "lightLayer", layout: {
id: "lightLayer",
type: "symbol",
source: "lightLayer",
layout: {
"icon-allow-overlap": true, "icon-allow-overlap": true,
"icon-ignore-placement": true, "icon-ignore-placement": true,
"icon-size": 0.7, "icon-size": 0.7,
"icon-image": ["get", "ts"], "icon-image": ["get", "ts"],
"icon-pitch-alignment": "map", "icon-pitch-alignment": "map", // "icon-rotate": ["+", ["*", ["get", "roadDir"], 45], 180],
// "icon-rotate": ["+", ["*", ["get", "roadDir"], 45], 180],
'icon-rotate': ['get', 'lightAngle'], 'icon-rotate': ['get', 'lightAngle'],
"icon-rotation-alignment": "map", "icon-rotation-alignment": "map",
}, },
}, });
"vehicle3D"
);
} }
if (!map.getLayer("lightLayerText")) { if (!map.getLayer("lightLayerText")) {
map.addLayer( map.addLayer({
{ id: "lightLayerText", type: "symbol", source: "lightLayerText", layout: {
id: "lightLayerText",
type: "symbol",
source: "lightLayerText",
layout: {
"text-allow-overlap": true, "text-allow-overlap": true,
"text-ignore-placement": true, "text-ignore-placement": true,
"text-field": ["get", "remainTime"], "text-field": ["get", "remainTime"],
"text-size": 14, "text-size": 14,
"text-pitch-alignment": "map", "text-pitch-alignment": "map",
"text-rotation-alignment": "map", "text-rotation-alignment": "map",
'text-rotate': ['get', 'lightAngle'], 'text-rotate': ['get', 'lightAngle'], // "text-rotate": ["+", ["*", ["get", "roadDir"], 45], 180],
// "text-rotate": ["+", ["*", ["get", "roadDir"], 45], 180], }, paint: {
},
paint: {
"text-color": "white", "text-color": "white",
"text-halo-blur": 1, "text-halo-blur": 1,
"text-halo-width": 2, "text-halo-width": 2,
"text-halo-color": [ "text-halo-color": ["match", ["get", "state"], // 属性字段名称
"match", "red", "rgba(255, 130, 130, 0.5)", "yellow", "rgba(255, 179, 0, 0.5)", "green", "rgba(48, 255, 141, 0.5)", "rgba(255,255,255,0)", // 默认值，如果没有匹配到上述枚举值
["get", "state"], // 属性字段名称
"red",
"rgba(255, 130, 130, 0.5)",
"yellow",
"rgba(255, 179, 0, 0.5)",
"green",
"rgba(48, 255, 141, 0.5)",
"rgba(255,255,255,0)", // 默认值，如果没有匹配到上述枚举值
], ],
}, },
}, });
"vehicle3D"
);
} }
} }
...@@ -143,34 +103,18 @@ export function addOrUpdateLightLayers(map, geo) { ...@@ -143,34 +103,18 @@ export function addOrUpdateLightLayers(map, geo) {
export function addOrUpdateWaitingPolygons(map, geo) { export function addOrUpdateWaitingPolygons(map, geo) {
if (!map.getSource("waitingLayer")) { if (!map.getSource("waitingLayer")) {
map.addSource("waitingLayer", { map.addSource("waitingLayer", {
type: "geojson", type: "geojson", data: geo,
data: geo,
}); });
} else { } else {
map.getSource("waitingLayer").setData(geo); map.getSource("waitingLayer").setData(geo);
} }
if (!map.getLayer("waitingLayer")) { if (!map.getLayer("waitingLayer")) {
map.addLayer( map.addLayer({
{ id: "waitingLayer", type: "fill", source: "waitingLayer", paint: {
id: "waitingLayer", "fill-color": ["match", ["get", "state"], // 属性字段名称
type: "fill", 'red', "rgba(231, 63, 50,0.4)", 'green', 'rgba(35, 148, 67,0.4)', 'yellow', 'rgba(251, 194, 29,0.4)', "rgba(255,255,255,0)",], // 默认值，如果没有匹配到上述枚举值]
source: "waitingLayer",
paint: {
"fill-color": [
"match",
["get", "state"], // 属性字段名称
'red',
"rgba(231, 63, 50,0.4)",
'green',
'rgba(35, 148, 67,0.4)',
'yellow',
'rgba(251, 194, 29,0.4)',
"rgba(255,255,255,0)",
], // 默认值，如果没有匹配到上述枚举值]
},
}, },
"vehicle3D" });
);
} }
} }
...@@ -178,99 +122,51 @@ export function addOrUpdateWaitingPolygons(map, geo) { ...@@ -178,99 +122,51 @@ export function addOrUpdateWaitingPolygons(map, geo) {
export function addOrUpdateDetetorA(map, geo) { export function addOrUpdateDetetorA(map, geo) {
if (!map.getSource("detetorsA")) { if (!map.getSource("detetorsA")) {
map.addSource("detetorsA", { map.addSource("detetorsA", {
type: "geojson", type: "geojson", data: geo,
data: geo,
}); });
} else { } else {
map.getSource("detetorsA").setData(geo); map.getSource("detetorsA").setData(geo);
} }
if (!map.getLayer("detetorsA")) { if (!map.getLayer("detetorsA")) {
map.addLayer( map.addLayer({
{ id: "detetorsA", type: "line", source: "detetorsA", paint: {
id: "detetorsA", "line-color": ["match", ["get", "state"], 0, "green", 1, "red", "green",], "line-width": 3,
type: "line",
source: "detetorsA",
paint: {
"line-color": [
"match",
["get", "state"],
0,
"green",
1,
"red",
"green",
],
"line-width": 3,
},
}, },
"vehicle3D" });
);
} }
} }
export function addOrUpdateDetetorB(map, geo) { export function addOrUpdateDetetorB(map, geo) {
if (!map.getSource("detetorsB")) { if (!map.getSource("detetorsB")) {
map.addSource("detetorsB", { map.addSource("detetorsB", {
type: "geojson", type: "geojson", data: geo,
data: geo,
}); });
} else { } else {
map.getSource("detetorsB").setData(geo); map.getSource("detetorsB").setData(geo);
} }
if (!map.getLayer("detetorsB")) { if (!map.getLayer("detetorsB")) {
map.addLayer( map.addLayer({
{ id: "detetorsB", type: "line", source: "detetorsB", paint: {
id: "detetorsB", "line-color": ["match", ["get", "state"], 0, "green", 1, "red", "green",], "line-width": 3,
type: "line",
source: "detetorsB",
paint: {
"line-color": [
"match",
["get", "state"],
0,
"green",
1,
"red",
"green",
],
"line-width": 3,
},
}, },
"vehicle3D" });
);
} }
} }
export function addOrUpdateDetetorC(map, geo) { export function addOrUpdateDetetorC(map, geo) {
if (!map.getSource("detetorsC")) { if (!map.getSource("detetorsC")) {
map.addSource("detetorsC", { map.addSource("detetorsC", {
type: "geojson", type: "geojson", data: geo,
data: geo,
}); });
} else { } else {
map.getSource("detetorsC").setData(geo); map.getSource("detetorsC").setData(geo);
} }
if (!map.getLayer("detetorsC")) { if (!map.getLayer("detetorsC")) {
map.addLayer( map.addLayer({
{ id: "detetorsC", type: "line", source: "detetorsC", paint: {
id: "detetorsC", "line-color": ["match", ["get", "state"], 0, "green", 1, "red", "green",], "line-width": 3,
type: "line",
source: "detetorsC",
paint: {
"line-color": [
"match",
["get", "state"],
0,
"green",
1,
"red",
"green",
],
"line-width": 3,
},
}, },
"vehicle3D" });
);
} }
} }
...@@ -279,34 +175,19 @@ export function addOrUpdateRoadVector(map) { ...@@ -279,34 +175,19 @@ export function addOrUpdateRoadVector(map) {
if (!map.getSource("vector_road")) { if (!map.getSource("vector_road")) {
map.addSource("vector_road", { map.addSource("vector_road", {
type: "vector", type: "vector",
tiles: [map_config.VECTOR_ROAD], tiles: [
// map_config.VECTOR_ROAD
'http://10.10.20.110:15020/holo/tile?z={z}&x={x}&y={y}'
],
}); });
} }
if (!map.getLayer("vector_road_layer")) { if (!map.getLayer("vector_road_layer")) {
map.addLayer({ map.addLayer({
id: "vector_road_layer", id: "vector_road_layer", source: "vector_road", "source-layer": "line-layer", type: "line", layout: {
source: "vector_road", "line-join": "round", "line-cap": "round",
"source-layer": "line-layer", }, paint: {
type: "line",
layout: {
"line-join": "round",
"line-cap": "round",
},
paint: {
"line-width": 3, "line-width": 3,
"line-color": [ "line-color": ["match", ["get", "status"], "1", "green", "2", "yellow", "3", "orange", "4", "red", "green",],
"match",
["get", "status"],
"1",
"green",
"2",
"yellow",
"3",
"orange",
"4",
"red",
"green",
],
}, },
}); });
if (map.getLayer("holo_crossPointS")) map.moveLayer("holo_crossPointS"); if (map.getLayer("holo_crossPointS")) map.moveLayer("holo_crossPointS");
...@@ -320,23 +201,19 @@ export function addOrUpdateWave(map, geo) { ...@@ -320,23 +201,19 @@ export function addOrUpdateWave(map, geo) {
} else { } else {
map.addSource("dot-point", { map.addSource("dot-point", {
type: "geojson", type: "geojson", data: geo,
data: geo,
}); });
} }
if (!map.getLayer("vehicleSelectWave")) { if (!map.getLayer("vehicleSelectWave")) {
map.addLayer({ map.addLayer({
id: "vehicleSelectWave", id: "vehicleSelectWave", type: "symbol", source: "dot-point", layout: {
type: "symbol",
source: "dot-point",
layout: {
"icon-image": "pulsingDot0", "icon-image": "pulsingDot0",
"icon-pitch-alignment": "map", "icon-pitch-alignment": "map",
"icon-rotation-alignment": "map", "icon-rotation-alignment": "map",
'icon-allow-overlap': true, 'icon-allow-overlap': true,
'icon-ignore-placement': true, 'icon-ignore-placement': true,
}, },
}, 'vehicle3D'); });
if (map.getLayer("vehiclePic")) { if (map.getLayer("vehiclePic")) {
map.moveLayer("vehicleSelectWave", "vehiclePic"); map.moveLayer("vehicleSelectWave", "vehiclePic");
} }
...@@ -373,12 +250,7 @@ export function convertPointsWktToGeo(arr) { ...@@ -373,12 +250,7 @@ export function convertPointsWktToGeo(arr) {
for (let item of arr) { for (let item of arr) {
if (item.wkt) { if (item.wkt) {
if (item.wkt.split(",").length === 2) { if (item.wkt.split(",").length === 2) {
features.push( features.push(turf.point(wgs84togcj02(item.wkt.split(",").map((item) => Number(item))), item));
turf.point(
wgs84togcj02(item.wkt.split(",").map((item) => Number(item))),
item
)
);
} }
} }
} }
...@@ -389,9 +261,9 @@ export function convertToLineWithWkt(json) { ...@@ -389,9 +261,9 @@ export function convertToLineWithWkt(json) {
let features = []; let features = [];
for (let item of json) { for (let item of json) {
if (item.wkt) { if (item.wkt) {
let lnglats = wgs84togcj02(item.wkt.split(";")); let lnglats = item.wkt.split(";");
for (let i = 0; i < lnglats.length; i++) { for (let i = 0; i < lnglats.length; i++) {
lnglats[i] = lnglats[i].split(",").map((j) => Number(j)); lnglats[i] = wgs84togcj02(lnglats[i].split(",").map((j) => Number(j)));
} }
features.push(turf.lineString(lnglats, item)); features.push(turf.lineString(lnglats, item));
} }
...@@ -406,19 +278,13 @@ export function addOrUpdateWarningWave(map, arr, id) { ...@@ -406,19 +278,13 @@ export function addOrUpdateWarningWave(map, arr, id) {
map.getSource(id).setData(geo); map.getSource(id).setData(geo);
} else { } else {
map.addSource(id, { map.addSource(id, {
type: "geojson", type: "geojson", data: geo,
data: geo,
}); });
} }
if (!map.getLayer(id)) { if (!map.getLayer(id)) {
map.addLayer({ map.addLayer({
id: id, id: id, type: "symbol", source: id, layout: {
type: "symbol", 'icon-allow-overlap': true, 'icon-ignore-placement': true, // "icon-image": [
source: id,
layout: {
'icon-allow-overlap': true,
'icon-ignore-placement': true,
// "icon-image": [
// "match", // "match",
// ["get", "type"], // ["get", "type"],
// 1, // 1,
...@@ -431,9 +297,7 @@ export function addOrUpdateWarningWave(map, arr, id) { ...@@ -431,9 +297,7 @@ export function addOrUpdateWarningWave(map, arr, id) {
// "pulsingDot4", // "pulsingDot4",
// "", // "",
// ], // ],
"icon-image": "pulsingDot0", "icon-image": "pulsingDot0", "icon-pitch-alignment": "map", "icon-rotation-alignment": "map",
"icon-pitch-alignment": "map",
"icon-rotation-alignment": "map",
}, },
}); });
} }
...@@ -444,21 +308,15 @@ export function addOrUpdateVehicle(map, arr) { ...@@ -444,21 +308,15 @@ export function addOrUpdateVehicle(map, arr) {
let geo = convertPointsToGeo(arr) let geo = convertPointsToGeo(arr)
if (!map.getSource("vehicle")) { if (!map.getSource("vehicle")) {
map.addSource("vehicle", { map.addSource("vehicle", {
type: "geojson", type: "geojson", data: geo,
data: geo,
}); });
} else { } else {
map.getSource("vehicle").setData(geo); map.getSource("vehicle").setData(geo);
} }
if (!map.getLayer("vehicle")) { if (!map.getLayer("vehicle")) {
map.addLayer({ map.addLayer({
id: "vehicle", id: "vehicle", type: "circle", source: "vehicle", paint: {
type: "circle", "circle-blur": 1, "circle-color": "#06f4fe", "circle-pitch-alignment": "map",
source: "vehicle",
paint: {
"circle-blur": 1,
"circle-color": "#06f4fe",
"circle-pitch-alignment": "map",
}, },
}); });
if (map.getLayer("holo_crossPoint")) map.moveLayer("holo_crossPoint"); if (map.getLayer("holo_crossPoint")) map.moveLayer("holo_crossPoint");
...@@ -470,8 +328,7 @@ export function addOrUpdateCross(map, geo, callback) { ...@@ -470,8 +328,7 @@ export function addOrUpdateCross(map, geo, callback) {
console.log('cross geo...', geo) console.log('cross geo...', geo)
if (!map.getSource("holo_crossPoint")) { if (!map.getSource("holo_crossPoint")) {
map.addSource("holo_crossPoint", { map.addSource("holo_crossPoint", {
type: "geojson", type: "geojson", data: geo,
data: geo,
}); });
} else { } else {
map.getSource("holo_crossPoint").setData(geo); map.getSource("holo_crossPoint").setData(geo);
...@@ -479,21 +336,10 @@ export function addOrUpdateCross(map, geo, callback) { ...@@ -479,21 +336,10 @@ export function addOrUpdateCross(map, geo, callback) {
if (!map.getLayer("holo_crossPoint")) { if (!map.getLayer("holo_crossPoint")) {
map.addLayer({ map.addLayer({
id: "holo_crossPoint", id: "holo_crossPoint", type: "symbol", source: "holo_crossPoint", layout: {
type: "symbol", "icon-image": ["match", ["get", "isSignal"], // 属性字段名称
source: "holo_crossPoint", 1, "crossNormal", 0, "crossFalse", "crossSelect", // 默认值，如果没有匹配到上述枚举值
layout: { ], "icon-size": 0.7, "icon-offset": [0, -10],
"icon-image": [
"match",
["get", "isSignal"], // 属性字段名称
1,
"crossNormal",
0,
"crossFalse",
"crossSelect", // 默认值，如果没有匹配到上述枚举值
],
"icon-size": 0.7,
"icon-offset": [0, -10],
}, },
}); });
map.on("click", "holo_crossPoint", (aaa) => callback(aaa)); map.on("click", "holo_crossPoint", (aaa) => callback(aaa));
...@@ -504,29 +350,17 @@ export function addOrUpdateCross(map, geo, callback) { ...@@ -504,29 +350,17 @@ export function addOrUpdateCross(map, geo, callback) {
export function addOrUpdateCrossS(map, geo, callback) { export function addOrUpdateCrossS(map, geo, callback) {
if (!map.getSource("holo_crossPointS")) { if (!map.getSource("holo_crossPointS")) {
map.addSource("holo_crossPointS", { map.addSource("holo_crossPointS", {
type: "geojson", type: "geojson", data: geo,
data: geo,
}); });
} else { } else {
map.getSource("holo_crossPointS").setData(geo); map.getSource("holo_crossPointS").setData(geo);
} }
if (!map.getLayer("holo_crossPointS")) { if (!map.getLayer("holo_crossPointS")) {
map.addLayer({ map.addLayer({
id: "holo_crossPointS", id: "holo_crossPointS", type: "symbol", source: "holo_crossPointS", layout: {
type: "symbol", "icon-image": ["match", ["get", "isSignal"], // 属性字段名称
source: "holo_crossPointS", 1, "crossNormal", 0, "crossFalse", "crossSelect", // 默认值，如果没有匹配到上述枚举值
layout: { ], "icon-size": 0.7, "icon-offset": [0, -10],
"icon-image": [
"match",
["get", "isSignal"], // 属性字段名称
1,
"crossNormal",
0,
"crossFalse",
"crossSelect", // 默认值，如果没有匹配到上述枚举值
],
"icon-size": 0.7,
"icon-offset": [0, -10],
}, },
}); });
map.on("click", "holo_crossPointS", (aaa) => callback(aaa)); map.on("click", "holo_crossPointS", (aaa) => callback(aaa));
...@@ -537,28 +371,21 @@ export function addOrUpdateCrossS(map, geo, callback) { ...@@ -537,28 +371,21 @@ export function addOrUpdateCrossS(map, geo, callback) {
export function addOrUpdateCrossName(map, geo) { export function addOrUpdateCrossName(map, geo) {
if (!map.getSource("holo_crossPoint")) { if (!map.getSource("holo_crossPoint")) {
map.addSource("holo_crossPoint", { map.addSource("holo_crossPoint", {
type: "geojson", type: "geojson", data: geo,
data: geo,
}); });
} else { } else {
map.getSource("holo_crossPoint").setData(geo); map.getSource("holo_crossPoint").setData(geo);
} }
if (!map.getLayer("holo_crossName")) { if (!map.getLayer("holo_crossName")) {
map.addLayer({ map.addLayer({
id: "holo_crossName", id: "holo_crossName", type: "symbol", source: "holo_crossPoint", layout: {
type: "symbol",
source: "holo_crossPoint",
layout: {
"text-field": ["get", "name"], "text-field": ["get", "name"],
"text-size": 12, "text-size": 12,
"text-offset": [0, 1.5], "text-offset": [0, 1.5],
"text-allow-overlap": true, "text-allow-overlap": true,
"text-ignore-placement": true, "text-ignore-placement": true,
}, }, paint: {
paint: { "text-color": "white", "text-halo-blur": 1, "text-halo-width": 2,
"text-color": "white",
"text-halo-blur": 1,
"text-halo-width": 2,
"text-halo-color": "black", "text-halo-color": "black",
}, },
...@@ -572,36 +399,16 @@ export function addOrUpdateEventHeat(map, arr, callback) { ...@@ -572,36 +399,16 @@ export function addOrUpdateEventHeat(map, arr, callback) {
let geo = convertPointsLngLatToGeo(arr) let geo = convertPointsLngLatToGeo(arr)
if (!map.getSource("eventHeat")) { if (!map.getSource("eventHeat")) {
map.addSource("eventHeat", { map.addSource("eventHeat", {
type: "geojson", type: "geojson", data: geo,
data: geo,
}); });
} else { } else {
map.getSource("eventHeat").setData(geo); map.getSource("eventHeat").setData(geo);
} }
if (!map.getLayer("eventHeat")) { if (!map.getLayer("eventHeat")) {
map.addLayer({ map.addLayer({
id: "eventHeat", id: "eventHeat", type: "heatmap", source: "eventHeat", paint: {
type: "heatmap", "heatmap-color": ["interpolate", ["linear"], ["heatmap-density"], 0, "rgba(38, 233, 251,0.0)", 0.1, "rgba(38, 233, 251,0.2)", // 低密度的颜色
source: "eventHeat", 0.2, "rgba(36, 239, 219,0.7)", 0.4, "rgba(83, 231, 169,0.8)", 0.6, "rgba(190, 236, 68,0.9)", 0.8, "rgba(252, 145, 3,0.9)", 1, "rgba(253, 108, 3,1)", // 高密度的颜色
paint: {
"heatmap-color": [
"interpolate",
["linear"],
["heatmap-density"],
0,
"rgba(38, 233, 251,0.0)",
0.1,
"rgba(38, 233, 251,0.2)", // 低密度的颜色
0.2,
"rgba(36, 239, 219,0.7)",
0.4,
"rgba(83, 231, 169,0.8)",
0.6,
"rgba(190, 236, 68,0.9)",
0.8,
"rgba(252, 145, 3,0.9)",
1,
"rgba(253, 108, 3,1)", // 高密度的颜色
], ],
}, },
}); });
...@@ -616,21 +423,15 @@ export function addOrUpdateEventPoint(map, arr, callback) { ...@@ -616,21 +423,15 @@ export function addOrUpdateEventPoint(map, arr, callback) {
let geo = convertPointsLngLatToGeo(arr) let geo = convertPointsLngLatToGeo(arr)
if (!map.getSource("eventPoint")) { if (!map.getSource("eventPoint")) {
map.addSource("eventPoint", { map.addSource("eventPoint", {
type: "geojson", type: "geojson", data: geo,
data: geo,
}); });
} else { } else {
map.getSource("eventPoint").setData(geo); map.getSource("eventPoint").setData(geo);
} }
if (!map.getLayer("eventPoint")) { if (!map.getLayer("eventPoint")) {
map.addLayer({ map.addLayer({
id: "eventPoint", id: "eventPoint", type: "symbol", source: "eventPoint", layout: {
type: "symbol", "icon-image": "event", "icon-size": 1, "icon-offset": [0, -10],
source: "eventPoint",
layout: {
"icon-image": "event",
"icon-size": 1,
"icon-offset": [0, -10],
}, },
}); });
map.on("click", "eventPoint", (aaa) => callback(aaa)); map.on("click", "eventPoint", (aaa) => callback(aaa));
...@@ -642,8 +443,7 @@ export function addOrUpdateEquipCamera(map, geo, callback) { ...@@ -642,8 +443,7 @@ export function addOrUpdateEquipCamera(map, geo, callback) {
if (!map.getSource("camera")) { if (!map.getSource("camera")) {
console.log("addsource"); console.log("addsource");
map.addSource("camera", { map.addSource("camera", {
type: "geojson", type: "geojson", data: geo,
data: geo,
}); });
} else { } else {
console.log("setData"); console.log("setData");
...@@ -652,23 +452,11 @@ export function addOrUpdateEquipCamera(map, geo, callback) { ...@@ -652,23 +452,11 @@ export function addOrUpdateEquipCamera(map, geo, callback) {
if (!map.getLayer("camera")) { if (!map.getLayer("camera")) {
console.log("addLayer"); console.log("addLayer");
map.addLayer({ map.addLayer({
id: "camera", id: "camera", type: "symbol", source: "camera", layout: {
type: "symbol", "icon-image": ["match", ["get", "status"], // 属性字段名称
source: "camera", '0', "cameraFalse", '1', 'camera', "cameraFalse",], // 默认值，如果没有匹配到上述枚举值]
layout: {
"icon-image": [
"match",
["get", "status"], // 属性字段名称
'0',
"cameraFalse",
'1',
'camera',
"cameraFalse",
], // 默认值，如果没有匹配到上述枚举值]
// "icon-image": "camera", // "icon-image": "camera",
"icon-size": 0.6, "icon-size": 0.6, "icon-ignore-placement": true, // 'icon-offset': [0, -10]
"icon-ignore-placement": true,
// 'icon-offset': [0, -10]
}, },
}); });
// map.on("click", "camera", (aaa) => callback(aaa, "camera")); // map.on("click", "camera", (aaa) => callback(aaa, "camera"));
...@@ -679,31 +467,18 @@ export function addOrUpdateEquipCamera(map, geo, callback) { ...@@ -679,31 +467,18 @@ export function addOrUpdateEquipCamera(map, geo, callback) {
export function addOrUpdateEquipMilli(map, geo, callback) { export function addOrUpdateEquipMilli(map, geo, callback) {
if (!map.getSource("milli")) { if (!map.getSource("milli")) {
map.addSource("milli", { map.addSource("milli", {
type: "geojson", type: "geojson", data: geo,
data: geo,
}); });
} else { } else {
map.getSource("milli").setData(geo); map.getSource("milli").setData(geo);
} }
if (!map.getLayer("milli")) { if (!map.getLayer("milli")) {
map.addLayer({ map.addLayer({
id: "milli", id: "milli", type: "symbol", source: "milli", layout: {
type: "symbol", "icon-image": ["match", ["get", "status"], // 属性字段名称
source: "milli", '0', "milliFalse", '1', 'milli', "milliFalse",], // 默认值，如果没有匹配到上述枚举值]
layout: { 'icon-offset': [0, -20], // "icon-image": "milli",
"icon-image": [ "icon-size": 0.6, "icon-ignore-placement": true,
"match",
["get", "status"], // 属性字段名称
'0',
"milliFalse",
'1',
'milli',
"milliFalse",
], // 默认值，如果没有匹配到上述枚举值]
'icon-offset':[0,-20],
// "icon-image": "milli",
"icon-size": 0.6,
"icon-ignore-placement": true,
}, },
}); });
// map.on("click", "milli", (aaa) => callback(aaa, "milli")); // map.on("click", "milli", (aaa) => callback(aaa, "milli"));
...@@ -713,31 +488,18 @@ export function addOrUpdateEquipMilli(map, geo, callback) { ...@@ -713,31 +488,18 @@ export function addOrUpdateEquipMilli(map, geo, callback) {
export function addOrUpdateEquipRadar(map, geo, callback) { export function addOrUpdateEquipRadar(map, geo, callback) {
if (!map.getSource("radar")) { if (!map.getSource("radar")) {
map.addSource("radar", { map.addSource("radar", {
type: "geojson", type: "geojson", data: geo,
data: geo,
}); });
} else { } else {
map.getSource("radar").setData(geo); map.getSource("radar").setData(geo);
} }
if (!map.getLayer("radar")) { if (!map.getLayer("radar")) {
map.addLayer({ map.addLayer({
id: "radar", id: "radar", type: "symbol", source: "radar", layout: {
type: "symbol", 'icon-offset': [0, -20], "icon-image": ["match", ["get", "status"], // 属性字段名称
source: "radar", '0', "radarFalse", '1', 'radar', "radarFalse",], // 默认值，如果没有匹配到上述枚举值]
layout: {
'icon-offset':[0,-20],
"icon-image": [
"match",
["get", "status"], // 属性字段名称
'0',
"radarFalse",
'1',
'radar',
"radarFalse",
], // 默认值，如果没有匹配到上述枚举值]
// "icon-image": "radar", // "icon-image": "radar",
"icon-size": 0.6, "icon-size": 0.6, "icon-ignore-placement": true,
"icon-ignore-placement": true,
}, },
}); });
// map.on("click", "radar", (aaa) => callback(aaa, "radar")); // map.on("click", "radar", (aaa) => callback(aaa, "radar"));
...@@ -747,31 +509,18 @@ export function addOrUpdateEquipRadar(map, geo, callback) { ...@@ -747,31 +509,18 @@ export function addOrUpdateEquipRadar(map, geo, callback) {
export function addOrUpdateEquipSignal(map, geo, callback) { export function addOrUpdateEquipSignal(map, geo, callback) {
if (!map.getSource("signal")) { if (!map.getSource("signal")) {
map.addSource("signal", { map.addSource("signal", {
type: "geojson", type: "geojson", data: geo,
data: geo,
}); });
} else { } else {
map.getSource("signal").setData(geo); map.getSource("signal").setData(geo);
} }
if (!map.getLayer("signal")) { if (!map.getLayer("signal")) {
map.addLayer({ map.addLayer({
id: "signal", id: "signal", type: "symbol", source: "signal", layout: {
type: "symbol", 'icon-offset': [0, -20], // "icon-image": "signal",
source: "signal", "icon-image": ["match", ["get", "status"], // 属性字段名称
layout: { '0', "signalFalse", '1', 'signal', "signalFalse",], // 默认值，如果没有匹配到上述枚举值]
'icon-offset':[0,-20], "icon-size": 0.6, "icon-ignore-placement": true,
// "icon-image": "signal",
"icon-image": [
"match",
["get", "status"], // 属性字段名称
'0',
"signalFalse",
'1',
'signal',
"signalFalse",
], // 默认值，如果没有匹配到上述枚举值]
"icon-size": 0.6,
"icon-ignore-placement": true,
}, },
}); });
// map.on("click", "signal", (aaa) => callback(aaa, "signal")); // map.on("click", "signal", (aaa) => callback(aaa, "signal"));
...@@ -781,31 +530,18 @@ export function addOrUpdateEquipSignal(map, geo, callback) { ...@@ -781,31 +530,18 @@ export function addOrUpdateEquipSignal(map, geo, callback) {
export function addOrUpdateEquipWeather(map, geo, callback) { export function addOrUpdateEquipWeather(map, geo, callback) {
if (!map.getSource("weather")) { if (!map.getSource("weather")) {
map.addSource("weather", { map.addSource("weather", {
type: "geojson", type: "geojson", data: geo,
data: geo,
}); });
} else { } else {
map.getSource("weather").setData(geo); map.getSource("weather").setData(geo);
} }
if (!map.getLayer("weather")) { if (!map.getLayer("weather")) {
map.addLayer({ map.addLayer({
id: "weather", id: "weather", type: "symbol", source: "weather", layout: {
type: "symbol", 'icon-offset': [0, -20], // "icon-image": "weather",
source: "weather", "icon-image": ["match", ["get", "status"], // 属性字段名称
layout: { '0', "weatherFalse", '1', 'weather', "weatherFalse",], // 默认值，如果没有匹配到上述枚举值]
'icon-offset':[0,-20], "icon-size": 0.6, "icon-ignore-placement": true,
// "icon-image": "weather",
"icon-image": [
"match",
["get", "status"], // 属性字段名称
'0',
"weatherFalse",
'1',
'weather',
"weatherFalse",
], // 默认值，如果没有匹配到上述枚举值]
"icon-size": 0.6,
"icon-ignore-placement": true,
}, },
}); });
// map.on("click", "weather", (aaa) => callback(aaa, "weather")); // map.on("click", "weather", (aaa) => callback(aaa, "weather"));
...@@ -816,25 +552,20 @@ export function addOrUpdateEquipWeather(map, geo, callback) { ...@@ -816,25 +552,20 @@ export function addOrUpdateEquipWeather(map, geo, callback) {
export function addOrUpdateLicense(map, geo) { export function addOrUpdateLicense(map, geo) {
if (!map.getSource("license")) { if (!map.getSource("license")) {
map.addSource("license", { map.addSource("license", {
type: "geojson", type: "geojson", data: geo,
data: geo,
}); });
} else { } else {
map.getSource("license").setData(geo); map.getSource("license").setData(geo);
} }
if (!map.getLayer("licenseBack")) { if (!map.getLayer("licenseBack")) {
map.addLayer({ map.addLayer({
id: "licenseBack", id: "licenseBack", type: "symbol", source: "license", layout: {
type: "symbol",
source: "license",
layout: {
"icon-allow-overlap": true, "icon-allow-overlap": true,
"icon-ignore-placement": true, "icon-ignore-placement": true,
"icon-size": 0.4, "icon-size": 0.4,
"icon-image": ["concat", "license", ["get", "licenseColor"]], "icon-image": ["concat", "license", ["get", "licenseColor"]],
"icon-offset": [0, -80], "icon-offset": [0, -80],
}, }, paint: {
paint: {
// 'icon-translate': [-80, 0], // 'icon-translate': [-80, 0],
// 'icon-translate-anchor': 'viewport' // 'icon-translate-anchor': 'viewport'
}, },
...@@ -842,20 +573,14 @@ export function addOrUpdateLicense(map, geo) { ...@@ -842,20 +573,14 @@ export function addOrUpdateLicense(map, geo) {
} }
if (!map.getLayer("license")) { if (!map.getLayer("license")) {
map.addLayer({ map.addLayer({
id: "license", id: "license", type: "symbol", source: "license", layout: {
type: "symbol",
source: "license",
layout: {
"text-field": ["get", "picLicense"], "text-field": ["get", "picLicense"],
"text-size": 10, "text-size": 10,
"text-offset": [0, -3.5], "text-offset": [0, -3.5],
"text-allow-overlap": true, "text-allow-overlap": true,
"text-ignore-placement": true, "text-ignore-placement": true,
}, }, paint: {
paint: { "text-color": "white", "text-halo-width": 0.3, "text-halo-color": "white",
"text-color": "white",
"text-halo-width": 0.3,
"text-halo-color": "white",
}, },
}); });
} }
...@@ -866,31 +591,23 @@ export function addOrUpdateVehiclePic(map, arr) { ...@@ -866,31 +591,23 @@ export function addOrUpdateVehiclePic(map, arr) {
let geo = convertPointsToGeo(arr) let geo = convertPointsToGeo(arr)
if (!map.getSource("vehiclePic")) { if (!map.getSource("vehiclePic")) {
map.addSource("vehiclePic", { map.addSource("vehiclePic", {
type: "geojson", type: "geojson", data: geo,
data: geo,
}); });
} else { } else {
map.getSource("vehiclePic").setData(geo); map.getSource("vehiclePic").setData(geo);
} }
if (!map.getLayer("vehiclePic")) { if (!map.getLayer("vehiclePic")) {
map.addLayer( map.addLayer({
{ id: "vehiclePic", type: "symbol", source: "vehiclePic", layout: {
id: "vehiclePic",
type: "symbol",
source: "vehiclePic",
layout: {
"icon-allow-overlap": true, "icon-allow-overlap": true,
"icon-ignore-placement": true, "icon-ignore-placement": true,
"icon-size": 0.2, "icon-size": 0.2,
"icon-image": ["concat", "car", ["get", "originalType"]], "icon-image": ["concat", "car", ["get", "originalType"]],
"icon-pitch-alignment": "map", "icon-pitch-alignment": "map",
"icon-rotate": ["get", "courseAngle"], "icon-rotate": ["get", "courseAngle"],
"icon-rotation-alignment": "map", "icon-rotation-alignment": "map", // 'icon-offset': [0, -20]
// 'icon-offset': [0, -20]
},
}, },
"vehicle3D" });
);
} }
} }
...@@ -898,29 +615,17 @@ export function addOrUpdateVehiclePic(map, arr) { ...@@ -898,29 +615,17 @@ export function addOrUpdateVehiclePic(map, arr) {
export function addOrUpdateRoadPolygon(map, geo, callback) { export function addOrUpdateRoadPolygon(map, geo, callback) {
if (!map.getSource("roadPolygon")) { if (!map.getSource("roadPolygon")) {
map.addSource("roadPolygon", { map.addSource("roadPolygon", {
type: "geojson", type: "geojson", data: geo,
data: geo,
}); });
} else { } else {
map.getSource("roadPolygon").setData(geo); map.getSource("roadPolygon").setData(geo);
} }
if (!map.getLayer("roadPolygon")) { if (!map.getLayer("roadPolygon")) {
map.addLayer( map.addLayer({
{ id: "roadPolygon", type: "fill", source: "roadPolygon", paint: {
id: "roadPolygon", "fill-color": ["match", ["get", "select"], // 属性字段名称
type: "fill", 0, "rgba(114, 186, 190,0.4)", 1, // "rgba(114, 186, 190,0.8)",
source: "roadPolygon", 'rgba(213, 44, 54,0.8)', "rgba(255,255,255,1)",], // 默认值，如果没有匹配到上述枚举值]
paint: {
"fill-color": [
"match",
["get", "select"], // 属性字段名称
0,
"rgba(114, 186, 190,0.4)",
1,
// "rgba(114, 186, 190,0.8)",
'rgba(213, 44, 54,0.8)',
"rgba(255,255,255,1)",
], // 默认值，如果没有匹配到上述枚举值]
}, },
} }
// "vehicle3D" // "vehicle3D"
...@@ -934,20 +639,13 @@ export function addOrUpdateTrackPointVector(map, startTime, endTime, crossId) { ...@@ -934,20 +639,13 @@ export function addOrUpdateTrackPointVector(map, startTime, endTime, crossId) {
if (!map.getSource("myMVTLayer")) { if (!map.getSource("myMVTLayer")) {
map.addSource("myMVTLayer", { map.addSource("myMVTLayer", {
type: "vector", type: "vector",
tiles: [ tiles: [`${map_config.MVT_TILEURL}/holo/histrory-track/tile?z={z}&x={x}&y={y}&startTime=${startTime}&endTime=${endTime}&crossId=${crossId}`,],
`${map_config.MVT_TILEURL}/holo/histrory-track/tile?z={z}&x={x}&y={y}&startTime=${startTime}&endTime=${endTime}&crossId=${crossId}`,
],
}); });
} }
if (!map.getLayer("myMVTLayer")) { if (!map.getLayer("myMVTLayer")) {
map.addLayer({ map.addLayer({
id: "myMVTLayer", id: "myMVTLayer", type: "circle", source: "myMVTLayer", "source-layer": "track-point", paint: {
type: "circle", "circle-color": "#00fff1", "circle-radius": 1,
source: "myMVTLayer",
"source-layer": "track-point",
paint: {
"circle-color": "#00fff1",
"circle-radius": 1,
}, },
}); });
} }
...@@ -957,28 +655,17 @@ export function addOrUpdateTrackPointVector(map, startTime, endTime, crossId) { ...@@ -957,28 +655,17 @@ export function addOrUpdateTrackPointVector(map, startTime, endTime, crossId) {
export function addOrUpdateFlowLine(map, geo) { export function addOrUpdateFlowLine(map, geo) {
if (!map.getSource("flowLine")) { if (!map.getSource("flowLine")) {
map.addSource("flowLine", { map.addSource("flowLine", {
type: "geojson", type: "geojson", data: geo,
data: geo,
}); });
} else { } else {
map.getSource("flowLine").setData(geo); map.getSource("flowLine").setData(geo);
} }
if (!map.getLayer("flowLine")) { if (!map.getLayer("flowLine")) {
map.addLayer({ map.addLayer({
id: "flowLine", id: "flowLine", type: "line", source: "flowLine", paint: {
type: "line", "line-color": ["match", ["get", "select"], // 属性字段名称
source: "flowLine", 1, "rgba(152, 234, 35, 1)", 0, "rgba(1,1,1,0)", "rgba(1,1,1,0)", // 默认值，如果没有匹配到上述枚举值
paint: { ], "line-width": 2,
"line-color": [
"match",
["get", "select"], // 属性字段名称
1,
"rgba(152, 234, 35, 1)",
0,
"rgba(1,1,1,0)",
"rgba(1,1,1,0)", // 默认值，如果没有匹配到上述枚举值
],
"line-width": 2,
}, },
}); });
} }
...@@ -988,41 +675,18 @@ export function addOrUpdateFlowLine(map, geo) { ...@@ -988,41 +675,18 @@ export function addOrUpdateFlowLine(map, geo) {
export function addOrUpdateFlowLineR(map, geo) { export function addOrUpdateFlowLineR(map, geo) {
if (!map.getSource("flowLineR")) { if (!map.getSource("flowLineR")) {
map.addSource("flowLineR", { map.addSource("flowLineR", {
type: "geojson", type: "geojson", data: geo,
data: geo,
}); });
} else { } else {
map.getSource("flowLineR").setData(geo); map.getSource("flowLineR").setData(geo);
} }
if (!map.getLayer("flowLineR")) { if (!map.getLayer("flowLineR")) {
map.addLayer({ map.addLayer({
id: "flowLineR", id: "flowLineR", type: "line", source: "flowLineR", paint: {
type: "line",
source: "flowLineR",
paint: {
// 'line-color':'rgba(152, 234, 35, 1)', // 'line-color':'rgba(152, 234, 35, 1)',
"line-color": [ "line-color": ["match", ["get", "ridDir"], // 属性字段名称
"match", 1, "#d10401", 2, "#d10401", 3, "#08a24d", 4, "#08a24d", 5, "#5440b8", 6, "#5440b8", 7, "#f37c0b", 8, "#f37c0b", "rgba(1,1,1,0)", // 默认值，如果没有匹配到上述枚举值
["get", "ridDir"], // 属性字段名称 ], "line-width": 4,
1,
"#d10401",
2,
"#d10401",
3,
"#08a24d",
4,
"#08a24d",
5,
"#5440b8",
6,
"#5440b8",
7,
"#f37c0b",
8,
"#f37c0b",
"rgba(1,1,1,0)", // 默认值，如果没有匹配到上述枚举值
],
"line-width": 4,
}, },
}); });
} }
...@@ -1032,27 +696,20 @@ export function addOrUpdateFlowLineR(map, geo) { ...@@ -1032,27 +696,20 @@ export function addOrUpdateFlowLineR(map, geo) {
export function addOrUpdateFlowLineRText(map, geo) { export function addOrUpdateFlowLineRText(map, geo) {
if (!map.getSource("flowLineRText")) { if (!map.getSource("flowLineRText")) {
map.addSource("flowLineRText", { map.addSource("flowLineRText", {
type: "geojson", type: "geojson", data: geo,
data: geo,
}); });
} else { } else {
map.getSource("flowLineRText").setData(geo); map.getSource("flowLineRText").setData(geo);
} }
if (!map.getLayer("flowLineRText")) { if (!map.getLayer("flowLineRText")) {
map.addLayer({ map.addLayer({
id: "flowLineRText", id: "flowLineRText", type: "symbol", source: "flowLineRText", layout: {
type: "symbol",
source: "flowLineRText",
layout: {
"text-field": ["get", "flowVal"], "text-field": ["get", "flowVal"],
"text-allow-overlap": true, "text-allow-overlap": true,
"text-ignore-placement": true, "text-ignore-placement": true,
"text-size": 12, "text-size": 12,
}, }, paint: {
paint: { "text-color": "rgba(255, 225, 0, 1)", "text-halo-color": "black", "text-halo-width": 2,
"text-color": "rgba(255, 225, 0, 1)",
"text-halo-color": "black",
"text-halo-width": 2,
}, },
}); });
} }
...@@ -1062,8 +719,7 @@ export function addOrUpdateFlowLineRText(map, geo) { ...@@ -1062,8 +719,7 @@ export function addOrUpdateFlowLineRText(map, geo) {
export function addOrUpdateFlowLineRArrow(map, geo) { export function addOrUpdateFlowLineRArrow(map, geo) {
if (!map.getSource("flowLineArrowR")) { if (!map.getSource("flowLineArrowR")) {
map.addSource('flowLineArrowR', { map.addSource('flowLineArrowR', {
type: 'geojson', type: 'geojson', data: geo
data: geo
}); });
} else { } else {
map.getSource("flowLineArrowR").setData(geo); map.getSource("flowLineArrowR").setData(geo);
...@@ -1087,10 +743,7 @@ export function addOrUpdateFlowLineRArrow(map, geo) { ...@@ -1087,10 +743,7 @@ export function addOrUpdateFlowLineRArrow(map, geo) {
} }
} }
map.addLayer({ map.addLayer({
id: 'flowLineArrowR', id: 'flowLineArrowR', type: 'symbol', source: 'flowLineArrowR', layout: {
type: 'symbol',
source: 'flowLineArrowR',
layout: {
// 'icon-image': [ // 'icon-image': [
// "match", // "match",
// ["get", "ridDir"], // 属性字段名称 // ["get", "ridDir"], // 属性字段名称
...@@ -1112,10 +765,8 @@ export function addOrUpdateFlowLineRArrow(map, geo) { ...@@ -1112,10 +765,8 @@ export function addOrUpdateFlowLineRArrow(map, geo) {
// "arrowIcon3", // "arrowIcon3",
// "arrowIcon1", // "arrowIcon1",
// ], // ],
'icon-image': 'arrowIcon0', 'icon-image': 'arrowIcon0', 'icon-size': 0.5, // Adjust the size of the arrow
'icon-size': 0.5, // Adjust the size of the arrow 'icon-rotation-alignment': 'map', 'icon-rotate': ['get', 'bearing'], // Rotate the arrow based on bearing
'icon-rotation-alignment': 'map',
'icon-rotate': ['get', 'bearing'], // Rotate the arrow based on bearing
}, },
}); });
} }
...@@ -1126,30 +777,21 @@ export function addOrUpdateFlowLineArrow(map, json) { ...@@ -1126,30 +777,21 @@ export function addOrUpdateFlowLineArrow(map, json) {
let features = []; let features = [];
for (let item of json) { for (let item of json) {
if (item.select) { if (item.select) {
let angle = turf.bearing( let angle = turf.bearing(turf.point(item.lineArray[0]), turf.point(item.lineArray[1]));
turf.point(item.lineArray[0]), features.push(turf.point(wgs84togcj02([item.endLng, item.endLat]), {...item, angle: angle}));
turf.point(item.lineArray[1])
);
features.push(
turf.point(wgs84togcj02([item.endLng, item.endLat]), {...item, angle: angle})
);
} }
} }
let geo = turf.featureCollection(features); let geo = turf.featureCollection(features);
if (!map.getSource("flowLineArrow")) { if (!map.getSource("flowLineArrow")) {
map.addSource("flowLineArrow", { map.addSource("flowLineArrow", {
type: "geojson", type: "geojson", data: geo,
data: geo,
}); });
} else { } else {
map.getSource("flowLineArrow").setData(geo); map.getSource("flowLineArrow").setData(geo);
} }
if (!map.getLayer("flowLineArrow")) { if (!map.getLayer("flowLineArrow")) {
map.addLayer({ map.addLayer({
id: "flowLineArrow", id: "flowLineArrow", type: "symbol", source: "flowLineArrow", layout: {
type: "symbol",
source: "flowLineArrow",
layout: {
"icon-image": "lineArrow", "icon-image": "lineArrow",
"icon-rotate": ["get", "angle"], "icon-rotate": ["get", "angle"],
"icon-ignore-placement": true, "icon-ignore-placement": true,
...@@ -1175,27 +817,20 @@ export function addOrUpdateFlowText(map, json) { ...@@ -1175,27 +817,20 @@ export function addOrUpdateFlowText(map, json) {
let geo = turf.featureCollection(features); let geo = turf.featureCollection(features);
if (!map.getSource("flowText")) { if (!map.getSource("flowText")) {
map.addSource("flowText", { map.addSource("flowText", {
type: "geojson", type: "geojson", data: geo,
data: geo,
}); });
} else { } else {
map.getSource("flowText").setData(geo); map.getSource("flowText").setData(geo);
} }
if (!map.getLayer("flowText")) { if (!map.getLayer("flowText")) {
map.addLayer({ map.addLayer({
id: "flowText", id: "flowText", type: "symbol", source: "flowText", layout: {
type: "symbol",
source: "flowText",
layout: {
"text-field": ["get", "flow"], "text-field": ["get", "flow"],
"text-allow-overlap": true, "text-allow-overlap": true,
"text-ignore-placement": true, "text-ignore-placement": true,
"text-size": 12, "text-size": 12,
}, }, paint: {
paint: { "text-color": "rgba(255, 225, 0, 1)", "text-halo-color": "black", "text-halo-width": 2,
"text-color": "rgba(255, 225, 0, 1)",
"text-halo-color": "black",
"text-halo-width": 2,
}, },
}); });
} }
...@@ -1212,27 +847,20 @@ export function addOrUpdateFlowTextEnd(map, json) { ...@@ -1212,27 +847,20 @@ export function addOrUpdateFlowTextEnd(map, json) {
let geo = turf.featureCollection(features); let geo = turf.featureCollection(features);
if (!map.getSource("flowTextEnd")) { if (!map.getSource("flowTextEnd")) {
map.addSource("flowTextEnd", { map.addSource("flowTextEnd", {
type: "geojson", type: "geojson", data: geo,
data: geo,
}); });
} else { } else {
map.getSource("flowTextEnd").setData(geo); map.getSource("flowTextEnd").setData(geo);
} }
if (!map.getLayer("flowTextEnd")) { if (!map.getLayer("flowTextEnd")) {
map.addLayer({ map.addLayer({
id: "flowTextEnd", id: "flowTextEnd", type: "symbol", source: "flowTextEnd", layout: {
type: "symbol",
source: "flowTextEnd",
layout: {
"text-field": ["get", "endFlow"], "text-field": ["get", "endFlow"],
"text-allow-overlap": true, "text-allow-overlap": true,
"text-ignore-placement": true, "text-ignore-placement": true,
"text-size": 12, "text-size": 12,
}, }, paint: {
paint: { "text-color": "rgba(255, 225, 0, 1)", "text-halo-color": "black", "text-halo-width": 2,
"text-color": "rgba(255, 225, 0, 1)",
"text-halo-color": "black",
"text-halo-width": 2,
}, },
}); });
} }
...@@ -1373,12 +1001,10 @@ export function addCalibrationTail(map) { ...@@ -1373,12 +1001,10 @@ export function addCalibrationTail(map) {
roadLineGeo = data.roadLineGeo; roadLineGeo = data.roadLineGeo;
roadChunkPointGeo = data.roadChunkPointGeo roadChunkPointGeo = data.roadChunkPointGeo
map.addSource("calibrationTail", { map.addSource("calibrationTail", {
type: "geojson", type: "geojson", data: roadLineGeo,
data: roadLineGeo,
}); });
map.addSource("chunkPointGeo", { map.addSource("chunkPointGeo", {
type: "geojson", type: "geojson", data: roadChunkPointGeo,
data: roadChunkPointGeo,
}); });
resolve(); resolve();
}); });
...@@ -1393,12 +1019,8 @@ export function addCalibrationTail(map) { ...@@ -1393,12 +1019,8 @@ export function addCalibrationTail(map) {
// 线条 // 线条
if (!map.getLayer("calibrationTailLine")) { if (!map.getLayer("calibrationTailLine")) {
map.addLayer({ map.addLayer({
id: "calibrationTailLine", id: "calibrationTailLine", type: "line", source: "calibrationTail", paint: {
type: "line", "line-color": "yellow", "line-width": 1,
source: "calibrationTail",
paint: {
"line-color": "yellow",
"line-width": 1,
}, },
}); });
if (map.getLayer("vehicle3D")) { if (map.getLayer("vehicle3D")) {
...@@ -1408,10 +1030,7 @@ export function addCalibrationTail(map) { ...@@ -1408,10 +1030,7 @@ export function addCalibrationTail(map) {
// symbol标记 // symbol标记
if (!map.getLayer("chunkSymbol")) { if (!map.getLayer("chunkSymbol")) {
map.addLayer({ map.addLayer({
id: "chunkSymbol", id: "chunkSymbol", type: "symbol", source: "chunkPointGeo", layout: {
type: "symbol",
source: "chunkPointGeo",
layout: {
"text-allow-overlap": true, "text-allow-overlap": true,
"text-ignore-placement": true, "text-ignore-placement": true,
"text-field": "|", // 刻度线的文本标记，可以用符号代替 "text-field": "|", // 刻度线的文本标记，可以用符号代替
...@@ -1419,8 +1038,7 @@ export function addCalibrationTail(map) { ...@@ -1419,8 +1038,7 @@ export function addCalibrationTail(map) {
"text-pitch-alignment": "map", "text-pitch-alignment": "map",
"text-rotate": ["-", ["get", "angle"], 90], "text-rotate": ["-", ["get", "angle"], 90],
"text-rotation-alignment": "map", "text-rotation-alignment": "map",
}, }, paint: {
paint: {
"text-color": "yellow", "text-color": "yellow",
}, },
}); });
...@@ -1432,26 +1050,19 @@ export function addCalibrationTail(map) { ...@@ -1432,26 +1050,19 @@ export function addCalibrationTail(map) {
if (!map.getLayer("chunkText")) { if (!map.getLayer("chunkText")) {
// 添加刻度点编号图层 // 添加刻度点编号图层
map.addLayer({ map.addLayer({
id: "chunkText", id: "chunkText", type: "symbol", source: "chunkPointGeo", layout: {
type: "symbol",
source: "chunkPointGeo",
layout: {
"text-allow-overlap": true, "text-allow-overlap": true,
"text-ignore-placement": true, "text-ignore-placement": true,
"text-field": ["get", "index"], "text-field": ["get", "index"],
"text-size": 10, "text-size": 10, // 'text-offset': [0, 2], // 调整文本位置
// 'text-offset': [0, 2], // 调整文本位置
"text-offset": [-2, 0], // 调整文本位置 "text-offset": [-2, 0], // 调整文本位置
"text-pitch-alignment": "map", "text-pitch-alignment": "map",
"text-rotate": ["-", ["get", "angle"], 0], "text-rotate": ["-", ["get", "angle"], 0],
"text-rotation-alignment": "map", "text-rotation-alignment": "map",
}, }, paint: {
paint: { "text-color": "yellow", "text-halo-color": "black", "text-halo-width": 2,
"text-color": "yellow",
"text-halo-color": "black",
"text-halo-width": 2,
}, },
}); });
if (map.getLayer("vehicle3D")) { if (map.getLayer("vehicle3D")) {
...@@ -1463,17 +1074,14 @@ export function addCalibrationTail(map) { ...@@ -1463,17 +1074,14 @@ export function addCalibrationTail(map) {
const size = 1000; const size = 1000;
export const vehicleWave = { export const vehicleWave = {
width: size, width: size, height: size, data: new Uint8Array(size * size * 4), // 用来存储图像数据
height: size,
data: new Uint8Array(size * size * 4), // 用来存储图像数据
onAdd: function () { onAdd: function () {
// 创建一个canvas对象并初始化 // 创建一个canvas对象并初始化
const canvas = document.createElement("canvas"); const canvas = document.createElement("canvas");
canvas.width = this.width; canvas.width = this.width;
canvas.height = this.height; canvas.height = this.height;
this.context = canvas.getContext("2d"); this.context = canvas.getContext("2d");
}, }, // render 不断调用更新canvas对象的半径与fillStyle 以实现波纹效果
// render 不断调用更新canvas对象的半径与fillStyle 以实现波纹效果
render: function () { render: function () {
const duration = 1000; // 动画周期 const duration = 1000; // 动画周期
const t = (performance.now() % duration) / duration; // 当前帧相对于动画周期的时间比例 const t = (performance.now() % duration) / duration; // 当前帧相对于动画周期的时间比例
...@@ -1511,7 +1119,7 @@ export function wgs84togcj02([lng, lat]) { ...@@ -1511,7 +1119,7 @@ export function wgs84togcj02([lng, lat]) {
return [mglng, mglat] return [mglng, mglat]
} }
function transformlat(lng, lat) { export function transformlat(lng, lat) {
var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng)) var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng))
ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0 ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0
ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0 ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0
...@@ -1519,7 +1127,7 @@ function transformlat(lng, lat) { ...@@ -1519,7 +1127,7 @@ function transformlat(lng, lat) {
return ret return ret
} }
function transformlng(lng, lat) { export function transformlng(lng, lat) {
var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng)) var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng))
ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0 ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0
ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0 ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0
......
wj-manage-web/src/views/situation/index.vue
View file @ fa67efed
...@@ -305,7 +305,7 @@ export default { ...@@ -305,7 +305,7 @@ export default {
offset: [0, 0], offset: [0, 0],
}); });
popup popup
.setLngLat([item.lng, item.lat]) .setLngLat(wgs84togcj02([item.lng, item.lat]))
.setHTML('<div id="alarm_popup"></div>') .setHTML('<div id="alarm_popup"></div>')
.addTo(map) .addTo(map)
.addClassName("alarmPopup"); .addClassName("alarmPopup");
...@@ -781,7 +781,7 @@ export default { ...@@ -781,7 +781,7 @@ export default {
offset: [0, -30], offset: [0, -30],
}); });
eventPopup eventPopup
.setLngLat([data.lng, data.lat]) .setLngLat(wgs84togcj02(data.lng, data.lat))
.setHTML('<div id="event_popup"></div>') .setHTML('<div id="event_popup"></div>')
.addTo(map) .addTo(map)
.addClassName("eventPopup"); .addClassName("eventPopup");
...@@ -1028,7 +1028,7 @@ export default { ...@@ -1028,7 +1028,7 @@ export default {
offset: [0, -20], offset: [0, -20],
}); });
vehiclePopups[`popup${data.id}`] vehiclePopups[`popup${data.id}`]
.setLngLat([data.longitude, data.latitude]) .setLngLat(wgs84togcj02(data.longitude, data.latitude))
.setHTML(`<div id="vehicle_popup${data.id}"></div>`) .setHTML(`<div id="vehicle_popup${data.id}"></div>`)
.addTo(map) .addTo(map)
.addClassName("vehicleDetailPopup"); .addClassName("vehicleDetailPopup");
...@@ -1063,6 +1063,10 @@ export default { ...@@ -1063,6 +1063,10 @@ export default {
} }
// 筛选可见区域 // 筛选可见区域
for (let i = 0; i < msg.length; i++) { for (let i = 0; i < msg.length; i++) {
// 坐标转换
let trans = wgs84togcj02([msg[i].longitude,msg[i].latitude])
msg[i].longitude = trans[0]
msg[i].latitude = trans[1]
// todo // todo
// if (!this.showHisVid) msg[i].overRun = null // if (!this.showHisVid) msg[i].overRun = null
// 缺失车牌号字段和非机动车类型 把车牌号字段置空 // 缺失车牌号字段和非机动车类型 把车牌号字段置空
......
wj-manage-web/src/views/situation/trackSwitcher.vue
View file @ fa67efed
...@@ -186,6 +186,7 @@ protobuf.load("../wj-manage-web/RealtimeCarInfo.proto", (event, root) => { ...@@ -186,6 +186,7 @@ protobuf.load("../wj-manage-web/RealtimeCarInfo.proto", (event, root) => {
import { allTrack } from "../../dao/historyTrack"; import { allTrack } from "../../dao/historyTrack";
import { equip_camera } from "../../dao/situation"; import { equip_camera } from "../../dao/situation";
import LoopVideo from "../../components/Standard/loopVideo.vue"; import LoopVideo from "../../components/Standard/loopVideo.vue";
import {wgs84togcj02} from "../../utils/mapboxTools";
export default { export default {
name: "trackSwitcher", name: "trackSwitcher",
components: { LoopVideo }, components: { LoopVideo },
...@@ -769,7 +770,7 @@ export default { ...@@ -769,7 +770,7 @@ export default {
...data, ...data,
}; };
} else { } else {
vehiclePopups[`popup${data.id}`] = new mapboxgl.Popup({ vehiclePopups[`popup${data.id}`] = new minemap.Popup({
closeButton: true, closeButton: true,
anchor: "bottom", anchor: "bottom",
}); });
...@@ -779,7 +780,7 @@ export default { ...@@ -779,7 +780,7 @@ export default {
delete vehiclePopups[`popup${data.id}`]; delete vehiclePopups[`popup${data.id}`];
}); });
vehiclePopups[`popup${data.id}`] vehiclePopups[`popup${data.id}`]
.setLngLat([data.longitude, data.latitude]) .setLngLat(wgs84togcj02([data.longitude, data.latitude]))
.setHTML(`<div id="vehicle_popup${data.id}"></div>`) .setHTML(`<div id="vehicle_popup${data.id}"></div>`)
.addTo(window.map) .addTo(window.map)
.addClassName("vehicleDetailPopup"); .addClassName("vehicleDetailPopup");
......
wj-manage-web/vue.config.js
View file @ fa67efed
...@@ -7,7 +7,8 @@ const proxy = { ...@@ -7,7 +7,8 @@ const proxy = {
'/sso|/design|/develop|/group1|/holo|/web|/opt': { '/sso|/design|/develop|/group1|/holo|/web|/opt': {
// target: 'http://10.102.1.182:9000', // target: 'http://10.102.1.182:9000',
// target: 'http://10.102.1.181:9000', // target: 'http://10.102.1.181:9000',
target: 'http://106.120.201.126:14724', // target: 'http://106.120.201.126:14724', // 182外网
target: 'http://37.12.182.29:9000', // 济南
}, },
'/nvr': { '/nvr': {
target: 'http://10.100.1.154:19830', // 回放视频 target: 'http://10.100.1.154:19830', // 回放视频
......
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