Skip to content

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

mapbox初步迁移mine map

parent 013daa15
Expand all Show whitespace changes
Inline Side-by-side
Showing with 574 additions and 355 deletions
wj-manage-web/public/index.html
View file @ 1a93e18f
...@@ -22,6 +22,23 @@ ...@@ -22,6 +22,23 @@
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">
<script src="//119.163.106.187:11080/minemapapi/v2.1.0/minemap.js"></script>
<script>
/**
* 全局参数设置
*/
minemap.domainUrl = '//119.163.106.187:11080';
minemap.dataDomainUrl = '//119.163.106.187:11080';
minemap.serverDomainUrl = '//119.163.106.187:11080';
minemap.spriteUrl = '//119.163.106.187:11080/minemapapi/v2.1.0/sprite/sprite';
minemap.serviceUrl = '//119.163.106.187:11080/service/';
/**
* key、solution设置
*/
minemap.key = 'fe874f67b89d4c0dab56780f8423324c';
minemap.solution = 12612;
</script>
<style> <style>
#app, #app,
html, html,
...@@ -87,7 +104,8 @@ ...@@ -87,7 +104,8 @@
max-width: unset !important; max-width: unset !important;
} }
.mapboxgl-popup-content { .minemap-popup-content {
overflow: unset !important;
background: transparent !important; background: transparent !important;
box-shadow: none !important; box-shadow: none !important;
padding: 0 !important; padding: 0 !important;
...@@ -97,31 +115,31 @@ ...@@ -97,31 +115,31 @@
display: none !important; display: none !important;
} }
.mapboxgl-popup-tip { .minemap-popup-tip {
display: none !important; display: none !important;
} }
.mapboxgl-popup-close-button { .minemap-popup-close-button {
font-size: 26px; font-size: 26px;
color: white; color: white;
} }
.vehicleDetailPopup .mapboxgl-popup-close-button { .vehicleDetailPopup .minemap-popup-close-button {
right: 14px; right: 14px;
top: 18px; top: 18px;
} }
.eventPopup .mapboxgl-popup-close-button { .eventPopup .minemap-popup-close-button {
right: 8px; right: 8px;
top: 10px; top: 10px;
} }
.equipmentPopup .mapboxgl-popup-close-button { .equipmentPopup .minemap-popup-close-button {
right: 8px; right: 8px;
top: 10px; top: 10px;
} }
.mapboxgl-ctrl-logo { .minemap-ctrl-logo {
display: none !important; display: none !important;
} }
......
wj-manage-web/src/components/Standard/cameraVideo.vue
View file @ 1a93e18f
...@@ -137,6 +137,7 @@ export default { ...@@ -137,6 +137,7 @@ export default {
</script> </script>
<style> <style>
video { video {
object-fit: fill;
width: 100% !important; width: 100% !important;
height: 100% !important; height: 100% !important;
} }
......
wj-manage-web/src/components/Standard/mapMapbox.vue
View file @ 1a93e18f
...@@ -5,6 +5,8 @@ ...@@ -5,6 +5,8 @@
</template> </template>
<script> <script>
import {initWMap} from "@/utils/mapUtils";
let map; let map;
// Point MultiPoint LineString MultiLineString Polygon MultiPolygon // Point MultiPoint LineString MultiLineString Polygon MultiPolygon
export default { export default {
...@@ -26,19 +28,19 @@ export default { ...@@ -26,19 +28,19 @@ export default {
if(this.$store.state.mapInit.zoom){ if(this.$store.state.mapInit.zoom){
zoom = this.$store.state.mapInit.zoom zoom = this.$store.state.mapInit.zoom
} }
let options = Object.assign( // let options = Object.assign(
{}, // {},
{ // {
container: this.mapId, // container: this.mapId,
style: map_config.MAP_STYLE, // style: map_config.MAP_STYLE,
center: center, // center: center,
zoom: zoom, // zoom: zoom,
maxZoom: map_config.MAX_ZOOM, // maxZoom: map_config.MAX_ZOOM,
pitch: map_config.MAP_PITCH, // pitch: map_config.MAP_PITCH,
}, // },
option // option
); // );
map = new mapboxgl.Map(options); map = initWMap(this.mapId, center, zoom);
return map; return map;
}, },
destroyMap() { destroyMap() {
......
wj-manage-web/src/utils/mapUtils.js 0 → 100644
View file @ 1a93e18f
const PI = Math.PI
const a = 6378245.0
const ee = 0.00669342162296594323
export function initWMap(id,center,zoom) {
let map = new minemap.Map({
container: id,
// style: '//119.163.106.187:11080/service/solu/style/id/12612', /*白色底图样式*/
style: '//119.163.106.187:11080/service/solu/style/id/12620', /*蓝色底图样式*/
center: center || map_config.MAP_CENTER,
zoom: zoom || map_config.MAP_ZOOM,
pitch: map_config.MAP_PITCH,
// maxZoom: map_config.MAX_ZOOM, /*地图最大缩放等级*/
maxZoom: 17.8, /*地图最大缩放等级*/
minZoom: 3, /*地图最小缩放等级*/
projection: 'MERCATOR'
});
return map
}
export function mDrawLine(id, jsonData, item) {
let res = []
for (let a1 of jsonData) {
res.push(wgs84togcj02(a1[0], a1[1]))
}
let geo = turf.lineString(res, item)
!window.wmap.getSource(id) && window.wmap.addSource(id, {
"type": "geojson",
"data": geo
});
!window.wmap.getLayer(id) && window.wmap.addLayer({
"id": id,
"type": "line",
"source": id,
"layout": {
"line-join": "round",
"line-cap": "round",
// "border-visibility":"visible" //是否开启线边框
},
"paint": {
"line-width": 2,
"line-color": '#389fff',
'line-dasharray': [1, 4],
// {
// "type": "categorical",
// "property": "kind",
// "stops": [[1, "#ff0000"], [2, "#00ff00"]],
// "default": "#ff0000"
// },
"line-border-width": 0, //设置线边框宽度
"line-border-opacity": 1, //设置线边框透明度
"line-border-color": 'blue' //设置线边框颜色
},
// "minzoom": 7,
// "maxzoom": 17.5
});
}
export function mDrawPolygon(id, jsonData, item, callback) {
let res = [[]]
for (let a2 of jsonData) {
for (let a1 of a2) {
res[0].push(wgs84togcj02(a1[0], a1[1]))
}
}
let geo = turf.polygon(res, item)
!window.wmap.getSource(id) && window.wmap.addSource(id, {
"type": "geojson",
"data": geo
});
!window.wmap.getLayer(id) && window.wmap.addLayer({
"id": id,
"type": "fill",
"source": id,
"layout": {
"visibility": "visible",
},
"paint": {
"fill-color": "#12a3cd",
"fill-opacity": 0.3,
"fill-outline-color": "rgba(1,1,1,0)"
},
// "minzoom": 7,
// "maxzoom": 17.5
});
window.wmap.on('click', id, () => {
callback(item)
})
}
// icon-image : mapImage
export function mDrawIconPoint(id, jsonData, callback) {
let features = []
for (let pointItem of jsonData) {
let convertPoint = wgs84togcj02(pointItem.lng, pointItem.lat)
features.push(turf.point(convertPoint, pointItem))
}
let geo = turf.featureCollection(features)
!window.wmap.getSource(id) && window.wmap.addSource(id, {
"type": "geojson",
"data": geo
});
!window.wmap.getLayer(id) && window.wmap.addLayer({
"id": id,
"type": "symbol",
"source": id,
"layout": {
'icon-allow-overlap':true,
'icon-ignore-placement':true,
'icon-offset':[0,-20],
"icon-image": ["get",'mapImage'],
"icon-size": 1,
'symbol-z-order':'viewport-y'
}
});
if(callback){
window.wmap.on('click',id,(abc)=>{
callback(abc)
})
}
}
export function wgs84togcj02(lng, lat) {
var dlat = transformlat(lng - 105.0, lat - 35.0)
var dlng = transformlng(lng - 105.0, lat - 35.0)
var radlat = lat / 180.0 * PI
var magic = Math.sin(radlat)
magic = 1 - ee * magic * magic
var sqrtmagic = Math.sqrt(magic)
dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI)
dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI)
const mglat = lat + dlat
const mglng = lng + dlng
return [mglng, mglat]
}
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))
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 += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0
return ret
}
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))
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 += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0
return ret
}
\ No newline at end of file
wj-manage-web/src/utils/mapboxTools.js
View file @ 1a93e18f
// Function to create a triangle icon (arrow) // Function to create a triangle icon (arrow)
function createTriangleIcon(color) { function createTriangleIcon(color) {
const canvas = document.createElement("canvas"); const canvas = document.createElement("canvas");
...@@ -208,6 +207,7 @@ export function addOrUpdateDetetorA(map, geo) { ...@@ -208,6 +207,7 @@ export function addOrUpdateDetetorA(map, geo) {
); );
} }
} }
export function addOrUpdateDetetorB(map, geo) { export function addOrUpdateDetetorB(map, geo) {
if (!map.getSource("detetorsB")) { if (!map.getSource("detetorsB")) {
map.addSource("detetorsB", { map.addSource("detetorsB", {
...@@ -240,6 +240,7 @@ export function addOrUpdateDetetorB(map, geo) { ...@@ -240,6 +240,7 @@ export function addOrUpdateDetetorB(map, geo) {
); );
} }
} }
export function addOrUpdateDetetorC(map, geo) { export function addOrUpdateDetetorC(map, geo) {
if (!map.getSource("detetorsC")) { if (!map.getSource("detetorsC")) {
map.addSource("detetorsC", { map.addSource("detetorsC", {
...@@ -342,6 +343,7 @@ export function addOrUpdateWave(map, geo) { ...@@ -342,6 +343,7 @@ export function addOrUpdateWave(map, geo) {
} }
} }
export function convertPointsToGeo(arr) { export function convertPointsToGeo(arr) {
let features = [] let features = []
for (let item of arr) { for (let item of arr) {
...@@ -349,6 +351,7 @@ export function convertPointsToGeo(arr) { ...@@ -349,6 +351,7 @@ export function convertPointsToGeo(arr) {
} }
return turf.featureCollection(features) return turf.featureCollection(features)
} }
export function convertPointsLocationToGeo(arr) { export function convertPointsLocationToGeo(arr) {
let features = [] let features = []
for (let item of arr) { for (let item of arr) {
...@@ -356,13 +359,15 @@ export function convertPointsLocationToGeo(arr) { ...@@ -356,13 +359,15 @@ export function convertPointsLocationToGeo(arr) {
} }
return turf.featureCollection(features) return turf.featureCollection(features)
} }
export function convertPointsLngLatToGeo(arr) { export function convertPointsLngLatToGeo(arr) {
let features = [] let features = []
for (let item of arr) { for (let item of arr) {
features.push(turf.point([item.lng, item.lat], item)) features.push(turf.point(wgs84togcj02([item.lng, item.lat]), item))
} }
return turf.featureCollection(features) return turf.featureCollection(features)
} }
export function convertPointsWktToGeo(arr) { export function convertPointsWktToGeo(arr) {
let features = []; let features = [];
for (let item of arr) { for (let item of arr) {
...@@ -370,28 +375,30 @@ export function convertPointsWktToGeo(arr) { ...@@ -370,28 +375,30 @@ export function convertPointsWktToGeo(arr) {
if (item.wkt.split(",").length === 2) { if (item.wkt.split(",").length === 2) {
features.push( features.push(
turf.point( turf.point(
item.wkt.split(",").map((item) => Number(item)), wgs84togcj02(item.wkt.split(",").map((item) => Number(item))),
item item
) )
); );
} }
} }
} }
return turf.featureCollection(features); return turf.featureCollection(features)
} }
export function convertToLineWithWkt(json) { 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 = item.wkt.split(";"); let lnglats = wgs84togcj02(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] = lnglats[i].split(",").map((j) => Number(j));
} }
features.push(turf.lineString(lnglats, item)); features.push(turf.lineString(lnglats, item));
} }
} }
return turf.featureCollection(features); return turf.featureCollection(features)
} }
// type 4 种颜色 对应 4种告警信息 // type 4 种颜色 对应 4种告警信息
export function addOrUpdateWarningWave(map, arr, id) { export function addOrUpdateWarningWave(map, arr, id) {
let geo = convertPointsToGeo(arr) let geo = convertPointsToGeo(arr)
...@@ -460,7 +467,7 @@ export function addOrUpdateVehicle(map, arr) { ...@@ -460,7 +467,7 @@ export function addOrUpdateVehicle(map, arr) {
// 路口icon // 路口icon
export function addOrUpdateCross(map, geo, callback) { export function addOrUpdateCross(map, geo, callback) {
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",
...@@ -693,6 +700,7 @@ export function addOrUpdateEquipMilli(map, geo, callback) { ...@@ -693,6 +700,7 @@ export function addOrUpdateEquipMilli(map, geo, callback) {
'milli', 'milli',
"milliFalse", "milliFalse",
], // 默认值，如果没有匹配到上述枚举值] ], // 默认值，如果没有匹配到上述枚举值]
'icon-offset':[0,-20],
// "icon-image": "milli", // "icon-image": "milli",
"icon-size": 0.6, "icon-size": 0.6,
"icon-ignore-placement": true, "icon-ignore-placement": true,
...@@ -717,6 +725,7 @@ export function addOrUpdateEquipRadar(map, geo, callback) { ...@@ -717,6 +725,7 @@ export function addOrUpdateEquipRadar(map, geo, callback) {
type: "symbol", type: "symbol",
source: "radar", source: "radar",
layout: { layout: {
'icon-offset':[0,-20],
"icon-image": [ "icon-image": [
"match", "match",
["get", "status"], // 属性字段名称 ["get", "status"], // 属性字段名称
...@@ -750,6 +759,7 @@ export function addOrUpdateEquipSignal(map, geo, callback) { ...@@ -750,6 +759,7 @@ export function addOrUpdateEquipSignal(map, geo, callback) {
type: "symbol", type: "symbol",
source: "signal", source: "signal",
layout: { layout: {
'icon-offset':[0,-20],
// "icon-image": "signal", // "icon-image": "signal",
"icon-image": [ "icon-image": [
"match", "match",
...@@ -783,6 +793,7 @@ export function addOrUpdateEquipWeather(map, geo, callback) { ...@@ -783,6 +793,7 @@ export function addOrUpdateEquipWeather(map, geo, callback) {
type: "symbol", type: "symbol",
source: "weather", source: "weather",
layout: { layout: {
'icon-offset':[0,-20],
// "icon-image": "weather", // "icon-image": "weather",
"icon-image": [ "icon-image": [
"match", "match",
...@@ -1048,14 +1059,14 @@ export function addOrUpdateFlowLineRText(map, geo) { ...@@ -1048,14 +1059,14 @@ export function addOrUpdateFlowLineRText(map, geo) {
} }
// 分析报告 - 流量线箭头 // 分析报告 - 流量线箭头
export function addOrUpdateFlowLineRArrow(map, points) { export function addOrUpdateFlowLineRArrow(map, geo) {
if (!map.getSource("flowLineArrowR")) { if (!map.getSource("flowLineArrowR")) {
map.addSource('flowLineArrowR', { map.addSource('flowLineArrowR', {
type: 'geojson', type: 'geojson',
data: points data: geo
}); });
} else { } else {
map.getSource("flowLineArrowR").setData(points); map.getSource("flowLineArrowR").setData(geo);
} }
if (!map.getLayer("flowLineArrowR")) { if (!map.getLayer("flowLineArrowR")) {
// console.log('has.............'); // console.log('has.............');
...@@ -1120,7 +1131,7 @@ export function addOrUpdateFlowLineArrow(map, json) { ...@@ -1120,7 +1131,7 @@ export function addOrUpdateFlowLineArrow(map, json) {
turf.point(item.lineArray[1]) turf.point(item.lineArray[1])
); );
features.push( features.push(
turf.point([item.endLng, item.endLat], { ...item, angle: angle }) turf.point(wgs84togcj02([item.endLng, item.endLat]), {...item, angle: angle})
); );
} }
} }
...@@ -1158,7 +1169,7 @@ export function addOrUpdateFlowText(map, json) { ...@@ -1158,7 +1169,7 @@ export function addOrUpdateFlowText(map, json) {
let features = []; let features = [];
for (let item of json) { for (let item of json) {
if (item.select) { if (item.select) {
features.push(turf.point([item.startLng, item.startLat], item)); features.push(turf.point(wgs84togcj02([item.startLng, item.startLat]), item));
} }
} }
let geo = turf.featureCollection(features); let geo = turf.featureCollection(features);
...@@ -1195,7 +1206,7 @@ export function addOrUpdateFlowTextEnd(map, json) { ...@@ -1195,7 +1206,7 @@ export function addOrUpdateFlowTextEnd(map, json) {
let features = []; let features = [];
for (let item of json) { for (let item of json) {
if (item.select) { if (item.select) {
features.push(turf.point([item.endLng, item.endLat], item)); features.push(turf.point(wgs84togcj02([item.endLng, item.endLat]), item));
} }
} }
let geo = turf.featureCollection(features); let geo = turf.featureCollection(features);
...@@ -1226,6 +1237,7 @@ export function addOrUpdateFlowTextEnd(map, json) { ...@@ -1226,6 +1237,7 @@ export function addOrUpdateFlowTextEnd(map, json) {
}); });
} }
} }
// let roadLineGeo = null, roadChunkPointGeo = null // let roadLineGeo = null, roadChunkPointGeo = null
// export function addCalibrationTail(map) { // export function addCalibrationTail(map) {
// // 计算1米在当前地图的经度度数 // // 计算1米在当前地图的经度度数
...@@ -1359,7 +1371,7 @@ export function addCalibrationTail(map) { ...@@ -1359,7 +1371,7 @@ export function addCalibrationTail(map) {
res.json().then((data) => { res.json().then((data) => {
console.log("data...", data); console.log("data...", data);
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,
...@@ -1478,3 +1490,39 @@ export const vehicleWave = { ...@@ -1478,3 +1490,39 @@ export const vehicleWave = {
return true; return true;
}, },
}; };
const PI = Math.PI
const a = 6378245.0
const ee = 0.00669342162296594323
export function wgs84togcj02([lng, lat]) {
lng = Number(lng)
lat = Number(lat)
var dlat = transformlat(lng - 105.0, lat - 35.0)
var dlng = transformlng(lng - 105.0, lat - 35.0)
var radlat = lat / 180.0 * PI
var magic = Math.sin(radlat)
magic = 1 - ee * magic * magic
var sqrtmagic = Math.sqrt(magic)
dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI)
dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI)
const mglat = lat + Number(dlat)
const mglng = lng + Number(dlng)
return [mglng, mglat]
}
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))
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 += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0
return ret
}
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))
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 += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0
return ret
}
wj-manage-web/src/views/analysis/reportCross.vue
View file @ 1a93e18f
...@@ -179,7 +179,7 @@ import Pigination from "../../components/Standard/pigination.vue"; ...@@ -179,7 +179,7 @@ import Pigination from "../../components/Standard/pigination.vue";
import Reports from "./historyReports/index.vue"; import Reports from "./historyReports/index.vue";
import { import {
addOrUpdateCross, addOrUpdateCross,
addOrUpdateCrossName, addOrUpdateCrossName, wgs84togcj02,
} from "../../utils/mapboxTools"; } from "../../utils/mapboxTools";
import { generateReport } from "../../dao/analysis"; import { generateReport } from "../../dao/analysis";
...@@ -191,7 +191,6 @@ export default { ...@@ -191,7 +191,6 @@ export default {
Pigination, Pigination,
Reports, Reports,
}, },
computed: {},
data() { data() {
return { return {
formOptions: "", formOptions: "",
...@@ -468,7 +467,7 @@ export default { ...@@ -468,7 +467,7 @@ export default {
for (let item of this.$store.state.dicts.CrossInfo) { for (let item of this.$store.state.dicts.CrossInfo) {
points.push( points.push(
turf.point( turf.point(
[item.location.split(",")[0], item.location.split(",")[1]], wgs84togcj02(item.location.split(",")),
item item
) )
); );
...@@ -483,7 +482,7 @@ export default { ...@@ -483,7 +482,7 @@ export default {
}, },
crossClick(e) { crossClick(e) {
let prop = e.features[0]?.properties; let prop = e.features[0]?.properties;
map.flyTo({ center: prop.location.split(","), zoom: 19 }); map.flyTo({ center: wgs84togcj02(prop.location.split(",")), zoom: 17.8 });
}, },
}, },
beforeDestroy() { beforeDestroy() {
......
wj-manage-web/src/views/efficiency/leftMap.vue
View file @ 1a93e18f
...@@ -72,7 +72,7 @@ ...@@ -72,7 +72,7 @@
</el-table> </el-table>
</div> </div>
<div class="left_map"> <div class="left_map">
<w-map ref="mapC" mapId="efficiency_map" /> <w-map ref="mapC" mapId="efficiency_map"/>
</div> </div>
</div> </div>
</msg-card> </msg-card>
...@@ -80,19 +80,20 @@ ...@@ -80,19 +80,20 @@
</template> </template>
<script> <script>
import { getEfficiencyRank } from "../../dao/efficiency"; import {getEfficiencyRank} from "../../dao/efficiency";
import MsgCard from "../../components/Standard/msg-card.vue"; import MsgCard from "../../components/Standard/msg-card.vue";
import WMap from "../../components/Standard/mapMapbox.vue"; import WMap from "../../components/Standard/mapMapbox.vue";
import mapAssets from "../../config/holo/mapAssets"; import mapAssets from "../../config/holo/mapAssets";
import { import {
addOrUpdateCross, addOrUpdateCross,
addOrUpdateCrossName, addOrUpdateCrossName,
wgs84togcj02
} from "../../utils/mapboxTools"; } from "../../utils/mapboxTools";
let map; let map;
export default { export default {
name: "leftMap", name: "leftMap",
components: { WMap, MsgCard }, components: {WMap, MsgCard},
props: { props: {
granularity: { granularity: {
type: String, type: String,
...@@ -126,7 +127,6 @@ export default { ...@@ -126,7 +127,6 @@ export default {
for (let key in mapAssets.mapIcons) { for (let key in mapAssets.mapIcons) {
map.loadImage(mapAssets.mapIcons[key], (error, image) => { map.loadImage(mapAssets.mapIcons[key], (error, image) => {
if (!map.hasImage(key)) map.addImage(key, image); if (!map.hasImage(key)) map.addImage(key, image);
}); });
} }
map.setPitch(0); map.setPitch(0);
...@@ -163,7 +163,7 @@ export default { ...@@ -163,7 +163,7 @@ export default {
this.drawCrossPoint(); this.drawCrossPoint();
if (this.tableFullData.length) { if (this.tableFullData.length) {
map.flyTo({ map.flyTo({
center: this.tableFullData[0].location.split(","), center: wgs84togcj02(this.tableFullData[0].location.split(",")),
zoom: 15, zoom: 15,
}); });
this.$emit("crossChange", this.tableFullData[0]); this.$emit("crossChange", this.tableFullData[0]);
...@@ -174,14 +174,14 @@ export default { ...@@ -174,14 +174,14 @@ export default {
drawCrossPoint() { drawCrossPoint() {
let geos = this.tableFullData; let geos = this.tableFullData;
if (geos.length) { if (geos.length) {
map.setCenter(geos[0].location.split(",")); map.setCenter(wgs84togcj02(geos[0].location.split(",")));
} }
for (let i = 0; i < geos.length; i++) { for (let i = 0; i < geos.length; i++) {
geos[i].isSignal = i ? 1 : "select"; geos[i].isSignal = i ? 1 : "select";
} }
let features = []; let features = [];
for (let cross of geos) { for (let cross of geos) {
features.push(turf.point(cross.location.split(","), cross)); features.push(turf.point(wgs84togcj02(cross.location.split(",")), cross));
} }
let geo = turf.featureCollection(features); let geo = turf.featureCollection(features);
addOrUpdateCross(map, geo, this.crossClick); addOrUpdateCross(map, geo, this.crossClick);
...@@ -221,7 +221,7 @@ export default { ...@@ -221,7 +221,7 @@ export default {
let prop = e.features[0].properties; let prop = e.features[0].properties;
this.lastCheck = prop; this.lastCheck = prop;
this.updateLayer(prop); this.updateLayer(prop);
map.flyTo({ center: prop.location.split(",") }); map.flyTo({center: prop.location.split(",")});
this.$emit("crossChange", prop); this.$emit("crossChange", prop);
}, },
rowClick(row) { rowClick(row) {
...@@ -249,7 +249,8 @@ export default { ...@@ -249,7 +249,8 @@ export default {
}, },
}, },
beforeDestroy() {}, beforeDestroy() {
},
}; };
</script> </script>
...@@ -258,9 +259,11 @@ export default { ...@@ -258,9 +259,11 @@ export default {
.leftMapEf { .leftMapEf {
height: 100%; height: 100%;
::v-deep .content { ::v-deep .content {
margin: 20px 0; margin: 20px 0;
} }
.msg_card_inner { .msg_card_inner {
height: 100%; height: 100%;
display: flex; display: flex;
...@@ -284,6 +287,7 @@ export default { ...@@ -284,6 +287,7 @@ export default {
border: 1px solid #193259; border: 1px solid #193259;
} }
} }
::v-deep .el-input-group__prepend { ::v-deep .el-input-group__prepend {
background-color: transparent; background-color: transparent;
border: 1px solid rgba(25, 58, 110, 1); border: 1px solid rgba(25, 58, 110, 1);
...@@ -297,30 +301,37 @@ export default { ...@@ -297,30 +301,37 @@ export default {
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
} }
::v-deep .el-checkbox__inner { ::v-deep .el-checkbox__inner {
background-color: transparent; background-color: transparent;
border: 1px solid gray; border: 1px solid gray;
} }
::v-deep .row-deep-select { ::v-deep .row-deep-select {
td:first-child { td:first-child {
border-left: 1px solid rgba(31, 147, 255, 1); border-left: 1px solid rgba(31, 147, 255, 1);
} }
td:last-child { td:last-child {
border-right: 1px solid rgba(31, 147, 255, 1); border-right: 1px solid rgba(31, 147, 255, 1);
} }
td { td {
background-color: #030d1e; background-color: #030d1e;
border-top: 1px solid rgba(31, 147, 255, 1); border-top: 1px solid rgba(31, 147, 255, 1);
border-bottom: 1px solid rgba(31, 147, 255, 1); border-bottom: 1px solid rgba(31, 147, 255, 1);
} }
} }
::v-deep .row-not-select { ::v-deep .row-not-select {
td:first-child { td:first-child {
border-left: 1px solid rgba(31, 147, 255, 1); border-left: 1px solid rgba(31, 147, 255, 1);
} }
td:last-child { td:last-child {
border-right: 1px solid rgba(31, 147, 255, 1); border-right: 1px solid rgba(31, 147, 255, 1);
} }
td { td {
background-color: #061124; background-color: #061124;
border-top: 1px solid rgba(31, 147, 255, 1); border-top: 1px solid rgba(31, 147, 255, 1);
......
wj-manage-web/src/views/organization/index.vue
View file @ 1a93e18f
...@@ -215,6 +215,7 @@ import { ...@@ -215,6 +215,7 @@ import {
inletWayTimeBetw, inletWayTimeBetw,
inletWayTurnTimeBetw, inletWayTurnTimeBetw,
} from "../../dao/situation"; } from "../../dao/situation";
import {wgs84togcj02} from "../../utils/mapboxTools";
let bottomMap; let bottomMap;
export default { export default {
components: { components: {
...@@ -380,7 +381,7 @@ export default { ...@@ -380,7 +381,7 @@ export default {
}); });
bottomMap.flyTo({ bottomMap.flyTo({
center: row.location.split(","), center: wgs84togcj02(row.location.split(",")),
maxDuration: 1000, maxDuration: 1000,
zoom: 17.2, zoom: 17.2,
pitch: 0, pitch: 0,
...@@ -448,11 +449,6 @@ export default { ...@@ -448,11 +449,6 @@ export default {
JSON.stringify(item.properties.ridList) === JSON.stringify(item.properties.ridList) ===
JSON.stringify(prop.ridList) JSON.stringify(prop.ridList)
) { ) {
console.log(
"dengyu ===",
JSON.stringify(item.properties.ridList),
JSON.stringify(prop.ridList)
);
item.properties.select = 1; item.properties.select = 1;
let timeParam = this.getStartAndEndDate(); let timeParam = this.getStartAndEndDate();
let queue = []; let queue = [];
......
wj-manage-web/src/views/organization/leftMap.vue
View file @ 1a93e18f
...@@ -63,7 +63,7 @@ import { orgRank } from "../../dao/organization"; ...@@ -63,7 +63,7 @@ import { orgRank } from "../../dao/organization";
import mapAssets from "../../config/holo/mapAssets"; import mapAssets from "../../config/holo/mapAssets";
import { import {
addOrUpdateCross, addOrUpdateCross,
addOrUpdateCrossName, addOrUpdateCrossName, wgs84togcj02,
} from "../../utils/mapboxTools"; } from "../../utils/mapboxTools";
let map; let map;
...@@ -100,20 +100,11 @@ export default { ...@@ -100,20 +100,11 @@ export default {
} }
this.fullData = res.content; this.fullData = res.content;
this.tableData = this.fullData; this.tableData = this.fullData;
// this.tableData = [
// {rank:'1'},
// {rank:'1'},
// {rank:'1'},
// {rank:'1'},
// {rank:'1'},
// {rank:'1'},
// {rank:'1'},
// ]
this.tableLoading = false; this.tableLoading = false;
// 选中第一条数据， 并请求右侧所有指标 // 选中第一条数据， 并请求右侧所有指标
let features = []; let features = [];
for (let cross of this.fullData) { for (let cross of this.fullData) {
features.push(turf.point(cross.location.split(","), cross)); features.push(turf.point(wgs84togcj02(cross.location.split(",")), cross));
} }
let geo = turf.featureCollection(features); let geo = turf.featureCollection(features);
addOrUpdateCross(map, geo, this.crossClick); addOrUpdateCross(map, geo, this.crossClick);
...@@ -121,7 +112,7 @@ export default { ...@@ -121,7 +112,7 @@ export default {
if (res.content.length) { if (res.content.length) {
this.$emit("crossChange", res.content[0]); this.$emit("crossChange", res.content[0]);
map.flyTo({ map.flyTo({
center: res.content[0].location.split(","), center: wgs84togcj02(res.content[0].location.split(",")),
zoom: 15, zoom: 15,
}); });
} }
...@@ -161,14 +152,14 @@ export default { ...@@ -161,14 +152,14 @@ export default {
let prop = e.features[0].properties; let prop = e.features[0].properties;
this.lastCheck = prop; this.lastCheck = prop;
this.updateLayer(prop); this.updateLayer(prop);
map.flyTo({ center: prop.location.split(",") }); map.flyTo({ center: wgs84togcj02(prop.location.split(",")) });
this.$emit("crossChange", prop); this.$emit("crossChange", prop);
}, },
rowClick(row) { rowClick(row) {
this.lastCheck = row; this.lastCheck = row;
this.updateLayer(row); this.updateLayer(row);
map.flyTo({ map.flyTo({
center: row.location.split(","), center: wgs84togcj02(row.location.split(",")),
}); });
this.$emit("crossChange", row); this.$emit("crossChange", row);
}, },
......
wj-manage-web/src/views/organization/mapConflict.vue
View file @ 1a93e18f
...@@ -28,7 +28,7 @@ let map; ...@@ -28,7 +28,7 @@ let map;
const conflictOptions = ["机非", "人非", "机机", "人机"]; const conflictOptions = ["机非", "人非", "机机", "人机"];
import { orgConflict } from "../../dao/organization"; import { orgConflict } from "../../dao/organization";
import wMap from "../../components/Standard/mapMapbox.vue"; import wMap from "../../components/Standard/mapMapbox.vue";
import { addOrUpdateEventHeat } from "../../utils/mapboxTools"; import {addOrUpdateEventHeat, wgs84togcj02} from "../../utils/mapboxTools";
export default { export default {
name: "mapConflict", name: "mapConflict",
components: { components: {
...@@ -89,7 +89,7 @@ export default { ...@@ -89,7 +89,7 @@ export default {
convertPointJsonToGeo(array) { convertPointJsonToGeo(array) {
let features = []; let features = [];
for (let item of array) { for (let item of array) {
features.push(turf.point([item.lng, item.lat], item)); features.push(turf.point([wgs84togcj02(item.lng, item.lat)], item));
} }
return turf.featureCollection(features); return turf.featureCollection(features);
}, },
...@@ -124,7 +124,7 @@ export default { ...@@ -124,7 +124,7 @@ export default {
}, },
refreshMapData() { refreshMapData() {
map.flyTo({ map.flyTo({
center: this.rowData.location.split(","), center: wgs84togcj02(this.rowData.location.split(",")),
maxDuration: 1000, maxDuration: 1000,
zoom: 17.2, zoom: 17.2,
pitch: 0, pitch: 0,
......
wj-manage-web/src/views/organization/mapFlow.vue
View file @ 1a93e18f
...@@ -24,7 +24,7 @@ import { ...@@ -24,7 +24,7 @@ import {
addOrUpdateFlowLineArrow, addOrUpdateFlowLineArrow,
addOrUpdateFlowText, addOrUpdateFlowText,
addOrUpdateFlowTextEnd, addOrUpdateFlowTextEnd,
addOrUpdateRoadPolygon, addOrUpdateRoadPolygon, wgs84togcj02,
} from "../../utils/mapboxTools"; } from "../../utils/mapboxTools";
export default { export default {
name: "mapFlow", name: "mapFlow",
...@@ -63,7 +63,7 @@ export default { ...@@ -63,7 +63,7 @@ export default {
// 画车道面和流量曲线和流量值 // 画车道面和流量曲线和流量值
getCrossPolygon() { getCrossPolygon() {
map.flyTo({ map.flyTo({
center: this.rowData.location.split(","), center: wgs84togcj02(this.rowData.location.split(",")),
maxDuration: 1000, maxDuration: 1000,
zoom: 17.2, zoom: 17.2,
pitch: 0, pitch: 0,
...@@ -116,10 +116,10 @@ export default { ...@@ -116,10 +116,10 @@ export default {
let lnglatArray = lane.arcLine.split(";"); let lnglatArray = lane.arcLine.split(";");
let resultPointArray = []; let resultPointArray = [];
for (let lnglat of lnglatArray) { for (let lnglat of lnglatArray) {
resultPointArray.push([ resultPointArray.push(wgs84togcj02([
Number(lnglat.split(",")[0]), Number(lnglat.split(",")[0]),
Number(lnglat.split(",")[1]), Number(lnglat.split(",")[1]),
]); ]));
} }
singleLane.select = 0; singleLane.select = 0;
......
wj-manage-web/src/views/organization/mapTrack.vue
View file @ 1a93e18f
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
<script> <script>
let map; let map;
import wMap from "../../components/Standard/mapMapbox.vue"; import wMap from "../../components/Standard/mapMapbox.vue";
import { addOrUpdateTrackPointVector } from "../../utils/mapboxTools"; import {addOrUpdateTrackPointVector, wgs84togcj02} from "../../utils/mapboxTools";
export default { export default {
name: "mapTrack", name: "mapTrack",
components: { components: {
...@@ -51,7 +51,7 @@ export default { ...@@ -51,7 +51,7 @@ export default {
refreshData() { refreshData() {
this.loading = true; this.loading = true;
map.flyTo({ map.flyTo({
center: this.rowData.location.split(","), center: wgs84togcj02(this.rowData.location.split(",")),
maxDuration: 1000, maxDuration: 1000,
zoom: 17.2, zoom: 17.2,
pitch: 0, pitch: 0,
......
wj-manage-web/src/views/safety/bottomCameras.vue
View file @ 1a93e18f
...@@ -187,6 +187,7 @@ export default { ...@@ -187,6 +187,7 @@ export default {
} }
.video { .video {
object-fit: fill;
width: calc((100% - 40px) / 4); width: calc((100% - 40px) / 4);
background-color: #132039; background-color: #132039;
margin-right: 10px; margin-right: 10px;
......
wj-manage-web/src/views/safety/leftMap.vue
View file @ 1a93e18f
...@@ -84,7 +84,7 @@ import mapAssets from "../../config/holo/mapAssets"; ...@@ -84,7 +84,7 @@ import mapAssets from "../../config/holo/mapAssets";
import { safetyRank } from "../../dao/safety"; import { safetyRank } from "../../dao/safety";
import { import {
addOrUpdateCross, addOrUpdateCross,
addOrUpdateCrossName, addOrUpdateCrossName, wgs84togcj02,
} from "../../utils/mapboxTools"; } from "../../utils/mapboxTools";
import { import {
equip_camera, equip_camera,
...@@ -151,7 +151,7 @@ export default { ...@@ -151,7 +151,7 @@ export default {
// 选中第一条数据， 并请求右侧所有指标 // 选中第一条数据， 并请求右侧所有指标
let features = []; let features = [];
for (let cross of this.fullData) { for (let cross of this.fullData) {
features.push(turf.point(cross.location.split(","), cross)); features.push(turf.point(wgs84togcj02(cross.location.split(",")), cross));
} }
let geo = turf.featureCollection(features); let geo = turf.featureCollection(features);
addOrUpdateCross(map, geo, this.crossClick); addOrUpdateCross(map, geo, this.crossClick);
...@@ -162,7 +162,7 @@ export default { ...@@ -162,7 +162,7 @@ export default {
this.cameraList = camera.content this.cameraList = camera.content
this.$emit("crossChange", res.content[0], this.cameraList); this.$emit("crossChange", res.content[0], this.cameraList);
map.flyTo({ map.flyTo({
center: res.content[0].location.split(","), center: wgs84togcj02(res.content[0].location.split(",")),
zoom: 15, zoom: 15,
}); });
}); });
......
wj-manage-web/src/views/situation/index.vue
View file @ 1a93e18f
This diff is collapsed.
wj-manage-web/src/views/situation/trackSwitcher.vue
View file @ 1a93e18f
...@@ -1078,6 +1078,7 @@ export default { ...@@ -1078,6 +1078,7 @@ export default {
} }
} }
.video { .video {
object-fit: fill;
height: calc(100% - 62px); height: calc(100% - 62px);
} }
.picker { .picker {
......
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