792 lines
32 KiB
Vue
792 lines
32 KiB
Vue
<template>
|
||
<div id="baiduMap" style="width: 12960px; height: 2430px">
|
||
<!-- <div style="position: absolute; z-index: 10; top: 10px; left: 10px">
|
||
<button @click="toggleType('22')">切换视频监控</button>
|
||
<button @click="toggleType('44')">切换气象检测器</button>
|
||
<button @click="toggleType('53')">切换广播</button>
|
||
<button @click="toggleType('21')">切换情报板</button>
|
||
</div> -->
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, nextTick } from "vue";
|
||
import { onMounted } from "vue";
|
||
import { getDeviceList } from "@/api/modules/index";
|
||
import { emitter } from "@/utils/eventBus";
|
||
const emit = defineEmits(["show-device-info"]);
|
||
const markerMap = ref({
|
||
22: [],
|
||
44: [],
|
||
53: [],
|
||
21: [],
|
||
});
|
||
const showType = ref({
|
||
22: true,
|
||
44: true,
|
||
53: true,
|
||
21: true,
|
||
});
|
||
let map = null;
|
||
function toggleType(type) {
|
||
showType.value[type] = !showType.value[type];
|
||
markerMap.value[type].forEach((marker) => {
|
||
if (showType.value[type]) {
|
||
map.addOverlay(marker);
|
||
} else {
|
||
map.removeOverlay(marker);
|
||
}
|
||
});
|
||
}
|
||
|
||
// ...existing code...
|
||
const selectedMarker = ref(null); // 当前选中的marker
|
||
|
||
const iconModules = import.meta.glob("@/assets/img/map/*.png", {
|
||
eager: true,
|
||
import: "default",
|
||
});
|
||
|
||
function getIcon(type, active = false) {
|
||
const iconName =
|
||
{
|
||
// 1: active ? "lianzhen.png" : "lianzhen.png",
|
||
// 2: active ? "datun.png" : "datun.png",
|
||
// 3: active ? "zhaowang.png" : "zhaowang.png",
|
||
// 4: active ? "dongguang.png" : "dongguang.png",
|
||
// 5: active ? "nanpi.png" : "nanpi.png",
|
||
// 6: active ? "zhaizi.png" : "zhaizi.png",
|
||
// 7: active ? "xiaozhuang.png" : "xiaozhuang.png",
|
||
// 8: active ? "warning.png" : "warning.png",
|
||
22: active ? "video-active.png" : "video.png",
|
||
44: active ? "weather-active.png" : "weather.png",
|
||
53: active ? "broadcast-active.png" : "broadcast.png",
|
||
15: active ? "info-active.png" : "info.png",
|
||
}[type] || "default.png";
|
||
|
||
// 获取图片路径
|
||
const iconPath = iconModules[`/src/assets/img/map/${iconName}`];
|
||
console.log("iconPath:", iconPath);
|
||
return new BMap.Icon(iconPath, new BMap.Size(64, 150));
|
||
}
|
||
function getBigIcon(type, active = false) {
|
||
const iconName =
|
||
{
|
||
1: active ? "lianzhen.png" : "lianzhen.png",
|
||
2: active ? "datun.png" : "datun.png",
|
||
3: active ? "zhaowang.png" : "zhaowang.png",
|
||
4: active ? "dongguang.png" : "dongguang.png",
|
||
5: active ? "nanpi.png" : "nanpi.png",
|
||
6: active ? "zhaizi.png" : "zhaizi.png",
|
||
7: active ? "xiaozhuang.png" : "xiaozhuang.png",
|
||
8: active ? "warning.png" : "warning.png",
|
||
}[type] || "default.png";
|
||
|
||
// 获取图片路径
|
||
const iconPath = iconModules[`/src/assets/img/map/${iconName}`];
|
||
console.log("iconPath:", iconPath);
|
||
return new BMap.Icon(iconPath, new BMap.Size(560, 560));
|
||
}
|
||
|
||
|
||
const customDevices = [
|
||
{ lat: 37.81813, lon: 116.474514, deviceTypeId: '1' }, // 连镇互通
|
||
{ lat: 37.821508, lon: 116.498481, deviceTypeId: '2' }, // 大屯
|
||
{ lat: 37.825527, lon: 116.52225, deviceTypeId: '3' }, // 找王
|
||
{ lat: 37.82899, lon: 116.546504, deviceTypeId: '4' }, // 东光
|
||
{ lat: 37.848468, lon: 116.61959, deviceTypeId: '5' }, // 南皮服务区
|
||
{ lat: 37.984301, lon: 117.234876, deviceTypeId: '6' }, // 寨子
|
||
{ lat: 37.986348, lon: 117.288558, deviceTypeId: '7' }, // 小庄
|
||
{ lat: 37.93491, lon: 116.948172, deviceTypeId: '8' }, //告警图
|
||
];
|
||
|
||
onMounted(async () => {
|
||
// 监听设备的显示隐藏
|
||
window.addEventListener('toggle-map-device', (e) => {
|
||
const { type, show } = e.detail;
|
||
showType.value[type] = show;
|
||
markerMap.value[type]?.forEach((marker) => {
|
||
if (show) {
|
||
map.addOverlay(marker);
|
||
} else {
|
||
map.removeOverlay(marker);
|
||
}
|
||
});
|
||
});
|
||
await nextTick();
|
||
map = new BMap.Map("baiduMap");
|
||
const point = new BMap.Point(116.827009, 37.890385);
|
||
// const point = new BMap.Point(116.92761921711724 , 38.001363273882994);
|
||
// const point = new BMap.Point(116.54300072996494, 38.02274278314041);
|
||
map.setMinZoom(11);
|
||
map.setMaxZoom(17);
|
||
map.centerAndZoom(point, 14);
|
||
map.enableScrollWheelZoom(true);
|
||
map.addEventListener("click", (e) => {
|
||
console.log("点击的坐标：", e.point.lng, e.point.lat);
|
||
});
|
||
// 定义路径点数组
|
||
var points1 = [
|
||
new BMap.Point(115.816121923,37.726502586),
|
||
new BMap.Point(115.817918534,37.725846130),
|
||
new BMap.Point(115.820002603,37.725475087),
|
||
new BMap.Point(115.821871078,37.725418004),
|
||
new BMap.Point(115.823919215,37.725731963),
|
||
new BMap.Point(115.825787690,37.726274254),
|
||
new BMap.Point(115.827548369,37.727159035),
|
||
new BMap.Point(115.828949726,37.728157969),
|
||
new BMap.Point(115.830351082,37.728957106),
|
||
new BMap.Point(115.831968032,37.729784775),
|
||
new BMap.Point(115.833800575,37.730498275),
|
||
new BMap.Point(115.836136170,37.731211768),
|
||
new BMap.Point(115.838435832,37.731696939),
|
||
new BMap.Point(115.841058884,37.731868175),
|
||
new BMap.Point(115.844688038,37.731839636),
|
||
new BMap.Point(115.847418887,37.731811097),
|
||
new BMap.Point(115.851299567,37.732039411),
|
||
new BMap.Point(115.855755162,37.732667272),
|
||
new BMap.Point(115.860929402,37.734265440),
|
||
new BMap.Point(115.864881946,37.736034799),
|
||
new BMap.Point(115.868043981,37.737918264),
|
||
new BMap.Point(115.870918559,37.739972897),
|
||
new BMap.Point(115.874511781,37.742655249),
|
||
new BMap.Point(115.878536190,37.745280435),
|
||
new BMap.Point(115.881087377,37.746250588),
|
||
new BMap.Point(115.883890091,37.747135129),
|
||
new BMap.Point(115.886513143,37.747677261),
|
||
new BMap.Point(115.889279924,37.747962592),
|
||
new BMap.Point(115.891723315,37.748048191),
|
||
new BMap.Point(115.894526028,37.748076725),
|
||
new BMap.Point(115.897580267,37.748133791),
|
||
new BMap.Point(115.899556539,37.748219390),
|
||
new BMap.Point(115.901640607,37.748276455),
|
||
new BMap.Point(115.904048066,37.748304988),
|
||
new BMap.Point(115.906275864,37.748419120),
|
||
new BMap.Point(115.909366035,37.748647383),
|
||
new BMap.Point(115.911629765,37.749103906),
|
||
new BMap.Point(115.914252817,37.749674557),
|
||
new BMap.Point(115.916732140,37.750473460),
|
||
new BMap.Point(115.919031802,37.751415013),
|
||
new BMap.Point(115.921582990,37.752613336),
|
||
new BMap.Point(115.922984346,37.753412207),
|
||
new BMap.Point(115.924709093,37.754496375),
|
||
new BMap.Point(115.926469772,37.755865828),
|
||
new BMap.Point(115.928410112,37.757492019),
|
||
new BMap.Point(115.929955197,37.759089647),
|
||
new BMap.Point(115.932793843,37.761885410),
|
||
new BMap.Point(115.934554521,37.763654104),
|
||
new BMap.Point(115.936530793,37.765650964),
|
||
new BMap.Point(115.938327404,37.767333990),
|
||
new BMap.Point(115.939800625,37.768703203),
|
||
new BMap.Point(115.941525372,37.770072391),
|
||
new BMap.Point(115.944184356,37.772069077),
|
||
new BMap.Point(115.946376222,37.773552294),
|
||
new BMap.Point(115.948639952,37.774921391),
|
||
new BMap.Point(115.950131139,37.775734280),
|
||
new BMap.Point(115.951873852,37.776689770),
|
||
new BMap.Point(115.953652496,37.777588204),
|
||
new BMap.Point(115.955287412,37.778415324),
|
||
new BMap.Point(115.956760634,37.779171133),
|
||
new BMap.Point(115.958305719,37.779983975),
|
||
new BMap.Point(115.959814872,37.780754028),
|
||
new BMap.Point(115.960605381,37.781153311),
|
||
new BMap.Point(115.962833179,37.782237069),
|
||
new BMap.Point(115.963677586,37.782664864),
|
||
new BMap.Point(115.965096909,37.783263773),
|
||
new BMap.Point(115.966480299,37.783805638),
|
||
new BMap.Point(115.968205046,37.784433056),
|
||
new BMap.Point(115.969570470,37.784860838),
|
||
new BMap.Point(115.971403013,37.785402692),
|
||
new BMap.Point(115.973217590,37.785901764),
|
||
new BMap.Point(115.974565049,37.786201206),
|
||
new BMap.Point(115.976343694,37.786600459),
|
||
new BMap.Point(115.978212169,37.786914157),
|
||
new BMap.Point(115.980098611,37.787213595),
|
||
new BMap.Point(115.981571832,37.787384701),
|
||
new BMap.Point(115.982326408,37.787470254),
|
||
new BMap.Point(115.984356579,37.787669878),
|
||
new BMap.Point(115.986440648,37.787840984),
|
||
new BMap.Point(115.988488784,37.787955054),
|
||
new BMap.Point(115.991039972,37.788154676),
|
||
new BMap.Point(115.993267769,37.788439850),
|
||
new BMap.Point(115.994992516,37.788725023),
|
||
new BMap.Point(115.997076585,37.789095746),
|
||
new BMap.Point(116.000058959,37.789708860),
|
||
new BMap.Point(116.002376587,37.790350486),
|
||
new BMap.Point(116.003957605,37.790792492),
|
||
new BMap.Point(116.006077606,37.791448366),
|
||
new BMap.Point(116.007532861,37.791918881),
|
||
new BMap.Point(116.010155913,37.792859902),
|
||
new BMap.Point(116.012778965,37.793914972),
|
||
new BMap.Point(116.015905068,37.795312203),
|
||
new BMap.Point(116.018923375,37.796566837),
|
||
new BMap.Point(116.021438630,37.797593340),
|
||
new BMap.Point(116.023953886,37.798619828),
|
||
new BMap.Point(116.026792531,37.799731841),
|
||
new BMap.Point(116.029379651,37.800758299),
|
||
new BMap.Point(116.031643381,37.801499621),
|
||
new BMap.Point(116.033871178,37.802212424),
|
||
new BMap.Point(116.037428468,37.803096289),
|
||
new BMap.Point(116.038757960,37.803409916),
|
||
new BMap.Point(116.043536946,37.804208234),
|
||
new BMap.Point(116.047956609,37.804721434),
|
||
new BMap.Point(116.051729492,37.805035054),
|
||
new BMap.Point(116.055789833,37.805348673),
|
||
new BMap.Point(116.059706445,37.805690801),
|
||
new BMap.Point(116.063479328,37.806004417),
|
||
new BMap.Point(116.067324076,37.806203990),
|
||
new BMap.Point(116.070845433,37.806460583),
|
||
new BMap.Point(116.073540350,37.806631645),
|
||
new BMap.Point(116.077672555,37.806631645),
|
||
new BMap.Point(116.080978319,37.806203990),
|
||
new BMap.Point(116.083421710,37.805548248),
|
||
new BMap.Point(116.085649508,37.804835477),
|
||
new BMap.Point(116.088416289,37.803495451),
|
||
new BMap.Point(116.091470528,37.802069864),
|
||
new BMap.Point(116.094740360,37.800473173),
|
||
new BMap.Point(116.097866463,37.799047527),
|
||
new BMap.Point(116.100381718,37.798163613),
|
||
new BMap.Point(116.103040703,37.797593340),
|
||
new BMap.Point(116.106202738,37.797222660),
|
||
new BMap.Point(116.108538332,37.797251174),
|
||
new BMap.Point(116.110658333,37.797336715),
|
||
new BMap.Point(116.113496979,37.797450771),
|
||
new BMap.Point(116.116659014,37.797564826),
|
||
new BMap.Point(116.119605456,37.797735908),
|
||
new BMap.Point(116.123737662,37.797935504),
|
||
new BMap.Point(116.127690206,37.798106586),
|
||
new BMap.Point(116.132073937,37.798277667),
|
||
new BMap.Point(116.137463770,37.798619828),
|
||
new BMap.Point(116.142781739,37.798847935),
|
||
new BMap.Point(116.149249538,37.799190093),
|
||
new BMap.Point(116.152842760,37.799304146),
|
||
new BMap.Point(116.156256321,37.799560763),
|
||
new BMap.Point(116.159705814,37.800016969),
|
||
new BMap.Point(116.163119375,37.800644249),
|
||
new BMap.Point(116.166497004,37.801556646),
|
||
new BMap.Point(116.169982429,37.802725637),
|
||
new BMap.Point(116.172928871,37.803837588),
|
||
new BMap.Point(116.175264466,37.804778456),
|
||
new BMap.Point(116.177743789,37.805690801),
|
||
new BMap.Point(116.180546502,37.806603135),
|
||
new BMap.Point(116.185397352,37.807743536),
|
||
new BMap.Point(116.189026506,37.808342240),
|
||
new BMap.Point(116.192368203,37.808883920),
|
||
new BMap.Point(116.197254985,37.809682177),
|
||
new BMap.Point(116.202321428,37.810451918),
|
||
new BMap.Point(116.206058379,37.811079108),
|
||
new BMap.Point(116.209651601,37.811763309),
|
||
new BMap.Point(116.212310585,37.812533028),
|
||
new BMap.Point(116.214861773,37.813359753),
|
||
new BMap.Point(116.218526859,37.814842135),
|
||
new BMap.Point(116.222227878,37.816609551),
|
||
new BMap.Point(116.225210252,37.818006349),
|
||
new BMap.Point(116.229593983,37.820115749),
|
||
new BMap.Point(116.233330934,37.821769020),
|
||
new BMap.Point(116.235810257,37.822738161),
|
||
new BMap.Point(116.237696699,37.823308238),
|
||
new BMap.Point(116.240014327,37.823978073),
|
||
new BMap.Point(116.242583481,37.824562393),
|
||
new BMap.Point(116.244685516,37.825004192),
|
||
new BMap.Point(116.246553991,37.825289222),
|
||
new BMap.Point(116.248224839,37.825488743),
|
||
new BMap.Point(116.251332976,37.825759520),
|
||
new BMap.Point(116.254243486,37.825873531),
|
||
new BMap.Point(116.256579081,37.825930536),
|
||
new BMap.Point(116.260100438,37.826073050),
|
||
new BMap.Point(116.263621796,37.826158558),
|
||
new BMap.Point(116.266568238,37.826244066),
|
||
new BMap.Point(116.270592646,37.826329574),
|
||
new BMap.Point(116.274185869,37.826415081),
|
||
new BMap.Point(116.277958752,37.826500589),
|
||
new BMap.Point(116.281300448,37.826614599),
|
||
new BMap.Point(116.284965535,37.826643101),
|
||
new BMap.Point(116.289564859,37.826671604),
|
||
new BMap.Point(116.292978420,37.826700106),
|
||
new BMap.Point(116.296895032,37.826614599),
|
||
new BMap.Point(116.299985203,37.826386579),
|
||
new BMap.Point(116.302248933,37.826130055),
|
||
new BMap.Point(116.305303171,37.825588503),
|
||
new BMap.Point(116.307998088,37.824989940),
|
||
new BMap.Point(116.310459445,37.824334366),
|
||
new BMap.Point(116.310463937,37.824330803),
|
||
new BMap.Point(116.311007411,37.824174035),
|
||
new BMap.Point(116.311443090,37.824038643),
|
||
new BMap.Point(116.311932666,37.823896126),
|
||
new BMap.Point(116.313244192,37.823536268),
|
||
new BMap.Point(116.315058769,37.823051704),
|
||
new BMap.Point(116.316711651,37.822609893),
|
||
new BMap.Point(116.317879449,37.822282096),
|
||
new BMap.Point(116.319999450,37.821726263),
|
||
new BMap.Point(116.322209281,37.821184678),
|
||
new BMap.Point(116.324257418,37.820799865),
|
||
new BMap.Point(116.326539114,37.820457808),
|
||
new BMap.Point(116.328497420,37.820315283),
|
||
new BMap.Point(116.330850980,37.820229769),
|
||
new BMap.Point(116.332342167,37.820229769),
|
||
new BMap.Point(116.334390304,37.820329536),
|
||
new BMap.Point(116.335917423,37.820457808),
|
||
new BMap.Point(116.337534373,37.820628837),
|
||
new BMap.Point(116.341882172,37.821099164),
|
||
new BMap.Point(116.344074037,37.821312949),
|
||
new BMap.Point(116.346032343,37.821540985),
|
||
new BMap.Point(116.348637429,37.821797524),
|
||
new BMap.Point(116.351044888,37.822054063),
|
||
new BMap.Point(116.356290992,37.822709657),
|
||
new BMap.Point(116.361608961,37.823336742),
|
||
new BMap.Point(116.366890997,37.823935318),
|
||
new BMap.Point(116.372101169,37.824676406),
|
||
new BMap.Point(116.376377103,37.825103953),
|
||
new BMap.Point(116.379179817,37.825189462),
|
||
new BMap.Point(116.383024564,37.825075450),
|
||
new BMap.Point(116.386977108,37.824619399),
|
||
new BMap.Point(116.390426602,37.823878311),
|
||
new BMap.Point(116.394666604,37.822738161),
|
||
new BMap.Point(116.398259826,37.821597993),
|
||
new BMap.Point(116.402212370,37.820343788),
|
||
new BMap.Point(116.408033390,37.818576463),
|
||
new BMap.Point(116.412057798,37.817379218),
|
||
new BMap.Point(116.415651020,37.816295980),
|
||
new BMap.Point(116.418417801,37.815725848),
|
||
new BMap.Point(116.420358141,37.815383767),
|
||
new BMap.Point(116.422442210,37.815041684),
|
||
new BMap.Point(116.424705940,37.814671092),
|
||
new BMap.Point(116.427221195,37.814243484),
|
||
new BMap.Point(116.429305264,37.813872889),
|
||
new BMap.Point(116.432036113,37.813445276),
|
||
new BMap.Point(116.434299843,37.813046169),
|
||
new BMap.Point(116.436851030,37.812818107),
|
||
new BMap.Point(116.439366286,37.812732583),
|
||
new BMap.Point(116.441881541,37.812989153),
|
||
new BMap.Point(116.444037474,37.813331246),
|
||
new BMap.Point(116.446103577,37.813915650),
|
||
new BMap.Point(116.448205612,37.814585571),
|
||
new BMap.Point(116.449714765,37.815169965),
|
||
new BMap.Point(116.451062223,37.815668835),
|
||
new BMap.Point(116.452319851,37.816167701),
|
||
new BMap.Point(116.453469682,37.816566791),
|
||
new BMap.Point(116.456038836,37.817521748),
|
||
new BMap.Point(116.458841549,37.818519452),
|
||
new BMap.Point(116.461392737,37.819374615),
|
||
new BMap.Point(116.464087653,37.820030234),
|
||
new BMap.Point(116.466890367,37.820457808),
|
||
new BMap.Point(116.470124266,37.820799865),
|
||
new BMap.Point(116.473034776,37.820771361),
|
||
new BMap.Point(116.476017151,37.820685846),
|
||
new BMap.Point(116.478927660,37.820571827),
|
||
new BMap.Point(116.481622577,37.820486313),
|
||
new BMap.Point(116.483059866,37.820486313),
|
||
new BMap.Point(116.487946648,37.820486313),
|
||
new BMap.Point(116.491791395,37.820600332),
|
||
new BMap.Point(116.496175126,37.821027903),
|
||
new BMap.Point(116.501888349,37.822054063),
|
||
new BMap.Point(116.507817166,37.823194223),
|
||
new BMap.Point(116.514069372,37.824533889),
|
||
new BMap.Point(116.517914119,37.825246468),
|
||
new BMap.Point(116.520788697,37.825617006),
|
||
new BMap.Point(116.525208360,37.825902034),
|
||
new BMap.Point(116.529160904,37.825816525),
|
||
new BMap.Point(116.533005652,37.825873531),
|
||
new BMap.Point(116.536131755,37.826215563),
|
||
new BMap.Point(116.544324301,37.828239221),
|
||
new BMap.Point(116.546947354,37.828923262),
|
||
new BMap.Point(116.549318880,37.829521792),
|
||
new BMap.Point(116.552624644,37.830148819),
|
||
new BMap.Point(116.555858544,37.830433829),
|
||
new BMap.Point(116.559128376,37.830576334),
|
||
new BMap.Point(116.563835497,37.830889843),
|
||
new BMap.Point(116.568075499,37.831146350),
|
||
new BMap.Point(116.571596857,37.831431356),
|
||
new BMap.Point(116.577561605,37.831801863),
|
||
new BMap.Point(116.584173134,37.832371870),
|
||
new BMap.Point(116.587263305,37.833055872),
|
||
new BMap.Point(116.590748730,37.834338358),
|
||
new BMap.Point(116.593731105,37.835905812),
|
||
new BMap.Point(116.597683649,37.838043194),
|
||
new BMap.Point(116.601312803,37.840209010),
|
||
new BMap.Point(116.605049754,37.842317770),
|
||
new BMap.Point(116.608068060,37.843970540),
|
||
new BMap.Point(116.610655180,37.845395311),
|
||
new BMap.Point(116.613242300,37.846535108),
|
||
new BMap.Point(116.615721623,37.847503921),
|
||
new BMap.Point(116.617769760,37.848244770),
|
||
new BMap.Point(116.619386710,37.848871636),
|
||
new BMap.Point(116.621614508,37.849612471),
|
||
new BMap.Point(116.625243662,37.850581243),
|
||
new BMap.Point(116.629627393,37.851436032),
|
||
new BMap.Point(116.634442310,37.852062871),
|
||
new BMap.Point(116.639616550,37.852490258),
|
||
new BMap.Point(116.644718925,37.852775181),
|
||
new BMap.Point(116.647988757,37.853088595),
|
||
new BMap.Point(116.650971132,37.853316532),
|
||
new BMap.Point(116.654636218,37.853772404),
|
||
new BMap.Point(116.658552830,37.854399222),
|
||
new BMap.Point(116.661319611,37.854940561),
|
||
new BMap.Point(116.664373850,37.855510388),
|
||
new BMap.Point(116.668757581,37.856450591),
|
||
new BMap.Point(116.672997583,37.856991915),
|
||
new BMap.Point(116.680543349,37.857447764),
|
||
new BMap.Point(116.687190810,37.857447764),
|
||
new BMap.Point(116.690963693,37.857561726),
|
||
new BMap.Point(116.694736576,37.858160022),
|
||
new BMap.Point(116.698293866,37.859157171),
|
||
new BMap.Point(116.701707427,37.860724092),
|
||
new BMap.Point(116.705336581,37.862518888),
|
||
new BMap.Point(116.708247091,37.864057249),
|
||
new BMap.Point(116.712127771,37.865738014),
|
||
new BMap.Point(116.714786755,37.866592626),
|
||
new BMap.Point(116.718775232,37.867418741),
|
||
new BMap.Point(116.721937267,37.867959983),
|
||
new BMap.Point(116.724919641,37.868159388),
|
||
new BMap.Point(116.730345406,37.868843055),
|
||
new BMap.Point(116.735124392,37.869412773),
|
||
new BMap.Point(116.739508123,37.870039457),
|
||
new BMap.Point(116.743352870,37.870666137),
|
||
new BMap.Point(116.745544736,37.871093415),
|
||
new BMap.Point(116.749281687,37.871976448),
|
||
new BMap.Point(116.752946773,37.873115831),
|
||
new BMap.Point(116.756683724,37.874483066),
|
||
new BMap.Point(116.759989488,37.875850276),
|
||
new BMap.Point(116.763331185,37.877217461),
|
||
new BMap.Point(116.766277627,37.878385244),
|
||
new BMap.Point(116.770050510,37.880037198),
|
||
new BMap.Point(116.774038986,37.881689114),
|
||
new BMap.Point(116.777632209,37.882828345),
|
||
new BMap.Point(116.780794244,37.883454915),
|
||
new BMap.Point(116.788771197,37.883711237),
|
||
new BMap.Point(116.795957641,37.883654277),
|
||
new BMap.Point(116.802353576,37.883996039),
|
||
new BMap.Point(116.806881036,37.884736517),
|
||
new BMap.Point(116.811085106,37.885790263),
|
||
new BMap.Point(116.814426802,37.886843993),
|
||
new BMap.Point(116.817049854,37.888097057),
|
||
new BMap.Point(116.820283754,37.889549446),
|
||
new BMap.Point(116.822331891,37.890546167),
|
||
new BMap.Point(116.825062739,37.891827645),
|
||
new BMap.Point(116.827829520,37.893194531),
|
||
new BMap.Point(116.832464777,37.895558043),
|
||
new BMap.Point(116.836920372,37.897836054),
|
||
new BMap.Point(116.842382070,37.900398732),
|
||
new BMap.Point(116.846586139,37.902221026),
|
||
new BMap.Point(116.851005803,37.903644662),
|
||
new BMap.Point(116.854778686,37.904783550),
|
||
new BMap.Point(116.859054620,37.905723120),
|
||
new BMap.Point(116.864156995,37.906861976),
|
||
new BMap.Point(116.868576658,37.907886931),
|
||
new BMap.Point(116.871954287,37.908655638),
|
||
new BMap.Point(116.877380052,37.910249967),
|
||
new BMap.Point(116.882841750,37.912299768),
|
||
new BMap.Point(116.887512939,37.914634193),
|
||
new BMap.Point(116.892615314,37.917680221),
|
||
new BMap.Point(116.896028875,37.919729813),
|
||
new BMap.Point(116.898831588,37.921295435),
|
||
new BMap.Point(116.902460742,37.923174136),
|
||
new BMap.Point(116.906161761,37.924682756),
|
||
new BMap.Point(116.909287864,37.925935171),
|
||
new BMap.Point(116.912845154,37.926988321),
|
||
new BMap.Point(116.916869563,37.928041457),
|
||
new BMap.Point(116.920211259,37.928724563),
|
||
new BMap.Point(116.923876346,37.929265352),
|
||
new BMap.Point(116.926499398,37.929578438),
|
||
new BMap.Point(116.931781434,37.930005371),
|
||
new BMap.Point(116.934656012,37.930261530),
|
||
new BMap.Point(116.937297030,37.930474995),
|
||
new BMap.Point(116.939650590,37.930745383),
|
||
new BMap.Point(116.941770591,37.930958847),
|
||
new BMap.Point(116.943621101,37.931200771),
|
||
new BMap.Point(116.945309915,37.931585003),
|
||
new BMap.Point(116.946872967,37.931898079),
|
||
new BMap.Point(116.951616020,37.933306905),
|
||
new BMap.Point(116.955568564,37.935014537),
|
||
new BMap.Point(116.958299413,37.936665209),
|
||
new BMap.Point(116.961605177,37.938771185),
|
||
new BMap.Point(116.965198399,37.941104762),
|
||
new BMap.Point(116.967138739,37.942356895),
|
||
new BMap.Point(116.970516368,37.943836661),
|
||
new BMap.Point(116.973390945,37.944918009),
|
||
new BMap.Point(116.976013997,37.945629414),
|
||
new BMap.Point(116.979283829,37.946255444),
|
||
new BMap.Point(116.982302136,37.946682280),
|
||
new BMap.Point(116.986470273,37.946739191),
|
||
new BMap.Point(116.989416716,37.946824558),
|
||
new BMap.Point(116.992578751,37.946909925),
|
||
new BMap.Point(117.002208586,37.947080658),
|
||
new BMap.Point(117.008891979,37.947479033),
|
||
new BMap.Point(117.015790965,37.948446508),
|
||
new BMap.Point(117.020821476,37.949129423),
|
||
new BMap.Point(117.027289276,37.949840787),
|
||
new BMap.Point(117.030379447,37.950182239),
|
||
new BMap.Point(117.034152330,37.950324510),
|
||
new BMap.Point(117.038176739,37.950466781),
|
||
new BMap.Point(117.042776063,37.950580597),
|
||
new BMap.Point(117.053591661,37.950836684),
|
||
new BMap.Point(117.066742854,37.951291947),
|
||
new BMap.Point(117.076228960,37.950950500),
|
||
new BMap.Point(117.084349642,37.950552143),
|
||
new BMap.Point(117.091248628,37.950267601),
|
||
new BMap.Point(117.097860157,37.951405762),
|
||
new BMap.Point(117.101309650,37.952600811),
|
||
new BMap.Point(117.104615414,37.954478706),
|
||
new BMap.Point(117.107921178,37.956697974),
|
||
new BMap.Point(117.111873723,37.960282803),
|
||
new BMap.Point(117.114820165,37.963127779),
|
||
new BMap.Point(117.117982200,37.965289887),
|
||
new BMap.Point(117.121647287,37.966882978),
|
||
new BMap.Point(117.125168644,37.968077773),
|
||
new BMap.Point(117.130055426,37.968703611),
|
||
new BMap.Point(117.135301530,37.969101868),
|
||
new BMap.Point(117.138535430,37.969670803),
|
||
new BMap.Point(117.143422212,37.970979337),
|
||
new BMap.Point(117.147015434,37.972799868),
|
||
new BMap.Point(117.150608656,37.975018577),
|
||
new BMap.Point(117.153555098,37.977009670),
|
||
new BMap.Point(117.154776794,37.977635430),
|
||
new BMap.Point(117.156860863,37.978574061),
|
||
new BMap.Point(117.158549677,37.979171365),
|
||
new BMap.Point(117.162574086,37.980109976),
|
||
new BMap.Point(117.165879850,37.980593498),
|
||
new BMap.Point(117.168934089,37.980707268),
|
||
new BMap.Point(117.173641210,37.980337516),
|
||
new BMap.Point(117.177162567,37.979512679),
|
||
new BMap.Point(117.180863586,37.978318072),
|
||
new BMap.Point(117.184528672,37.977436325),
|
||
new BMap.Point(117.188804607,37.976327015),
|
||
new BMap.Point(117.191643252,37.975957242),
|
||
new BMap.Point(117.197967323,37.975815021),
|
||
new BMap.Point(117.200698172,37.975815021),
|
||
new BMap.Point(117.204722580,37.976725231),
|
||
new BMap.Point(117.208387667,37.977407881),
|
||
new BMap.Point(117.213202584,37.978374958),
|
||
new BMap.Point(117.216867671,37.979057593),
|
||
new BMap.Point(117.221970046,37.979569565),
|
||
new BMap.Point(117.228365981,37.980195304),
|
||
new BMap.Point(117.233971408,37.980650383),
|
||
new BMap.Point(117.241301581,37.981389880),
|
||
new BMap.Point(117.245972769,37.981901836),
|
||
new BMap.Point(117.251075145,37.982925736),
|
||
new BMap.Point(117.255171418,37.983778975),
|
||
new BMap.Point(117.258405317,37.984518441),
|
||
new BMap.Point(117.258405317,37.984546882),
|
||
new BMap.Point(117.262753116,37.985627626),
|
||
new BMap.Point(117.266490067,37.986594594),
|
||
new BMap.Point(117.270730069,37.987618428),
|
||
new BMap.Point(117.275437190,37.988784444),
|
||
new BMap.Point(117.279605328,37.989779808),
|
||
new BMap.Point(117.283665668,37.990775159),
|
||
new BMap.Point(117.289594485,37.992339255),
|
||
new BMap.Point(117.294301606,37.993562069),
|
||
new BMap.Point(117.297930760,37.994784864),
|
||
new BMap.Point(117.301452118,37.996064510),
|
||
new BMap.Point(117.304973475,37.997571620),
|
||
new BMap.Point(117.307883985,37.999249310),
|
||
new BMap.Point(117.311369410,38.001268173),
|
||
new BMap.Point(117.314495514,38.003087946),
|
||
new BMap.Point(117.318052803,38.005277299),
|
||
new BMap.Point(117.322580263,38.008092085),
|
||
new BMap.Point(117.326748401,38.010707749),
|
||
new BMap.Point(117.330018233,38.012697864),
|
||
new BMap.Point(117.333575523,38.014773212),
|
||
new BMap.Point(117.337743660,38.016876929),
|
||
new BMap.Point(117.342953832,38.019236431),
|
||
new BMap.Point(117.346475190,38.020629354),
|
||
new BMap.Point(117.351146378,38.022306512),
|
||
new BMap.Point(117.356500279,38.024466862),
|
||
new BMap.Point(117.360704349,38.026143931),
|
||
new BMap.Point(117.364908419,38.027849385),
|
||
new BMap.Point(117.370226387,38.029668492),
|
||
new BMap.Point(117.374250796,38.031061215),
|
||
new BMap.Point(117.380215545,38.033363413),
|
||
new BMap.Point(117.384671140,38.035182382),
|
||
new BMap.Point(117.386324022,38.036148691),
|
||
new BMap.Point(117.387725379,38.037370769),
|
||
new BMap.Point(117.389593854,38.039161218),
|
||
new BMap.Point(117.391246736,38.040297988),
|
||
new BMap.Point(117.394049449,38.041974692),
|
||
new BMap.Point(117.395235213,38.044759640),
|
||
new BMap.Point(117.396241315,38.048254882),
|
||
new BMap.Point(117.396888095,38.050584950),
|
||
new BMap.Point(117.397606739,38.052943357),
|
||
new BMap.Point(117.398972164,38.055358514),
|
||
new BMap.Point(117.400121995,38.057347407),
|
||
new BMap.Point(117.402385725,38.059705594),
|
||
new BMap.Point(117.404613522,38.061182974),
|
||
new BMap.Point(117.406913184,38.062717144),
|
||
new BMap.Point(117.409464372,38.063796726),
|
||
new BMap.Point(117.412303017,38.065131976),
|
||
new BMap.Point(117.415536917,38.066467201),
|
||
new BMap.Point(117.418124037,38.067631952),
|
||
new BMap.Point(117.421070479,38.068711461),
|
||
new BMap.Point(117.426208787,38.069677323),
|
||
new BMap.Point(117.431023704,38.069961398),
|
||
new BMap.Point(117.435335571,38.071381755),
|
||
new BMap.Point(117.441767438,38.073739487),
|
||
new BMap.Point(117.448091509,38.076580025),
|
||
new BMap.Point(117.453768800,38.079420453),
|
||
new BMap.Point(117.457254225,38.081522297),
|
||
new BMap.Point(117.461027108,38.083737689),
|
||
new BMap.Point(117.464009483,38.085470192),
|
||
new BMap.Point(117.468033891,38.087855866),
|
||
new BMap.Point(117.473495589,38.091036642),
|
||
new BMap.Point(117.479747795,38.094728440),
|
||
new BMap.Point(117.484203390,38.097284189),
|
||
new BMap.Point(117.489018308,38.100350970),
|
||
new BMap.Point(117.492395937,38.102622576),
|
||
new BMap.Point(117.497067125,38.106484142),
|
||
new BMap.Point(117.502097636,38.110572635),
|
||
new BMap.Point(117.506625096,38.114320217),
|
||
new BMap.Point(117.511799336,38.118408268),
|
||
new BMap.Point(117.514530184,38.120338656),
|
||
new BMap.Point(117.518626458,38.122836729),
|
||
new BMap.Point(117.523369511,38.124880543),
|
||
new BMap.Point(117.527753242,38.126299824),
|
||
new BMap.Point(117.537095619,38.129422144),
|
||
new BMap.Point(117.541982401,38.131238705),
|
||
new BMap.Point(117.547228505,38.134701398),
|
||
new BMap.Point(117.551252914,38.137312500),
|
||
new BMap.Point(117.554702407,38.140547865),
|
||
new BMap.Point(117.558726816,38.144237139),
|
||
new BMap.Point(117.563326140,38.147585702),
|
||
new BMap.Point(117.565841395,38.149061291),
|
||
new BMap.Point(117.569937668,38.151501622),
|
||
new BMap.Point(117.574249535,38.153941870),
|
||
new BMap.Point(117.578202079,38.155814563),
|
||
new BMap.Point(117.582010894,38.157743954),
|
||
new BMap.Point(117.585460388,38.159843526),
|
||
new BMap.Point(117.589556661,38.162056523),
|
||
new BMap.Point(117.593221747,38.164326193),
|
||
new BMap.Point(117.597102427,38.166879486),
|
||
new BMap.Point(117.600839378,38.169375953),
|
||
new BMap.Point(117.604935651,38.171985803),
|
||
new BMap.Point(117.609391246,38.174822489),
|
||
new BMap.Point(117.614134299,38.177829256),
|
||
new BMap.Point(117.618302437,38.180438801),
|
||
new BMap.Point(117.622111252,38.182764620),
|
||
new BMap.Point(117.625417017,38.185147089),
|
||
];
|
||
// 创建单段线段
|
||
const polyline = new BMap.Polyline(points1, {
|
||
strokeColor: '#00c6ff',
|
||
strokeWeight: 25,
|
||
strokeOpacity: 0.8
|
||
});
|
||
map.addOverlay(polyline);
|
||
|
||
var points = [
|
||
new BMap.Point(116.727201337,37.868629410),
|
||
new BMap.Point(116.730039983,37.868942756),
|
||
new BMap.Point(116.732591170,37.869227615),
|
||
new BMap.Point(116.735034561,37.869512473),
|
||
new BMap.Point(116.737495918,37.869825816),
|
||
new BMap.Point(116.740226767,37.870224613),
|
||
new BMap.Point(116.742382700,37.870580681),
|
||
new BMap.Point(116.744035582,37.870908261),
|
||
new BMap.Point(116.746622702,37.871435235),
|
||
new BMap.Point(116.748778636,37.872019176),
|
||
new BMap.Point(116.750970501,37.872631596),
|
||
new BMap.Point(116.753036604,37.873244010),
|
||
new BMap.Point(116.754976944,37.873970356),
|
||
new BMap.Point(116.755551859,37.874141260),
|
||
];
|
||
|
||
const congestionValues = [0.3, 0.8];
|
||
for (let i = 0; i < points.length - 1; i++) {
|
||
const congestion = congestionValues[i] || 0; // 默认不拥堵
|
||
|
||
// 根据拥堵程度计算红色深浅 (0-255)
|
||
const red = Math.floor(100 + 155 * congestion); // 浅红(100,0,0)到深红(255,0,0)
|
||
const color = `rgb(${red}, 0, 0)`;
|
||
|
||
// 创建单段线段
|
||
const segment = new BMap.Polyline([points[i], points[i + 1]], {
|
||
strokeColor: color,
|
||
strokeWeight: 28,
|
||
strokeOpacity: 0.8
|
||
});
|
||
map.addOverlay(segment);
|
||
}
|
||
const query = {
|
||
area: "",
|
||
deviceType: "",
|
||
pageNum: 1,
|
||
pageSize: 9999,
|
||
};
|
||
try {
|
||
const res = await getDeviceList(query);
|
||
// console.log("设备列表:", res);
|
||
res.rows.forEach((device) => {
|
||
const type = String(device.deviceTypeId); // 22/53/15/44
|
||
if (!device.lat || !device.lon) return;
|
||
const markerPoint = new BMap.Point(device.lon, device.lat);
|
||
const marker = new BMap.Marker(markerPoint, { icon: getIcon(type) });
|
||
marker.deviceType = type; // 关键：给marker加上设备类型
|
||
marker.deviceData = device; // 可选：存储设备完整信息
|
||
markerMap.value[type] = markerMap.value[type] || [];
|
||
markerMap.value[type].push(marker);
|
||
map.addOverlay(marker);
|
||
// 可选：marker点击事件
|
||
marker.addEventListener("click", () => {
|
||
selectedMarker.value = marker;
|
||
|
||
if (marker.deviceType === "22") {
|
||
emitter.emit("show-device-info", marker.deviceData);
|
||
} else if (marker.deviceType === "44") {
|
||
emitter.emit("show-device-info", marker.deviceData);
|
||
} else if (marker.deviceType === "53") {
|
||
emitter.emit("show-device-info", marker.deviceData);
|
||
} else if (marker.deviceType === "15") {
|
||
emitter.emit("show-device-info", marker.deviceData);
|
||
}
|
||
});
|
||
});
|
||
customDevices.forEach((device) => {
|
||
const type = String(device.deviceTypeId); // 22/53/21/44
|
||
const markerPoint = new BMap.Point(device.lon, device.lat);
|
||
const marker = new BMap.Marker(markerPoint, { icon: getBigIcon(type) });
|
||
|
||
marker.deviceType = type; // 给标记加上设备类型
|
||
marker.deviceData = device; // 存储设备完整信息
|
||
// 如果是 deviceTypeId == 8，则添加 label
|
||
if (type === '8') {
|
||
const labelContent = `
|
||
<div style="text-align:center;">
|
||
<div style="font-size:48px;font-weight:bold;color:white;">邯港高速 K12+650</div>
|
||
<div style="font-size:32px;color:white;">严重拥堵，东向西。</div>
|
||
</div>
|
||
`;
|
||
const label = new BMap.Label(labelContent, {
|
||
position: markerPoint,
|
||
offset: new BMap.Size(-160, -270) // 调整位置，避免遮挡图标
|
||
});
|
||
|
||
label.setStyle({
|
||
border: 'none',
|
||
backgroundColor: 'transparent',
|
||
padding: '0',
|
||
fontSize: '12px'
|
||
});
|
||
map.addOverlay(label); // 添加 label 到地图
|
||
marker.label = label; // 可选：绑定 label 到 marker，方便后续操作
|
||
}
|
||
|
||
markerMap.value[type] = markerMap.value[type] || [];
|
||
markerMap.value[type].push(marker);
|
||
|
||
map.addOverlay(marker); // 添加到地图上
|
||
});
|
||
} catch (error) {
|
||
console.error("请求设备列表失败:", error);
|
||
}
|
||
});
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
#baiduMap {
|
||
// z-index: 1;
|
||
width: 12960px;
|
||
height: 2430px;
|
||
}
|
||
.content_wrap {
|
||
// position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
</style> |