20250619
This commit is contained in:
@ -1,10 +1,10 @@
|
||||
|
||||
.bigScrenn {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background: #001022;
|
||||
|
||||
// 头部
|
||||
.headBox {
|
||||
position: absolute;
|
||||
@ -13,6 +13,7 @@
|
||||
height: 85px;
|
||||
background: url('~@/assets/images/top-bg.png') no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@ -20,15 +21,18 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 4px;
|
||||
|
||||
.top-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.time {
|
||||
font-size: 24px;
|
||||
letter-spacing: 3px;
|
||||
color: #fff;
|
||||
margin: 0 36px 15px 20px;
|
||||
}
|
||||
|
||||
.qwbg {
|
||||
width: 112px;
|
||||
height: 40px;
|
||||
@ -41,28 +45,33 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.top-center {
|
||||
height: 100%;
|
||||
color: #23FFFC;
|
||||
font-size: 48px;
|
||||
line-height: 88px;
|
||||
font-family: "HANYILINGXINTIJIAN";
|
||||
font-family: "YSBTH";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.top-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.text {
|
||||
color: #e6ffff;
|
||||
font-size: 15px;
|
||||
margin-left: 14px;
|
||||
line-height: 23px;
|
||||
|
||||
.dept {
|
||||
max-width: 200px;
|
||||
overflow: hidden;
|
||||
@ -71,10 +80,12 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.meun {
|
||||
margin-left: 30px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.el-dropdown-tools {
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
@ -84,6 +95,7 @@
|
||||
text-align: center;
|
||||
color: #000;
|
||||
margin-bottom: 9px;
|
||||
|
||||
.el-dropdown-tools-n {
|
||||
display: inline-block;
|
||||
width: 34px;
|
||||
@ -101,6 +113,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 侧边菜单
|
||||
.asideBox {
|
||||
// display: flex;
|
||||
@ -115,8 +128,14 @@
|
||||
}
|
||||
|
||||
|
||||
.asideBoxL{ left: 0; }
|
||||
.asideBoxR{ right: 0; }
|
||||
.asideBoxL {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.asideBoxR {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.asideBottom {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
@ -126,6 +145,7 @@
|
||||
height: calc((100vh - 85px)/3);
|
||||
overflow: hidden;
|
||||
margin: 0 4px;
|
||||
|
||||
.asideItem {
|
||||
width: 50% !important;
|
||||
}
|
||||
@ -139,6 +159,7 @@
|
||||
background: #000;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mapResource {
|
||||
position: absolute;
|
||||
left: 467px;
|
||||
@ -160,11 +181,13 @@
|
||||
transform: rotate(180deg);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.rightSiecle {
|
||||
@include sircle;
|
||||
background: url('~@/assets/images/fold-bg.png') no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.topSiecle {
|
||||
@include sircle;
|
||||
background: url('~@/assets/images/fold-bg.png') no-repeat center center;
|
||||
@ -172,6 +195,7 @@
|
||||
left: 50%;
|
||||
transform: translateX(-50%) rotate(-90deg);
|
||||
}
|
||||
|
||||
.bottomSiecle {
|
||||
position: absolute;
|
||||
right: 472px;
|
||||
@ -180,11 +204,13 @@
|
||||
width: 26px;
|
||||
height: 23px;
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
transform: rotate(90deg);
|
||||
width: 19px;
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
&.hideImg img {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
@ -202,6 +228,7 @@
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
vertical-align: middle;
|
||||
|
||||
&.blue {
|
||||
background-color: #0b9ff4;
|
||||
}
|
||||
@ -230,6 +257,7 @@
|
||||
background-color: #3ad2d4;
|
||||
}
|
||||
}
|
||||
|
||||
button.dp-default {
|
||||
border: 1px solid #3180ea;
|
||||
box-shadow: inset 0 0 18px #2b8ce6;
|
||||
@ -254,6 +282,7 @@ button.dp-default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialogBox {
|
||||
// width: 360px;
|
||||
// position: absolute;
|
||||
@ -266,6 +295,7 @@ button.dp-default {
|
||||
background-size: 100% 100%;
|
||||
z-index: 999;
|
||||
border-radius: 4px;
|
||||
|
||||
>.title {
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
@ -276,16 +306,19 @@ button.dp-default {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-image: linear-gradient(to right, rgba(1, 127, 216, 1), rgba(4, 56, 131, .5), rgba(1, 130, 218, .0));
|
||||
|
||||
.close {
|
||||
font-size: 20px;
|
||||
font-weight: 200;
|
||||
cursor: pointer;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.mc {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.infoBox {
|
||||
border: none;
|
||||
position: relative;
|
||||
@ -317,6 +350,7 @@ button.dp-default {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 12px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
button {
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
@mixin degtextColor ($deg:0deg, $color1, $th1:0%, $color2, $th2:100%) {
|
||||
background-image: linear-gradient($deg, $color1 $th1, $color2 $th2);
|
||||
background-image: linear-gradient(to bottom, $color1 0%, $color1 $th1, $color2 $th1, $color2 $th2);
|
||||
@ -10,18 +11,22 @@
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.bigScrenn {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
overflow: hidden;
|
||||
background: #001022;
|
||||
position: relative;color: #fff;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
|
||||
.headBox {
|
||||
position: absolute;
|
||||
height: 95px;
|
||||
width: 100%;
|
||||
background: #001022;
|
||||
top: 0;
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@ -30,10 +35,12 @@
|
||||
background: url('~@/assets/my/top.png') no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
padding: 0 4px;
|
||||
|
||||
.top-left {
|
||||
position: relative;
|
||||
display: flex;
|
||||
margin-top: 30px;
|
||||
|
||||
.time {
|
||||
position: absolute;
|
||||
left: 60px;
|
||||
@ -42,6 +49,7 @@
|
||||
font-family: "YSBTH";
|
||||
@include textColor(#C3EDFF, #EFFAFF);
|
||||
}
|
||||
|
||||
.qwbox {
|
||||
position: absolute;
|
||||
left: 360px;
|
||||
@ -52,6 +60,7 @@
|
||||
text-align: center;
|
||||
background: url('~@/assets/my/Group_1.png') no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
|
||||
span {
|
||||
font-size: 20px;
|
||||
font-family: "YSBTH";
|
||||
@ -59,6 +68,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.top-center {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
@ -69,18 +79,22 @@
|
||||
@include textColor(#C3EDFF, #EFFAFF);
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.top-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 80px;
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.text {
|
||||
color: #e6ffff;
|
||||
font-size: 15px;
|
||||
margin-left: 14px;
|
||||
line-height: 23px;
|
||||
|
||||
.dept {
|
||||
max-width: 200px;
|
||||
overflow: hidden;
|
||||
@ -89,6 +103,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.meun {
|
||||
width: 110px;
|
||||
height: 34px;
|
||||
@ -98,6 +113,7 @@
|
||||
background: url('~@/assets/images/bg111.png') no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.el-dropdown-tools {
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
@ -105,6 +121,7 @@
|
||||
border: 1px solid rgb(20, 135, 180);
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
|
||||
.el-dropdown-tools-n {
|
||||
display: inline-block;
|
||||
width: 34px;
|
||||
@ -122,6 +139,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.asideBox {
|
||||
position: absolute;
|
||||
top: 95px;
|
||||
@ -130,28 +148,33 @@
|
||||
background: #001022;
|
||||
z-index: 2;
|
||||
padding: 0 10px;
|
||||
|
||||
.boder-small {
|
||||
height: calc((100%/3) - 5px);
|
||||
background: url('~@/assets/my/border-s.png') no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.boder-middle {
|
||||
height: calc((100% / 2) - 5px);
|
||||
background: url('~@/assets/my/border-m.png') no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.boder-big {
|
||||
height: 100%;
|
||||
background: url('~@/assets/my/border-m.png') no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.boder-top {
|
||||
height: 356px;
|
||||
background: url('~@/assets/my/border-s.png') no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.boder-bottom {
|
||||
margin-top: 5px;
|
||||
height: calc(100% - 360px);
|
||||
@ -165,6 +188,7 @@
|
||||
padding: 0px 0px 10px 0px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
|
||||
.box-title {
|
||||
font-size: 20px;
|
||||
color: #e6ffff;
|
||||
@ -181,6 +205,7 @@
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.cntBoxInfo {
|
||||
height: calc(100% - 46px);
|
||||
overflow: hidden;
|
||||
@ -189,6 +214,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.asideBoxfooter {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
@ -200,9 +226,11 @@
|
||||
padding: 0 5px 5px;
|
||||
box-sizing: border-box;
|
||||
z-index: 9;
|
||||
|
||||
.mapbtnsBox {
|
||||
height: 40px;
|
||||
position: relative;
|
||||
|
||||
.down {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
@ -213,27 +241,32 @@
|
||||
transform: rotate(-90deg);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.updown {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
.cntBox {
|
||||
display: flex;
|
||||
height: calc(100% - 36px);
|
||||
background: #000;
|
||||
padding: 0 5px 5px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.left {
|
||||
width: 33%;
|
||||
margin-right: 1%;
|
||||
background: url('~@/assets/my/border-s.png') no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 66%;
|
||||
background: url('~@/assets/my/bg-h.png') no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.box-title {
|
||||
font-size: 20px;
|
||||
color: #e6ffff;
|
||||
@ -243,8 +276,10 @@
|
||||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
|
||||
.boxContent {
|
||||
height: 100%;
|
||||
|
||||
.boxInfo {
|
||||
height: calc(100% - 33px);
|
||||
overflow: hidden;
|
||||
@ -255,16 +290,19 @@
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.addBox {
|
||||
position: absolute;
|
||||
top: 95px;
|
||||
pointer-events: auto;
|
||||
cursor: pointer;
|
||||
|
||||
.imgBox {
|
||||
width: 111px;
|
||||
height: 112px;
|
||||
background: url('~@/assets/images/qwddd.png') no-repeat center center;
|
||||
text-align: center;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
@ -273,17 +311,20 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin sircle {
|
||||
position: absolute;
|
||||
width: 73px;
|
||||
height: calc(100vh - 90px);
|
||||
top: 90px;
|
||||
}
|
||||
|
||||
.leftSiecle {
|
||||
@include sircle;
|
||||
background: url('~@/assets/my/left-arrow.png') no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.rightSiecle {
|
||||
@include sircle;
|
||||
right: 370px;
|
||||
@ -293,6 +334,7 @@
|
||||
|
||||
|
||||
}
|
||||
|
||||
.dialogBox {
|
||||
padding: 0 0 10px 0;
|
||||
color: #fff;
|
||||
@ -301,6 +343,7 @@
|
||||
background-size: 100% 100%;
|
||||
z-index: 999;
|
||||
border-radius: 4px;
|
||||
|
||||
>.title {
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
@ -311,16 +354,19 @@
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-image: linear-gradient(to right, rgba(1, 127, 216, 1), rgba(4, 56, 131, .5), rgba(1, 130, 218, .0));
|
||||
|
||||
.close {
|
||||
font-size: 20px;
|
||||
font-weight: 200;
|
||||
cursor: pointer;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.mc {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.infoBox {
|
||||
border: none;
|
||||
position: relative;
|
||||
@ -351,11 +397,13 @@
|
||||
padding-top: 8px;
|
||||
padding-bottom: 12px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
button {
|
||||
margin: 0 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button.dp-default {
|
||||
border: 1px solid #3180ea;
|
||||
box-shadow: inset 0 0 18px #2b8ce6;
|
||||
@ -393,6 +441,7 @@ button.dp-default {
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
vertical-align: middle;
|
||||
|
||||
&.blue {
|
||||
background-color: #0b9ff4;
|
||||
}
|
||||
@ -433,6 +482,15 @@ button.dp-default {
|
||||
line-height: 24px;
|
||||
transform: rotate(45deg)
|
||||
}
|
||||
.line{ background: #00bc65; }
|
||||
.lineing{ background: #AB0F0B; }
|
||||
.unline{ background: #808080; }
|
||||
|
||||
.line {
|
||||
background: #00bc65;
|
||||
}
|
||||
|
||||
.lineing {
|
||||
background: #AB0F0B;
|
||||
}
|
||||
|
||||
.unline {
|
||||
background: #808080;
|
||||
}
|
||||
@ -4,8 +4,8 @@ header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
// background: url('~@/assets/images/header.png') no-repeat center center ;
|
||||
background: linear-gradient(-270deg, #00Adf7, #12c299);
|
||||
background: url('~@/assets/images/topas.png') no-repeat center center;
|
||||
// background: linear-gradient(-270deg, #00Adf7, #12c299);
|
||||
background-size: 100% 100%;
|
||||
|
||||
.right {
|
||||
@ -19,12 +19,15 @@ header {
|
||||
box-sizing: border-box;
|
||||
margin-right: 25px;
|
||||
border-radius: 30px;
|
||||
|
||||
img {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.detail {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
|
||||
.hd {
|
||||
white-space: nowrap;
|
||||
color: #ffffff;
|
||||
@ -106,6 +109,7 @@ header {
|
||||
background-color: #ffffff;
|
||||
z-index: 998;
|
||||
color: #131313;
|
||||
|
||||
.zqjl {
|
||||
box-sizing: border-box;
|
||||
padding: 40px 40px 20px;
|
||||
@ -169,6 +173,7 @@ header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
line-height: 48px;
|
||||
|
||||
.title {
|
||||
color: #131313;
|
||||
}
|
||||
@ -230,6 +235,7 @@ header {
|
||||
padding-left: 10px;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 4px;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
@ -251,6 +257,7 @@ header {
|
||||
border: solid #6fb2ff;
|
||||
border-width: 2px 2px 0 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
color: #000;
|
||||
@ -264,6 +271,7 @@ header {
|
||||
.tabBox {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
.el-table--fit {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -272,6 +280,7 @@ header {
|
||||
height: calc(100% - 100px);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.fenye {
|
||||
border: solid #eeeeee;
|
||||
border-width: 0 1px 1px 1px;
|
||||
@ -281,9 +290,11 @@ header {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-main .titleBox::before {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.app-main .titleBox::after {
|
||||
border: none;
|
||||
}
|
||||
@ -299,6 +310,7 @@ header {
|
||||
display: flex;
|
||||
margin-top: 15px;
|
||||
height: calc(100vh - 148px);
|
||||
|
||||
.treeBox {
|
||||
flex-shrink: 0;
|
||||
height: 100%;
|
||||
@ -324,19 +336,24 @@ header {
|
||||
|
||||
.content-box-sun {
|
||||
display: flex;
|
||||
|
||||
.org-box {
|
||||
flex: 1;
|
||||
|
||||
.org-content-box {
|
||||
width: 95%;
|
||||
|
||||
.org-search-box {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.tree-box {
|
||||
height: 750px;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-box-sun {
|
||||
flex: 4;
|
||||
}
|
||||
@ -348,6 +365,7 @@ header {
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
.title {
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
|
||||
BIN
src/assets/images/aside.png
Normal file
BIN
src/assets/images/aside.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
BIN
src/assets/images/topas.png
Normal file
BIN
src/assets/images/topas.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
@ -1,7 +1,13 @@
|
||||
<template>
|
||||
<div :id="mapid" class="map"></div>
|
||||
<div class="changeMap_box" v-if="props.isShow">
|
||||
<el-switch v-model="conditionRoute" @change="handleSwitch" active-text="打开路况" inactive-text="关闭路况" style="--el-switch-color:#13ce66;--el-switch-off-color:#ff4949;" />
|
||||
<el-switch
|
||||
v-model="conditionRoute"
|
||||
@change="handleSwitch"
|
||||
active-text="打开路况"
|
||||
inactive-text="关闭路况"
|
||||
style="--el-switch-color: #13ce66; --el-switch-off-color: #ff4949"
|
||||
/>
|
||||
<!-- <el-carousel type="card" height="75px" :autoplay="false" indicator-position="none" :initial-index="3" @change="onMapImageChange">
|
||||
<el-carousel-item>
|
||||
<div class="mapImageItem">
|
||||
@ -30,7 +36,14 @@
|
||||
</el-carousel> -->
|
||||
<!-- 地图缩放 -->
|
||||
<div class="zoomTargetBox">
|
||||
<el-input-number :min="7" :max="18" v-model="zoomTarget" :step="1" step-strictly @change="handleZoom">
|
||||
<el-input-number
|
||||
:min="7"
|
||||
:max="18"
|
||||
v-model="zoomTarget"
|
||||
:step="1"
|
||||
step-strictly
|
||||
@change="handleZoom"
|
||||
>
|
||||
</el-input-number>
|
||||
</div>
|
||||
</div>
|
||||
@ -88,27 +101,32 @@ onMounted(() => {
|
||||
|
||||
map = new EliMap({
|
||||
id: props.mapid,
|
||||
crs: "EPSG:3857",
|
||||
crs: "EPSG:4490",
|
||||
style: {
|
||||
glyphs: "./fonts/{fontstack}/{range}.pbf",
|
||||
center: [94.36,29.65],
|
||||
zoom: 10
|
||||
center: [94.36057012, 29.64276831],
|
||||
zoom: 15
|
||||
},
|
||||
transformRequest: (url) => {
|
||||
if (url.indexOf("TileMatrix=") != -1) {
|
||||
const arr = url.split("TileMatrix=");
|
||||
const arr1 = arr[1].split("&");
|
||||
const nurl = `${arr[0]}&TileMatrix=${Number(arr1[0])}&${arr1[1]}&${arr1[2]}`;
|
||||
|
||||
}
|
||||
}
|
||||
minZoom: 7,
|
||||
maxZoom: 18
|
||||
});
|
||||
|
||||
window.map = map;
|
||||
map.mapboxGLMap.on("load", () => {
|
||||
map.addGaudLayer({
|
||||
url: 'http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
|
||||
})
|
||||
map.addWMTSLayer(
|
||||
"http://89.0.23.24/PGIS_S_TileMapServer/Maps/XZDJ_SL/EzMap",
|
||||
{
|
||||
Service: "getImage",
|
||||
Type: "RGB",
|
||||
ZoomOffset: "0",
|
||||
V: "0.3",
|
||||
Zoom: "{z}",
|
||||
Row: "{y}",
|
||||
Col: "{x}"
|
||||
},
|
||||
{
|
||||
tileSize: 300
|
||||
}
|
||||
);
|
||||
zoomTarget.value = map.mapboxGLMap.getZoom();
|
||||
});
|
||||
mapUtil.value = new MapUtil(map);
|
||||
@ -151,8 +169,6 @@ onMounted(() => {
|
||||
|
||||
// 绘制图形 - 回显区域
|
||||
emitter.on("drawShape", (res) => {
|
||||
console.log(res);
|
||||
|
||||
mapUtil.value.plot(res, resFun);
|
||||
});
|
||||
emitter.on("removeEara", (flag) => {
|
||||
@ -255,7 +271,6 @@ const mapSetLayer = (id, source) => {
|
||||
|
||||
//获取地图绘制的数据
|
||||
const resFun = (coord, type, flag, data) => {
|
||||
|
||||
emitter.emit("coordString", {
|
||||
coord: coord,
|
||||
type: type,
|
||||
@ -320,29 +335,35 @@ onUnmounted(() => {
|
||||
right: 398px;
|
||||
bottom: 4px;
|
||||
z-index: 9;
|
||||
|
||||
.mapImageItem {
|
||||
border: 1px solid #08aae8;
|
||||
background: rgb(9, 26, 70);
|
||||
|
||||
& > img {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
& > div {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
top: -3px;
|
||||
}
|
||||
}
|
||||
|
||||
.zoomTargetBox {
|
||||
margin-top: 10px;
|
||||
margin-left: 23px;
|
||||
}
|
||||
|
||||
::v-deep .el-input-number__decrease,
|
||||
::v-deep .el-input-number__increase {
|
||||
background: #133362;
|
||||
color: #fff;
|
||||
border: none;
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner {
|
||||
background: #0c1641;
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,400 +0,0 @@
|
||||
<template>
|
||||
<div :id="mapid" style="width: 100%; height: 100%"></div>
|
||||
<div class="changeMap_box" v-if="props.isShow">
|
||||
<el-carousel type="card" height="75px" :autoplay="false" indicator-position="none" :initial-index="2" @change="onMapImageChange">
|
||||
<el-carousel-item>
|
||||
<div class="mapImageItem">
|
||||
<img :src="require('@/assets/images/layout/yxt.jpg')" alt=""/>
|
||||
<div>浅色图</div>
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
<el-carousel-item>
|
||||
<div class="mapImageItem">
|
||||
<img :src="require('@/assets/images/layout/yst.jpg')" alt=""/>
|
||||
<div>深色图</div>
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
<el-carousel-item>
|
||||
<div class="mapImageItem">
|
||||
<img :src="require('@/assets/images/layout/yst.jpg')" alt=""/>
|
||||
<div>三合一</div>
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
<!-- 地图缩放 -->
|
||||
<div class="zoomTargetBox">
|
||||
<el-input-number :min="6" :max="17" v-model="zoomTarget" :step="1" step-strictly @change="handleZoom"></el-input-number>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import store from "@/store";
|
||||
import { ref, onMounted, onUnmounted, defineProps, nextTick } from "vue";
|
||||
import { MapUtil } from "./mapUtil";
|
||||
import * as zgBj from "./Bj/510300.json";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { getItem } from "@/utils/storage";
|
||||
const mMap = ref(null); //地图对象
|
||||
const mapUtil = ref(null); //地图工具对象
|
||||
const zoomTarget = ref(6);
|
||||
const props = defineProps({
|
||||
mapid: {
|
||||
type: String,
|
||||
default: "mapDiv"
|
||||
},
|
||||
//是否显示可以切换地图底图
|
||||
isShow: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//是否显示实时路况
|
||||
isShowMvt: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//是否显示地图层级
|
||||
isShowZoom: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//是否显示绘制控件
|
||||
isShowDraw: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
try {
|
||||
const userInfo = getItem("deptId")[0].deptCode;
|
||||
} catch (error) {}
|
||||
let map;
|
||||
let mapLayer;
|
||||
|
||||
onMounted(() => {
|
||||
emitter.on("followUp", (res) => {
|
||||
let box = document.getElementsByClassName("changeMap_box");
|
||||
if (!box) return;
|
||||
box[0].style.right = !res ? "4px" : "398px";
|
||||
box[0].style.transition = "0.5s";
|
||||
});
|
||||
const setMapToken = (url, toekn) => {
|
||||
return {
|
||||
url,
|
||||
headers: {
|
||||
"Content-Type": "application/x-protobuf",
|
||||
userToken: "",
|
||||
appToken: "",
|
||||
host: "152.9.14.26",
|
||||
"authentication-code": toekn
|
||||
}
|
||||
};
|
||||
};
|
||||
map = new EliMap({
|
||||
id: props.mapid,
|
||||
crs: "EPSG:4490",
|
||||
style: {
|
||||
glyphs: "./fonts/{fontstack}/{range}.pbf",
|
||||
center: [104.76944000298249, 29.32785788936213],
|
||||
zoom: 10,
|
||||
sources: {
|
||||
TDT_SS: {
|
||||
type: "raster",
|
||||
tiles: [
|
||||
window.location.origin +
|
||||
"/restcloud/pgis/api/map/services/scmap-sl-ss/wmts/1.0.0/GetTile?layer=scmap&style=default&tilematrixset=ChinaPublicServicesCGCS2000_snzsllayers&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix={z}&TileRow={y}&TileCol={x}"
|
||||
],
|
||||
tileSize: 256
|
||||
},
|
||||
TDT_SL: {
|
||||
type: "raster",
|
||||
tiles: [
|
||||
window.location.origin + "/restcloud/pgis/api/map/sl?layer=scmap&style=default&tilematrixset=ChinaPublicServicesCGCS2000_snzsllayers&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix={z}&TileRow={y}&TileCol={x}"
|
||||
],
|
||||
tileSize: 256
|
||||
},
|
||||
TDT_ROAD_SOURCES: {
|
||||
type: "raster",
|
||||
tiles: ["http://80.2.22.218:9099/sc_map_road/{z}/{y}/{x}.png"],
|
||||
tileSize: 256
|
||||
},
|
||||
TDT_POI_SOURCES: {
|
||||
type: "raster",
|
||||
tiles: ["http://80.2.22.218:9099/sc_map_poi/{z}/{y}/{x}.png"],
|
||||
tileSize: 256
|
||||
},
|
||||
TDT_TITLE_SOURCES: {
|
||||
type: "raster",
|
||||
tiles: ["http://80.2.22.218:9099/sc_map_bg/{z}/{y}/{x}.png"],
|
||||
tileSize: 256
|
||||
}
|
||||
},
|
||||
layers: [
|
||||
{
|
||||
type: "background",
|
||||
id: "background",
|
||||
paint: {
|
||||
"background-color": "#f0f8ff"
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "TDT_MAP_SL",
|
||||
type: "raster",
|
||||
source: "TDT_SL"
|
||||
}
|
||||
]
|
||||
},
|
||||
minZoom: 7,
|
||||
maxZoom: 18,
|
||||
transformRequest: (url) => {
|
||||
//电子地图
|
||||
if (url.indexOf("map/sl") != -1) {
|
||||
return setMapToken(url, "ecc71965-3414-41e9-836c-195ca61d2d4d");
|
||||
}
|
||||
//四川省深色电子地图
|
||||
if (url.indexOf("scmap-sl-ss") != -1) {
|
||||
return setMapToken(url, "8f211be3-a1ef-4fe5-85ad-801bc842f62b");
|
||||
}
|
||||
//路况
|
||||
if (url.indexOf("mvt") != -1) {
|
||||
return setMapToken(url, "be47ee81-040d-43b4-b7f9-9dc735735272");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
window.map = map;
|
||||
let layer;
|
||||
// 路况
|
||||
const add = () => {
|
||||
layer = map.addMvtLayer({
|
||||
url: window.location.origin + "/restcloud/pgis/api/mvt/road/condition/{z}/{x}/{y}",
|
||||
sourceLayer: "mvt",
|
||||
layer: "line",
|
||||
style: {
|
||||
paint: {
|
||||
// state:道路路段交通情况（1畅通 2缓慢 3拥堵 4极度拥堵 5无数据）
|
||||
"line-color": [
|
||||
"match",
|
||||
["get", "state"],
|
||||
1,
|
||||
"#53FF2B",
|
||||
2,
|
||||
"#FFEA47",
|
||||
3,
|
||||
"#FF5627",
|
||||
4,
|
||||
"#FF1200",
|
||||
5,
|
||||
"#999999",
|
||||
"#53FF2B"
|
||||
],
|
||||
"line-width": 3
|
||||
},
|
||||
layout: {
|
||||
"line-join": "miter",
|
||||
"line-cap": "round"
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
map.mapboxGLMap.on("load", () => {
|
||||
add();
|
||||
zoomTarget.value = map.mapboxGLMap.getZoom();
|
||||
});
|
||||
mapUtil.value = new MapUtil(map);
|
||||
mapUtil.value.Drawplot(); //初始化加载绘制工具
|
||||
// 设置地图中心点及图层
|
||||
emitter.on("setMapCenter", (res) => {
|
||||
mapUtil.value.setMapCenter(res.location, res.zoomLevel);
|
||||
});
|
||||
emitter.on("removePlot", (flag) => {
|
||||
mapUtil.value.removePlot(flag);
|
||||
});
|
||||
// 撒点
|
||||
emitter.on("addPointArea", (obj) => {
|
||||
mapUtil.value.makerSki(obj);
|
||||
});
|
||||
// 鼠标滑过提示文字的点位
|
||||
emitter.on("showPoint", (obj) => {
|
||||
mapUtil.value.showPoint(obj);
|
||||
});
|
||||
// 清除所有
|
||||
emitter.on("removeAll", (res) => {
|
||||
mapUtil.value.removeAll(res);
|
||||
});
|
||||
// 清除某个覆盖物
|
||||
emitter.on("deletePointArea", (res) => {
|
||||
mapUtil.value.removeElement(res);
|
||||
});
|
||||
// 清除某个覆盖物的单个
|
||||
emitter.on("deletePointAreaOne", (obj) => {
|
||||
mapUtil.value.removeElementOne(obj.flag, obj.id);
|
||||
});
|
||||
// 绘制图形 - 回显区域
|
||||
emitter.on("drawShape", (res) => {
|
||||
mapUtil.value.plot(res, resFun);
|
||||
});
|
||||
// 回显图形
|
||||
emitter.on("echoPlane", (res) => {
|
||||
mapUtil.value.echoPlane(res);
|
||||
});
|
||||
//移除绘制区域
|
||||
emitter.on("removeEara", (flag) => {
|
||||
mapUtil.value.removeEara(flag);
|
||||
});
|
||||
// 回显线
|
||||
emitter.on("echoLine", (res) => {
|
||||
mapUtil.value.createLine(res, res.flag);
|
||||
});
|
||||
//创建边界面（geojson）
|
||||
emitter.on("setBoundarys", (res) => {
|
||||
mapUtil.value.createBoundarys(res);
|
||||
});
|
||||
// 移除边界
|
||||
emitter.on("removeBj", (res) => {
|
||||
mapUtil.value.removeBj(res);
|
||||
});
|
||||
//创建线（geojson）
|
||||
emitter.on("setBoundaryLine", (res) => {
|
||||
mapUtil.value.createBoundarysLine(res);
|
||||
});
|
||||
// 轨迹回放
|
||||
emitter.on("drawLineAnimation", (res) => {
|
||||
mapUtil.value.displayLineAnimation(res);
|
||||
});
|
||||
|
||||
// 聚合撒点
|
||||
emitter.on("addPoint", (obj) => {
|
||||
mapUtil.value.aggregateScatteringPoint(obj);
|
||||
});
|
||||
// 热力图显示
|
||||
emitter.on("thermodynamicChart", (res) => {
|
||||
mapUtil.value.showHeatDrawing(res);
|
||||
});
|
||||
// 扩散圆
|
||||
emitter.on("diffusionCircle", (res) => {
|
||||
mapUtil.value.diffusionCircle(res);
|
||||
});
|
||||
|
||||
//删除自定义点位
|
||||
emitter.on("ClearssCircle", (res) => {
|
||||
mapUtil.value.clearmakerZdy(res);
|
||||
});
|
||||
// 获取当前地图中心点
|
||||
emitter.on("getCurrentCenter", (res) => {
|
||||
let centerPoint = map.mapboxGLMap.getCenter();
|
||||
let coords = [centerPoint.lng, centerPoint.lat];
|
||||
emitter.emit("getcentercoord", coords);
|
||||
});
|
||||
hendleEare(); // 获取边界上图
|
||||
});
|
||||
|
||||
//获取地图绘制的数据
|
||||
const resFun = (coord, type, flag, data) => {
|
||||
emitter.emit("coordString", { coord: coord, type: type, flag: flag, data: data });
|
||||
};
|
||||
|
||||
// 地图层级
|
||||
const handleZoom = (val) => {
|
||||
map.mapboxGLMap.setZoom(val);
|
||||
};
|
||||
|
||||
//切换地图底图
|
||||
const onMapImageChange = (val) => {
|
||||
//清除已经存在胡地图图层
|
||||
if (map.mapboxGLMap.getLayer("TDT_MAP_SS")) map.mapboxGLMap.removeLayer("TDT_MAP_SS");
|
||||
if (map.mapboxGLMap.getLayer("TDT_MAP_SL")) map.mapboxGLMap.removeLayer("TDT_MAP_SL");
|
||||
if (map.mapboxGLMap.getLayer("TDT_TITLE_ID")) map.mapboxGLMap.removeLayer("TDT_TITLE_ID");
|
||||
if (map.mapboxGLMap.getLayer("TDT_ROAD_ID")) map.mapboxGLMap.removeLayer("TDT_ROAD_ID");
|
||||
if (map.mapboxGLMap.getLayer("TDT_POI_ID")) map.mapboxGLMap.removeLayer("TDT_POI_ID");
|
||||
//设置图层
|
||||
switch (val) {
|
||||
case 0:
|
||||
mapSetLayer("TDT_MAP_SL", "TDT_SL");
|
||||
break;
|
||||
case 1:
|
||||
mapSetLayer("TDT_MAP_SS", "TDT_SS");
|
||||
break;
|
||||
case 2:
|
||||
mapSetLayer("TDT_TITLE_ID", "TDT_TITLE_SOURCES");
|
||||
mapSetLayer("TDT_POI_ID", "TDT_POI_SOURCES");
|
||||
mapSetLayer("TDT_ROAD_ID", "TDT_ROAD_SOURCES");
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
//设置图层函数
|
||||
const mapSetLayer = (id, source) => {
|
||||
map.mapboxGLMap.addLayer({ id, type: "raster", source });
|
||||
map.mapboxGLMap.moveLayer("BoundarysMap",undefined)
|
||||
};
|
||||
|
||||
// 获取边界上图
|
||||
const hendleEare = () => {
|
||||
let data = zgBj.default;
|
||||
setTimeout(() => { mapUtil.value.createBoundarys({ data,flag:'BjMap' }); }, 2000);
|
||||
};
|
||||
|
||||
onUnmounted(() => {
|
||||
emitter.off("removePlot");
|
||||
emitter.off("addPointArea");
|
||||
emitter.off("removeAll");
|
||||
emitter.off("showPoint");
|
||||
emitter.off("deletePointArea");
|
||||
emitter.off("deletePointAreaOne");
|
||||
emitter.off("drawShape");
|
||||
emitter.off("echoPlane");
|
||||
emitter.off("removeEara");
|
||||
emitter.off("echoLine");
|
||||
emitter.off("addPoint");
|
||||
emitter.off("thermodynamicChart");
|
||||
emitter.off("drawLineAnimation");
|
||||
emitter.off("trackAnimation");
|
||||
emitter.off("aggregateScatteringPoint");
|
||||
emitter.off("hotmap");
|
||||
emitter.off("setBoundarys");
|
||||
emitter.off("setBoundaryLine");
|
||||
emitter.off("diffusionCircle");
|
||||
emitter.off("SsCircle");
|
||||
emitter.off("ClearssCircle");
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.changeMap_box {
|
||||
position: absolute;
|
||||
right: 398px;
|
||||
bottom: 4px;
|
||||
z-index: 9;
|
||||
.mapImageItem {
|
||||
border: 1px solid #08aae8;
|
||||
background: rgb(9, 26, 70);
|
||||
color: #fff;
|
||||
& > img {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
}
|
||||
& > div {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
top: -3px;
|
||||
}
|
||||
}
|
||||
.zoomTargetBox {
|
||||
margin-top: 10px;
|
||||
}
|
||||
::v-deep .el-input-number__decrease,
|
||||
::v-deep .el-input-number__increase {
|
||||
background: #133362;
|
||||
color: #fff;
|
||||
border: none;
|
||||
}
|
||||
::v-deep .el-input__inner {
|
||||
background: #0c1641;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,459 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
:id="mapid"
|
||||
style="width: 100%; height: 100%"
|
||||
></div>
|
||||
<div
|
||||
class="changeMap_box"
|
||||
v-if="props.isShow"
|
||||
>
|
||||
<el-carousel
|
||||
type="card"
|
||||
height="75px"
|
||||
:autoplay="false"
|
||||
indicator-position="none"
|
||||
:initial-index="2"
|
||||
@change="onMapImageChange"
|
||||
>
|
||||
<el-carousel-item>
|
||||
<div class="mapImageItem">
|
||||
<img
|
||||
:src="require('@/assets/images/layout/yxt.jpg')"
|
||||
alt=""
|
||||
/>
|
||||
<div>浅色图</div>
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
<el-carousel-item>
|
||||
<div class="mapImageItem">
|
||||
<img
|
||||
:src="require('@/assets/images/layout/yst.jpg')"
|
||||
alt=""
|
||||
/>
|
||||
<div>深色图</div>
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
<el-carousel-item>
|
||||
<div class="mapImageItem">
|
||||
<img
|
||||
:src="require('@/assets/images/layout/yst.jpg')"
|
||||
alt=""
|
||||
/>
|
||||
<div>三合一</div>
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
<!-- 地图缩放 -->
|
||||
<div class="zoomTargetBox">
|
||||
<el-input-number
|
||||
:min="6"
|
||||
:max="17"
|
||||
v-model="zoomTarget"
|
||||
:step="1"
|
||||
step-strictly
|
||||
@change="handleZoom"
|
||||
>
|
||||
</el-input-number>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import store from "@/store";
|
||||
import { ref, onMounted, onUnmounted, defineProps, nextTick } from "vue";
|
||||
import { MapUtil } from "./mapUtil";
|
||||
import * as zgBj from "./Bj/510300.json";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { getItem } from "@/utils/storage";
|
||||
const mMap = ref(null); //地图对象
|
||||
const mapUtil = ref(null); //地图工具对象
|
||||
const isLz = ref(false); //是否是泸州用户
|
||||
const zoomTarget = ref(6);
|
||||
const props = defineProps({
|
||||
mapid: {
|
||||
type: String,
|
||||
default: "mapDiv"
|
||||
},
|
||||
//是否显示可以切换地图底图
|
||||
isShow: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//是否显示实时路况
|
||||
isShowMvt: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//是否显示地图层级
|
||||
isShowZoom: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//是否显示绘制控件
|
||||
isShowDraw: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
try {
|
||||
const userInfo = getItem("deptId")[0].deptCode;
|
||||
} catch (error) {}
|
||||
let map;
|
||||
let layer;
|
||||
onMounted(() => {
|
||||
emitter.on("followUp", (res) => {
|
||||
let box = document.getElementsByClassName("changeMap_box");
|
||||
if (!box) return;
|
||||
box[0].style.right = !res ? "4px" : "398px";
|
||||
box[0].style.transition = "0.5s";
|
||||
});
|
||||
map = new EliMap({
|
||||
id: props.mapid,
|
||||
crs: "EGSP:4326",
|
||||
style: {
|
||||
glyphs: "/fonts/{fontstack}/{range}.pbf",
|
||||
center: [104.76944000298249, 29.32785788936213],
|
||||
zoom: 6,
|
||||
sources: {
|
||||
TDT_SS: {
|
||||
type: "raster",
|
||||
tiles: [
|
||||
window.location.origin +
|
||||
"/restcloud/pgis/api/map/services/scmap-sl-ss/wmts/1.0.0/GetTile?layer=scmap&style=default&tilematrixset=ChinaPublicServicesCGCS2000_snzsllayers&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix={z}&TileRow={y}&TileCol={x}"
|
||||
],
|
||||
tileSize: 256
|
||||
},
|
||||
TDT_SL: {
|
||||
type: "raster",
|
||||
tiles: [
|
||||
window.location.origin +
|
||||
"/restcloud/pgis/api/map/sl?layer=scmap&style=default&tilematrixset=ChinaPublicServicesCGCS2000_snzsllayers&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix={z}&TileRow={y}&TileCol={x}"
|
||||
],
|
||||
tileSize: 256
|
||||
},
|
||||
TDT_ROAD_SOURCES: {
|
||||
type: "raster",
|
||||
tiles: ["http://80.2.22.218:9099/sc_map_road/{z}/{y}/{x}.png"],
|
||||
tileSize: 256
|
||||
},
|
||||
TDT_POI_SOURCES: {
|
||||
type: "raster",
|
||||
tiles: ["http://80.2.22.218:9099/sc_map_poi/{z}/{y}/{x}.png"],
|
||||
tileSize: 256
|
||||
},
|
||||
TDT_TITLE_SOURCES: {
|
||||
type: "raster",
|
||||
tiles: ["http://80.2.22.218:9099/sc_map_bg/{z}/{y}/{x}.png"],
|
||||
tileSize: 256
|
||||
}
|
||||
},
|
||||
layers: [
|
||||
{
|
||||
type: "background",
|
||||
id: "background",
|
||||
paint: {
|
||||
"background-color": "#f0f8ff"
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "TDT_MAP_SS",
|
||||
type: "raster",
|
||||
source: "TDT_SS"
|
||||
}
|
||||
]
|
||||
},
|
||||
transformRequest: (url) => {
|
||||
//电子地图
|
||||
if (url.indexOf("map/sl") != -1) {
|
||||
return setMapToken(url, "ecc71965-3414-41e9-836c-195ca61d2d4d");
|
||||
}
|
||||
//四川省深色电子地图
|
||||
if (url.indexOf("scmap-sl-ss") != -1) {
|
||||
return setMapToken(url, "8f211be3-a1ef-4fe5-85ad-801bc842f62b");
|
||||
}
|
||||
//路况
|
||||
if (url.indexOf("mvt") != -1) {
|
||||
return setMapToken(url, "be47ee81-040d-43b4-b7f9-9dc735735272");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
window.map = map;
|
||||
|
||||
map.mapboxGLMap.on("load", () => {
|
||||
add(); // 路况
|
||||
zoomTarget.value = map.mapboxGLMap.getZoom();
|
||||
});
|
||||
mapUtil.value = new MapUtil(map);
|
||||
|
||||
mapUtil.value.Drawplot(); //初始化加载绘制工具
|
||||
|
||||
// 设置地图中心点及图层
|
||||
emitter.on("setMapCenter", (res) => {
|
||||
mapUtil.value.setMapCenter(res.location, res.zoomLevel);
|
||||
});
|
||||
emitter.on("removePlot", (flag) => {
|
||||
mapUtil.value.removePlot(flag);
|
||||
});
|
||||
// 撒点
|
||||
emitter.on("addPointArea", (obj) => {
|
||||
mapUtil.value.makerSki(obj);
|
||||
});
|
||||
// 鼠标滑过提示文字的点位
|
||||
emitter.on("showPoint", (obj) => {
|
||||
mapUtil.value.showPoint(obj);
|
||||
});
|
||||
// 清除所有
|
||||
emitter.on("removeAll", (res) => {
|
||||
mapUtil.value.removeAll(res);
|
||||
});
|
||||
// 清除某个覆盖物
|
||||
emitter.on("deletePointArea", (res) => {
|
||||
mapUtil.value.removeElement(res);
|
||||
});
|
||||
// 清除某个覆盖物的单个
|
||||
emitter.on("deletePointAreaOne", (obj) => {
|
||||
mapUtil.value.removeElementOne(obj.flag, obj.id);
|
||||
});
|
||||
// 绘制图形 - 回显区域
|
||||
emitter.on("drawShape", (res) => {
|
||||
mapUtil.value.plot(res, resFun);
|
||||
});
|
||||
// 回显图形
|
||||
emitter.on("echoPlane", (res) => {
|
||||
mapUtil.value.echoPlane(res);
|
||||
});
|
||||
//移除绘制区域
|
||||
emitter.on("removeEara", (flag) => {
|
||||
mapUtil.value.removeEara(flag);
|
||||
});
|
||||
// 回显线
|
||||
emitter.on("echoLine", (res) => {
|
||||
mapUtil.value.createLine(res, res.flag);
|
||||
});
|
||||
//创建边界面（geojson）
|
||||
emitter.on("setBoundarys", (res) => {
|
||||
mapUtil.value.createBoundarys(res);
|
||||
});
|
||||
// 移除边界
|
||||
emitter.on("removeBj", (res) => {
|
||||
mapUtil.value.removeBj(res);
|
||||
});
|
||||
//创建线（geojson）
|
||||
emitter.on("setBoundaryLine", (res) => {
|
||||
mapUtil.value.createBoundarysLine(res);
|
||||
});
|
||||
// 轨迹回放
|
||||
emitter.on("drawLineAnimation", (res) => {
|
||||
mapUtil.value.displayLineAnimation(res);
|
||||
});
|
||||
// 轨迹跟踪
|
||||
emitter.on("trackAnimation", (res) => {
|
||||
mapUtil.value.trackAnimationAnimation(res.coords, res.isClear);
|
||||
});
|
||||
// 聚合撒点
|
||||
emitter.on("addPoint", (obj) => {
|
||||
mapUtil.value.aggregateScatteringPoint(obj);
|
||||
});
|
||||
// 热力图显示
|
||||
emitter.on("thermodynamicChart", (res) => {
|
||||
mapUtil.value.showHeatDrawing(res);
|
||||
});
|
||||
// 扩散圆
|
||||
emitter.on("diffusionCircle", (res) => {
|
||||
mapUtil.value.diffusionCircle(res);
|
||||
});
|
||||
//自定义撒点(闪动效果)
|
||||
emitter.on("SsCircle", (res) => {
|
||||
mapUtil.value.makerZdy(res);
|
||||
});
|
||||
//删除自定义点位
|
||||
emitter.on("ClearssCircle", (res) => {
|
||||
mapUtil.value.clearmakerZdy(res);
|
||||
});
|
||||
// 获取当前地图中心点
|
||||
emitter.on("getCurrentCenter", (res) => {
|
||||
let centerPoint = map.mapboxGLMap.getCenter();
|
||||
let coords = [centerPoint.lng, centerPoint.lat];
|
||||
emitter.emit("getcentercoord", coords);
|
||||
});
|
||||
csbj();
|
||||
});
|
||||
|
||||
// 路况
|
||||
const add = () => {
|
||||
layer = map.addMvtLayer({
|
||||
url:
|
||||
window.location.origin +
|
||||
"/restcloud/pgis/api/mvt/road/condition/{z}/{x}/{y}",
|
||||
sourceLayer: "mvt",
|
||||
layer: "line",
|
||||
style: {
|
||||
paint: {
|
||||
// state:道路路段交通情况（1畅通 2缓慢 3拥堵 4极度拥堵 5无数据）
|
||||
"line-color": [
|
||||
"match",
|
||||
["get", "state"],
|
||||
1,
|
||||
"#53FF2B",
|
||||
2,
|
||||
"#FFEA47",
|
||||
3,
|
||||
"#FF5627",
|
||||
4,
|
||||
"#FF1200",
|
||||
5,
|
||||
"#999999",
|
||||
"#53FF2B"
|
||||
],
|
||||
"line-width": 3
|
||||
},
|
||||
layout: {
|
||||
"line-join": "miter",
|
||||
"line-cap": "round"
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//初始边界
|
||||
const csbj = () => {
|
||||
let data = zgBj.default;
|
||||
setTimeout(() => {
|
||||
mapUtil.value.createBoundarys({ data });
|
||||
}, 2000);
|
||||
};
|
||||
const setMapToken = (url, toekn) => {
|
||||
let type = "image/png;charset=utf-8";
|
||||
if (url.indexOf("mvt") != -1) {
|
||||
let type = "application/x-protobuf";
|
||||
}
|
||||
return {
|
||||
url,
|
||||
headers: {
|
||||
"Content-Type": type,
|
||||
userToken: "",
|
||||
appToken: "",
|
||||
host: "152.9.14.26",
|
||||
"authentication-code": toekn
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
//切换地图底图
|
||||
const onMapImageChange = (val) => {
|
||||
//清除已经存在胡地图图层
|
||||
try {
|
||||
layer.destroy();
|
||||
} catch (error) {}
|
||||
if (map.mapboxGLMap.getLayer("TDT_MAP_SS"))
|
||||
map.mapboxGLMap.removeLayer("TDT_MAP_SS");
|
||||
if (map.mapboxGLMap.getLayer("TDT_MAP_SL"))
|
||||
map.mapboxGLMap.removeLayer("TDT_MAP_SL");
|
||||
if (map.mapboxGLMap.getLayer("TDT_TITLE_ID"))
|
||||
map.mapboxGLMap.removeLayer("TDT_TITLE_ID");
|
||||
if (map.mapboxGLMap.getLayer("TDT_ROAD_ID"))
|
||||
map.mapboxGLMap.removeLayer("TDT_ROAD_ID");
|
||||
if (map.mapboxGLMap.getLayer("TDT_POI_ID"))
|
||||
map.mapboxGLMap.removeLayer("TDT_POI_ID");
|
||||
//设置图层
|
||||
switch (val) {
|
||||
case 0:
|
||||
mapSetLayer("TDT_MAP_SL", "TDT_SL");
|
||||
break;
|
||||
case 1:
|
||||
mapSetLayer("TDT_MAP_SS", "TDT_SS");
|
||||
break;
|
||||
case 2:
|
||||
mapSetLayer("TDT_TITLE_ID", "TDT_TITLE_SOURCES");
|
||||
mapSetLayer("TDT_POI_ID", "TDT_POI_SOURCES");
|
||||
mapSetLayer("TDT_ROAD_ID", "TDT_ROAD_SOURCES");
|
||||
break;
|
||||
}
|
||||
add();
|
||||
};
|
||||
|
||||
//设置图层函数
|
||||
const mapSetLayer = (id, source) => {
|
||||
map.mapboxGLMap.addLayer({ id, type: "raster", source });
|
||||
};
|
||||
|
||||
//获取地图绘制的数据
|
||||
const resFun = (coord, type, flag, data) => {
|
||||
emitter.emit("coordString", {
|
||||
coord: coord,
|
||||
type: type,
|
||||
flag: flag,
|
||||
data: data
|
||||
});
|
||||
};
|
||||
|
||||
// 地图层级
|
||||
const handleZoom = (val) => {
|
||||
map.mapboxGLMap.setZoom(val);
|
||||
};
|
||||
|
||||
onUnmounted(() => {
|
||||
emitter.off("removePlot");
|
||||
emitter.off("addPointArea");
|
||||
emitter.off("removeAll");
|
||||
emitter.off("showPoint");
|
||||
emitter.off("deletePointArea");
|
||||
emitter.off("deletePointAreaOne");
|
||||
emitter.off("drawShape");
|
||||
emitter.off("echoPlane");
|
||||
emitter.off("removeEara");
|
||||
emitter.off("echoLine");
|
||||
emitter.off("addPoint");
|
||||
emitter.off("thermodynamicChart");
|
||||
emitter.off("drawLineAnimation");
|
||||
emitter.off("trackAnimation");
|
||||
emitter.off("aggregateScatteringPoint");
|
||||
emitter.off("hotmap");
|
||||
emitter.off("setBoundarys");
|
||||
emitter.off("setBoundaryLine");
|
||||
emitter.off("diffusionCircle");
|
||||
emitter.off("SsCircle");
|
||||
emitter.off("ClearssCircle");
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.changeMap_box {
|
||||
position: absolute;
|
||||
right: 398px;
|
||||
bottom: 4px;
|
||||
z-index: 9;
|
||||
.mapImageItem {
|
||||
border: 1px solid #08aae8;
|
||||
background: rgb(9, 26, 70);
|
||||
color: #fff;
|
||||
& > img {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
}
|
||||
& > div {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
top: -3px;
|
||||
}
|
||||
}
|
||||
.zoomTargetBox {
|
||||
margin-top: 10px;
|
||||
}
|
||||
::v-deep .el-input-number__decrease,
|
||||
::v-deep .el-input-number__increase {
|
||||
background: #133362;
|
||||
color: #fff;
|
||||
border: none;
|
||||
}
|
||||
::v-deep .el-input__inner {
|
||||
background: #0c1641;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,402 +0,0 @@
|
||||
<template>
|
||||
<div :id="mapid" style="width: 100%; height: 100%"></div>
|
||||
<div class="changeMap_box" v-if="props.isShow">
|
||||
<el-carousel type="card" height="75px" :autoplay="false" indicator-position="none" :initial-index="2" @change="onMapImageChange">
|
||||
<el-carousel-item>
|
||||
<div class="mapImageItem">
|
||||
<img :src="require('@/assets/images/yxt.jpg')" alt=""/>
|
||||
<div>浅色图</div>
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
<el-carousel-item>
|
||||
<div class="mapImageItem">
|
||||
<img :src="require('@/assets/images/yst.jpg')" alt=""/>
|
||||
<div>深色图</div>
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
<el-carousel-item>
|
||||
<div class="mapImageItem">
|
||||
<img :src="require('@/assets/images/yst.jpg')" alt=""/>
|
||||
<div>三合一</div>
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
<!-- 地图缩放 -->
|
||||
<div class="zoomTargetBox">
|
||||
<el-input-number :min="6" :max="17" v-model="zoomTarget" :step="1" step-strictly @change="handleZoom"></el-input-number>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import store from "@/store";
|
||||
import { ref, onMounted, onUnmounted, defineProps, nextTick } from "vue";
|
||||
import { MapUtil } from "./mapUtil";
|
||||
import * as zgBj from "./Bj/510300.json";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { getItem } from "@/utils/storage";
|
||||
const mMap = ref(null); //地图对象
|
||||
const mapUtil = ref(null); //地图工具对象
|
||||
const zoomTarget = ref(6);
|
||||
const props = defineProps({
|
||||
mapid: {
|
||||
type: String,
|
||||
default: "mapDiv"
|
||||
},
|
||||
//是否显示可以切换地图底图
|
||||
isShow: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//是否显示实时路况
|
||||
isShowMvt: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//是否显示地图层级
|
||||
isShowZoom: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//是否显示绘制控件
|
||||
isShowDraw: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
try {
|
||||
const userInfo = getItem("deptId")[0].deptCode;
|
||||
} catch (error) {}
|
||||
let map;
|
||||
let layer;
|
||||
onMounted(() => {
|
||||
emitter.on("followUp", (res) => {
|
||||
let box = document.getElementsByClassName("changeMap_box");
|
||||
if (!box) return;
|
||||
box[0].style.right = !res ? "4px" : "398px";
|
||||
box[0].style.transition = "0.5s";
|
||||
});
|
||||
const setMapToken = (url, toekn) => {
|
||||
return {
|
||||
url,
|
||||
headers: {
|
||||
"Content-Type": "application/x-protobuf",
|
||||
userToken: "",
|
||||
appToken: "",
|
||||
host: "152.9.14.26",
|
||||
"authentication-code": toekn
|
||||
}
|
||||
};
|
||||
};
|
||||
map = new EliMap({
|
||||
id: props.mapid,
|
||||
crs: "EPSG:4490",
|
||||
style: {
|
||||
glyphs: "./fonts/{fontstack}/{range}.pbf",
|
||||
center: [104.76944000298249, 29.32785788936213],
|
||||
zoom: 10,
|
||||
sources: {
|
||||
TDT_SS: {
|
||||
type: "raster",
|
||||
tiles: [
|
||||
window.location.origin + "/restcloud/pgis/api/map/services/scmap-sl-ss/wmts/1.0.0/GetTile?layer=scmap&style=default&tilematrixset=ChinaPublicServicesCGCS2000_snzsllayers&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix={z}&TileRow={y}&TileCol={x}"
|
||||
],
|
||||
tileSize: 256
|
||||
},
|
||||
TDT_SL: {
|
||||
type: "raster",
|
||||
tiles: [
|
||||
window.location.origin + "/restcloud/pgis/api/map/sl?layer=scmap&style=default&tilematrixset=ChinaPublicServicesCGCS2000_snzsllayers&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix={z}&TileRow={y}&TileCol={x}"
|
||||
],
|
||||
tileSize: 256
|
||||
},
|
||||
TDT_ROAD_SOURCES: {
|
||||
type: "raster",
|
||||
tiles: ["http://80.2.22.218:9099/sc_map_road/{z}/{y}/{x}.png"],
|
||||
tileSize: 256
|
||||
},
|
||||
TDT_POI_SOURCES: {
|
||||
type: "raster",
|
||||
tiles: ["http://80.2.22.218:9099/sc_map_poi/{z}/{y}/{x}.png"],
|
||||
tileSize: 256
|
||||
},
|
||||
TDT_TITLE_SOURCES: {
|
||||
type: "raster",
|
||||
tiles: ["http://80.2.22.218:9099/sc_map_bg/{z}/{y}/{x}.png"],
|
||||
tileSize: 256
|
||||
}
|
||||
},
|
||||
layers: [
|
||||
{
|
||||
type: "background",
|
||||
id: "background",
|
||||
paint: {
|
||||
"background-color": "#f0f8ff"
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "TDT_MAP_SS",
|
||||
type: "raster",
|
||||
source: "TDT_SS"
|
||||
}
|
||||
]
|
||||
},
|
||||
minZoom: 7,
|
||||
maxZoom: 18,
|
||||
transformRequest: (url) => {
|
||||
//电子地图
|
||||
if (url.indexOf("map/sl") != -1) {
|
||||
return setMapToken(url, "ecc71965-3414-41e9-836c-195ca61d2d4d");
|
||||
}
|
||||
//四川省深色电子地图
|
||||
if (url.indexOf("scmap-sl-ss") != -1) {
|
||||
return setMapToken(url, "8f211be3-a1ef-4fe5-85ad-801bc842f62b");
|
||||
}
|
||||
//路况
|
||||
if (url.indexOf("mvt") != -1) {
|
||||
return setMapToken(url, "be47ee81-040d-43b4-b7f9-9dc735735272");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
window.map = map;
|
||||
map.mapboxGLMap.on("load", () => {
|
||||
add();
|
||||
zoomTarget.value = map.mapboxGLMap.getZoom();
|
||||
});
|
||||
mapUtil.value = new MapUtil(map);
|
||||
mapUtil.value.Drawplot(); //初始化加载绘制工具
|
||||
// 设置地图中心点及图层
|
||||
emitter.on("setMapCenter", (res) => {
|
||||
mapUtil.value.setMapCenter(res.location, res.zoomLevel);
|
||||
});
|
||||
emitter.on("removePlot", (flag) => {
|
||||
mapUtil.value.removePlot(flag);
|
||||
});
|
||||
// 撒点
|
||||
emitter.on("addPointArea", (obj) => {
|
||||
mapUtil.value.makerSki(obj);
|
||||
});
|
||||
// 鼠标滑过提示文字的点位
|
||||
emitter.on("showPoint", (obj) => {
|
||||
mapUtil.value.showPoint(obj);
|
||||
});
|
||||
// 清除所有
|
||||
emitter.on("removeAll", (res) => {
|
||||
mapUtil.value.removeAll(res);
|
||||
});
|
||||
// 清除某个覆盖物
|
||||
emitter.on("deletePointArea", (res) => {
|
||||
mapUtil.value.removeElement(res);
|
||||
});
|
||||
// 清除某个覆盖物的单个
|
||||
emitter.on("deletePointAreaOne", (obj) => {
|
||||
mapUtil.value.removeElementOne(obj.flag, obj.id);
|
||||
});
|
||||
// 绘制图形 - 回显区域
|
||||
emitter.on("drawShape", (res) => {
|
||||
mapUtil.value.plot(res, resFun);
|
||||
});
|
||||
// 回显图形
|
||||
emitter.on("echoPlane", (res) => {
|
||||
mapUtil.value.echoPlane(res);
|
||||
});
|
||||
//移除绘制区域
|
||||
emitter.on("removeEara", (flag) => {
|
||||
mapUtil.value.removeEara(flag);
|
||||
});
|
||||
// 回显线
|
||||
emitter.on("echoLine", (res) => {
|
||||
mapUtil.value.createLine(res, res.flag);
|
||||
});
|
||||
//创建边界面（geojson）
|
||||
emitter.on("setBoundarys", (res) => {
|
||||
mapUtil.value.createBoundarys(res);
|
||||
});
|
||||
// 移除边界
|
||||
emitter.on("removeBj", (res) => {
|
||||
mapUtil.value.removeBj(res);
|
||||
});
|
||||
//创建线（geojson）
|
||||
emitter.on("setBoundaryLine", (res) => {
|
||||
mapUtil.value.createBoundarysLine(res);
|
||||
});
|
||||
// 轨迹回放
|
||||
emitter.on("drawLineAnimation", (res) => {
|
||||
mapUtil.value.displayLineAnimation(res);
|
||||
});
|
||||
|
||||
// 聚合撒点
|
||||
emitter.on("addPoint", (obj) => {
|
||||
mapUtil.value.aggregateScatteringPoint(obj);
|
||||
});
|
||||
// 热力图显示
|
||||
emitter.on("thermodynamicChart", (res) => {
|
||||
mapUtil.value.showHeatDrawing(res);
|
||||
});
|
||||
// 扩散圆
|
||||
emitter.on("diffusionCircle", (res) => {
|
||||
mapUtil.value.diffusionCircle(res);
|
||||
});
|
||||
|
||||
//删除自定义点位
|
||||
emitter.on("ClearssCircle", (res) => {
|
||||
mapUtil.value.clearmakerZdy(res);
|
||||
});
|
||||
// 获取当前地图中心点
|
||||
emitter.on("getCurrentCenter", (res) => {
|
||||
let centerPoint = map.mapboxGLMap.getCenter();
|
||||
let coords = [centerPoint.lng, centerPoint.lat];
|
||||
emitter.emit("getcentercoord", coords);
|
||||
});
|
||||
hendleEare(); // 获取边界上图
|
||||
});
|
||||
|
||||
//获取地图绘制的数据
|
||||
const resFun = (coord, type, flag, data) => {
|
||||
emitter.emit("coordString", { coord: coord, type: type, flag: flag, data: data });
|
||||
};
|
||||
|
||||
// 地图层级
|
||||
const handleZoom = (val) => {
|
||||
map.mapboxGLMap.setZoom(val);
|
||||
};
|
||||
|
||||
// 路况
|
||||
const add = () => {
|
||||
layer = map.addMvtLayer({
|
||||
url: window.location.origin + "/restcloud/pgis/api/mvt/road/condition/{z}/{x}/{y}",
|
||||
sourceLayer: "mvt",
|
||||
layer: "line",
|
||||
style: {
|
||||
paint: {
|
||||
// state:道路路段交通情况（1畅通 2缓慢 3拥堵 4极度拥堵 5无数据）
|
||||
"line-color": [
|
||||
"match",
|
||||
["get", "state"],
|
||||
1,
|
||||
"#53FF2B",
|
||||
2,
|
||||
"#FFEA47",
|
||||
3,
|
||||
"#FF5627",
|
||||
4,
|
||||
"#FF1200",
|
||||
5,
|
||||
"#999999",
|
||||
"#53FF2B"
|
||||
],
|
||||
"line-width": 3
|
||||
},
|
||||
layout: {
|
||||
"line-join": "miter",
|
||||
"line-cap": "round"
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//切换地图底图
|
||||
const onMapImageChange = (val) => {
|
||||
try {
|
||||
layer.destroy();
|
||||
} catch (error) {}
|
||||
//清除已经存在胡地图图层
|
||||
if (map.mapboxGLMap.getLayer("TDT_MAP_SS")) map.mapboxGLMap.removeLayer("TDT_MAP_SS");
|
||||
if (map.mapboxGLMap.getLayer("TDT_MAP_SL")) map.mapboxGLMap.removeLayer("TDT_MAP_SL");
|
||||
if (map.mapboxGLMap.getLayer("TDT_TITLE_ID")) map.mapboxGLMap.removeLayer("TDT_TITLE_ID");
|
||||
if (map.mapboxGLMap.getLayer("TDT_ROAD_ID")) map.mapboxGLMap.removeLayer("TDT_ROAD_ID");
|
||||
if (map.mapboxGLMap.getLayer("TDT_POI_ID")) map.mapboxGLMap.removeLayer("TDT_POI_ID");
|
||||
//设置图层
|
||||
switch (val) {
|
||||
case 0:
|
||||
mapSetLayer("TDT_MAP_SL", "TDT_SL");
|
||||
break;
|
||||
case 1:
|
||||
mapSetLayer("TDT_MAP_SS", "TDT_SS");
|
||||
break;
|
||||
case 2:
|
||||
mapSetLayer("TDT_TITLE_ID", "TDT_TITLE_SOURCES");
|
||||
mapSetLayer("TDT_POI_ID", "TDT_POI_SOURCES");
|
||||
mapSetLayer("TDT_ROAD_ID", "TDT_ROAD_SOURCES");
|
||||
break;
|
||||
}
|
||||
add();
|
||||
};
|
||||
|
||||
//设置图层函数
|
||||
const mapSetLayer = (id, source) => {
|
||||
map.mapboxGLMap.addLayer({ id, type: "raster", source });
|
||||
map.mapboxGLMap.moveLayer("BoundarysMap",undefined)
|
||||
};
|
||||
|
||||
// 获取边界上图
|
||||
const hendleEare = () => {
|
||||
let data = zgBj.default;
|
||||
setTimeout(() => { mapUtil.value.createBoundarys({ data,flag:'BjMap' }); }, 2000);
|
||||
};
|
||||
|
||||
onUnmounted(() => {
|
||||
emitter.off("removePlot");
|
||||
emitter.off("addPointArea");
|
||||
emitter.off("removeAll");
|
||||
emitter.off("showPoint");
|
||||
emitter.off("deletePointArea");
|
||||
emitter.off("deletePointAreaOne");
|
||||
emitter.off("drawShape");
|
||||
emitter.off("echoPlane");
|
||||
emitter.off("removeEara");
|
||||
emitter.off("echoLine");
|
||||
emitter.off("addPoint");
|
||||
emitter.off("thermodynamicChart");
|
||||
emitter.off("drawLineAnimation");
|
||||
emitter.off("trackAnimation");
|
||||
emitter.off("aggregateScatteringPoint");
|
||||
emitter.off("hotmap");
|
||||
emitter.off("setBoundarys");
|
||||
emitter.off("setBoundaryLine");
|
||||
emitter.off("diffusionCircle");
|
||||
emitter.off("SsCircle");
|
||||
emitter.off("ClearssCircle");
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.changeMap_box {
|
||||
position: absolute;
|
||||
right: 398px;
|
||||
bottom: 4px;
|
||||
z-index: 9;
|
||||
.mapImageItem {
|
||||
border: 1px solid #08aae8;
|
||||
background: rgb(9, 26, 70);
|
||||
color: #fff;
|
||||
& > img {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
}
|
||||
& > div {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
top: -3px;
|
||||
}
|
||||
}
|
||||
.zoomTargetBox {
|
||||
margin-top: 10px;
|
||||
}
|
||||
::v-deep .el-input-number__decrease,
|
||||
::v-deep .el-input-number__increase {
|
||||
background: #133362;
|
||||
color: #fff;
|
||||
border: none;
|
||||
}
|
||||
::v-deep .el-input__inner {
|
||||
background: #0c1641;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,824 +0,0 @@
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
|
||||
export function MapUtil(map) {
|
||||
let _that = this;
|
||||
_that.mMap = map; //地图对象
|
||||
_that.markerClusterers = null; //聚合图层对象
|
||||
_that.flagSircle = []; //自定义HTML
|
||||
_that._self = {}; //单一图层对象
|
||||
_that._CustomDraw = null; //自定义绘图
|
||||
_that.trckjectory = {}; //轨迹跟踪
|
||||
_that.polygonGeo = null; //边界
|
||||
_that.polygonGeoLine = null; //geojson 线
|
||||
_that.idsBox = {} //存放id的容器（需要某个标记单个删除的时候存储）
|
||||
|
||||
/**
|
||||
* 设置地图中心点以
|
||||
* @param {*} location 中心坐标 [jd,wd]
|
||||
* @param {*} zoomLevel 层级 10
|
||||
*/
|
||||
MapUtil.prototype.setMapCenter = (location, zoomLevel) => {
|
||||
map.mapboxGLMap.setCenter(location);
|
||||
map.mapboxGLMap.setZoom(zoomLevel);
|
||||
};
|
||||
|
||||
/**
|
||||
* 撒点.鼠标滑动展示内容
|
||||
* @param {*} coords 坐标 geojson
|
||||
* @param {*} icon 图标
|
||||
* @param {*} flag 标识
|
||||
*/
|
||||
MapUtil.prototype.showPoint = (res) => {
|
||||
let {
|
||||
coords,
|
||||
icon,
|
||||
flag,
|
||||
iconH
|
||||
} = res
|
||||
if (!coords) return;
|
||||
if (!_that._self[flag]) _that._self[flag] = [];
|
||||
let pointList = coords.map((it, index) => {
|
||||
let text = it.kfdMc || it.wzBc || it.gajgmc;
|
||||
let obj = {
|
||||
position: [it.jd, it.wd],
|
||||
userData: {
|
||||
deviceSn: 'text' + index,
|
||||
area: text
|
||||
},
|
||||
id: it.id,
|
||||
text: text,
|
||||
data: it
|
||||
}
|
||||
if (it.jd && it.wd) return obj;
|
||||
});
|
||||
|
||||
const point = map.createdPoint(pointList, {
|
||||
image: icon, //对应上面的图片名称
|
||||
scale: 0.6,
|
||||
highlightImage: iconH ? iconH : icon, //高亮图标
|
||||
labelOption: {
|
||||
pixelOffset: [0, -3],
|
||||
allShow: false,
|
||||
fontSize: '18px',
|
||||
fontWeight: 600,
|
||||
fontColor: '#18f439'
|
||||
}
|
||||
})
|
||||
_that._self[flag].push(point)
|
||||
|
||||
point.addEventListener("click", (val) => {
|
||||
let data = val.data ? JSON.parse(val.data) : {};
|
||||
// point.highlight(data.id) //高亮展示选中的点位
|
||||
_that.openInfoDetail(flag, data) //点击打开详情
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 撒点
|
||||
* @param {*} coords 坐标 geojson
|
||||
* @param {*} icon 图标
|
||||
* @param {*} flag 标识
|
||||
* @param {*} isBounds 点击图标是否变大方法
|
||||
* @param {*} showTitle 是否展示标题
|
||||
*/
|
||||
|
||||
MapUtil.prototype.makerSki = (res) => {
|
||||
let {
|
||||
coords,
|
||||
icon,
|
||||
flag,
|
||||
isBounds,
|
||||
showTitle
|
||||
} = res
|
||||
if (!coords) return;
|
||||
if (!_that._self[flag]) _that._self[flag] = []; //存储地图标识的容器
|
||||
if (!_that.idsBox[flag]) _that.idsBox[flag] = []; //存储id的容器
|
||||
if (flag == 'rx') {
|
||||
_that.handlePolice(coords, icon, flag, showTitle)
|
||||
} else {
|
||||
coords.forEach(item => {
|
||||
let el = document.createElement("img");
|
||||
el.src = item.icon || icon;
|
||||
el.style.width = flag == 'kfd' ? '32px' : "25px";
|
||||
if (flag.includes('jczMap_')) el.style.width = '45px';
|
||||
if (flag.includes('sppc_ydjw')) el.style.width = '35px';
|
||||
if(!flag == 'qjss'){
|
||||
if (showTitle) _that.makerShowTitle(item, [item.jd, item.wd], flag) //展示标题
|
||||
}
|
||||
const marker = map.Marker(el, [item.jd, item.wd], {
|
||||
anchor: 'bottom',
|
||||
offset: [0, 0]
|
||||
})
|
||||
el.addEventListener("click", () => {
|
||||
_that.openInfoDetail(flag, item) //点击打开详情
|
||||
})
|
||||
_that._self[flag].push(marker)
|
||||
_that.idsBox[flag].push(item.id)
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 警力处理展示
|
||||
MapUtil.prototype.handlePolice = (coords, icon, flag, showTitle) => {
|
||||
// 01-大型车辆-DXCL， 02-小型车辆=XXCL，03-摩托车-MTC，04-其他车辆-QTCL，05-重型车辆-ZXCL，06-风控车-FKC，07-巡逻车-XLC，08-装甲车-ZJC
|
||||
coords.forEach(item => {
|
||||
let el = document.createElement("img");
|
||||
let jcIcon = require(`@/assets/point/police-car-bx.png`);
|
||||
switch (item.lx) {
|
||||
case '01': // 特警
|
||||
jcIcon = require(`@/assets/point/specialPolice.png`);
|
||||
break;
|
||||
case '02': // 交警
|
||||
jcIcon = require(`@/assets/point/trafficPolice.png`);
|
||||
break;
|
||||
case '03': // 派出所民警
|
||||
jcIcon = require(`@/assets/point/peoplePolice.png`);
|
||||
break;
|
||||
default: // 默认图标
|
||||
jcIcon = require(`@/assets/point/specialPolice.png`);
|
||||
break;
|
||||
}
|
||||
if (item.zzlx == 1) jcIcon = require(`@/assets/point/by.png`); //便衣
|
||||
el.src = jcIcon;
|
||||
if (showTitle) _that.makerShowTitle(item, [item.jd, item.wd], flag) //展示标题
|
||||
_that.shouIcon(item, [item.jd, item.wd]); // 展示装备图标
|
||||
|
||||
const marker = map.Marker(el, [item.jd, item.wd], {
|
||||
anchor: 'bottom',
|
||||
offset: [0, 0]
|
||||
})
|
||||
el.addEventListener("click", () => {
|
||||
_that.openInfoDetail(flag, item) //点击打开详情
|
||||
})
|
||||
_that._self[flag].push(marker)
|
||||
_that.idsBox[flag].push(item.id)
|
||||
});
|
||||
}
|
||||
|
||||
// 信息框展示
|
||||
MapUtil.prototype.makerShowTitle = (item, points, flag) => {
|
||||
let flagT = flag + 'Title';
|
||||
if (!_that._self[flagT]) _that._self[flagT] = [];
|
||||
// 展示名字
|
||||
let textTitle = item.jzMc ? item.jzMc : item.fzrXm + '警组';
|
||||
if (flag == 'sbwz_car' || flag == 'sbwz_sb' || flag.includes("sppc_ydjw")) textTitle = item.sbmc;
|
||||
// 设置样式
|
||||
const el = document.createElement('div');
|
||||
el.className = 'makerTitle';
|
||||
if (flag == 'sbwz_car' || flag == 'sbwz_sb' || flag.includes("sppc_ydjw")) el.className = 'makerTitlezb';
|
||||
if (flag == 'rx') {
|
||||
if (item.xfzt == '0') el.classList.add('makerTitleLine');
|
||||
else el.classList.add('makerTitleUnLine');
|
||||
}
|
||||
el.innerHTML = textTitle;
|
||||
// 渲染
|
||||
const marker = map.Marker(el, points, {
|
||||
anchor: 'bottom',
|
||||
offset: [0, -50]
|
||||
})
|
||||
_that._self[flagT].push(marker)
|
||||
}
|
||||
|
||||
/**
|
||||
* 点击后图标放大
|
||||
* @param {*} item point 的对象
|
||||
* @param {*} icon 图标图片
|
||||
*/
|
||||
MapUtil.prototype.setLargeIcon = (item, icon) => {
|
||||
if (!item) return;
|
||||
if (item.jd && item.wd) {
|
||||
let el = document.createElement("img");
|
||||
el.src = icon;
|
||||
el.style.width = "30px"
|
||||
const point = map.Marker(el, [item.jd, item.wd], {
|
||||
anchor: 'bottom'
|
||||
})
|
||||
if (!_that._self["largeIcon"]) _that._self["largeIcon"] = []
|
||||
_that._self["largeIcon"].push(point);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 装备图标
|
||||
* @param {点位数据} data
|
||||
* @param {点} point
|
||||
*/
|
||||
MapUtil.prototype.shouIcon = (data, point) => {
|
||||
if (!_that._self.gpsZb) _that._self.gpsZb = []
|
||||
var qxIcon = require(`@/assets/point/qx.png`); //qixie
|
||||
var zfjlyIcon = require(`@/assets/point/interphone.png`); // 对讲机
|
||||
var clIcon = require(`@/assets/point/car.png`); // 车辆
|
||||
let jyqx = typeof data.jyqx == "string" ? JSON.parse(data.jyqx) : data.jyqx ? data.jyqx : [];
|
||||
let txzb = typeof data.txzb == "string" ? JSON.parse(data.txzb) : data.txzb ? data.txzb : [];
|
||||
let pbcl = typeof data.pbcl == "string" ? JSON.parse(data.pbcl) : data.pbcl ? data.pbcl : [];
|
||||
let list = []
|
||||
let cl = (pbcl && pbcl.length > 0) ? true : false; // 车辆
|
||||
let zb = (txzb && txzb.length > 0) ? true : false; // 智能装备
|
||||
let qx = (jyqx && jyqx.length > 0) ? true : false; // 警用器械
|
||||
if (zb) {
|
||||
let el = document.createElement("img");
|
||||
el.style.width = "15px"
|
||||
el.src = zfjlyIcon;
|
||||
const makerZb = map.Marker(el, point, {
|
||||
anchor: 'bottom',
|
||||
offset: [20, -26]
|
||||
})
|
||||
list.push(makerZb)
|
||||
}
|
||||
if (qx) {
|
||||
let elqx = document.createElement("img");
|
||||
elqx.style.width = "15px"
|
||||
elqx.src = qxIcon;
|
||||
const makerQx = map.Marker(elqx, point, {
|
||||
anchor: 'bottom',
|
||||
offset: [20, -10]
|
||||
})
|
||||
list.push(makerQx)
|
||||
}
|
||||
if (cl) {
|
||||
let elcl = document.createElement("img");
|
||||
elcl.style.width = "20px"
|
||||
elcl.src = clIcon;
|
||||
const makerCl = map.Marker(elcl, point, {
|
||||
anchor: 'bottom',
|
||||
offset: [20, 2]
|
||||
})
|
||||
list.push(makerCl)
|
||||
}
|
||||
_that._self.gpsZb[data.id] = list
|
||||
}
|
||||
|
||||
/**扩散圆
|
||||
* @param coords:[jd,wd]
|
||||
*/
|
||||
MapUtil.prototype.diffusionCircle = (obj) => {
|
||||
let { coords, flag, isClear,radius } = obj
|
||||
if (!_that._self[flag]) _that._self[flag] = null
|
||||
console.log(_that._self[flag],'=====_that._self[flag]')
|
||||
if (isClear && _that._self[flag]) _that._self[flag].destroy() //destroy销毁，show(false) 移除
|
||||
let data = [{ position: coords }]
|
||||
_that._self[flag] = map.DiffuseCircle(data, {
|
||||
radius: radius || 1,
|
||||
color: 'rgba(81,217,254)', //扫描扇形的颜色，必须是十六进制或者rgb
|
||||
duration: 30, //圆环与上一个圆环出现的间隔时间。配合speed参数可以调整圆圈的数量
|
||||
speed: 4 //圆环移动速度
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 聚合撒点
|
||||
* @param {*} coords 点位数据 geojson lng lat
|
||||
* @param {*} icon 点位图
|
||||
*/
|
||||
MapUtil.prototype.aggregateScatteringPoint = (obj) => {
|
||||
let { coords, icon, flag, isclear, scale } = obj;
|
||||
let points = coords.map(item => {
|
||||
item.lng = item.jd;
|
||||
item.lat = item.wd;
|
||||
return item
|
||||
})
|
||||
if (!_that._self[flag]) _that._self[flag] = [];
|
||||
if (isclear) _that.removeElement(flag) //移除聚合
|
||||
let maker = map.clusterLayer(points, {
|
||||
id: flag,
|
||||
size: 18,
|
||||
pixelRange: 60,
|
||||
gradient: {'1': '#00BFFF','10': '#008000','100': '#FFA500','1000': '#FF0000'}, //可以自定义图片,把颜色换成图片地址
|
||||
fontSize: 12,
|
||||
fontColor: '#fff',
|
||||
style: 'spiral',
|
||||
image: icon,
|
||||
scale: scale ? scale : 1,
|
||||
// highlightImage:icon,
|
||||
fontFamily: ['Microsoft YaHei']
|
||||
})
|
||||
_that._self[flag].push(maker)
|
||||
|
||||
|
||||
// 聚合的点击一个
|
||||
maker.addEventListener("click", (val) => {
|
||||
_that.openInfoDetail(flag, [val]) //点击打开详情
|
||||
})
|
||||
// 聚合的多个
|
||||
maker.addEventListener("clusterClick", (val) => {
|
||||
_that.openInfoDetail(flag, val) //点击打开详情
|
||||
})
|
||||
};
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 热力图
|
||||
* @param {*} coords 数组
|
||||
*/
|
||||
MapUtil.prototype.showHeatDrawing = (res) => {
|
||||
let { coords, flag, isclear, color} = res;
|
||||
if (!_that._self[flag]) _that._self[flag] = [];
|
||||
if (isclear) _that.removeElement(flag) //清除热力
|
||||
let data = {
|
||||
type: 'FeatureCollection',
|
||||
features: []
|
||||
}
|
||||
for (let index = 0; index < coords.length; index++) {
|
||||
const item = coords[index];
|
||||
let jd = item.lng || item.jd;
|
||||
let wd = item.lat || item.wd;
|
||||
let mag = item.count <= 10 ? 1.4 : (item.count > 10 && item.count <= 50) ? 1.6 : 1.9;
|
||||
let obj = {
|
||||
properties: {
|
||||
mag
|
||||
},
|
||||
type: 'Feature',
|
||||
geometry: {
|
||||
type: 'Point',
|
||||
coordinates: [jd, wd, 0.1]
|
||||
}
|
||||
}
|
||||
data.features.push(obj)
|
||||
}
|
||||
let colors = {
|
||||
'0': 'rgba(23,102,172,0)',
|
||||
'0.5': 'rgb(209,229,240)',
|
||||
'1': 'rgb(178,24,43)'
|
||||
}
|
||||
if (color) colors = {
|
||||
'0': color[0],
|
||||
'0.5': color[1],
|
||||
'1': color[2]
|
||||
}
|
||||
let heartmap = map.HeatMap(data, {
|
||||
colors
|
||||
})
|
||||
_that._self[flag].push(heartmap)
|
||||
};
|
||||
|
||||
|
||||
// 清除所有
|
||||
MapUtil.prototype.removeAll = () => {
|
||||
for(let key in _that._self){
|
||||
if(key != 'rx' && key !='gpsZb' && !key.includes('Title')){
|
||||
let list = _that._self[key]
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
const el = list[i];
|
||||
if(el) el.destroy() //destory()销毁 , show(false) false:隐藏 true ：展示
|
||||
}
|
||||
_that._self[key] = [];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除图层要素
|
||||
* @param {*} layer 唯一标识
|
||||
*/
|
||||
MapUtil.prototype.removeElement = (layer) => {
|
||||
//警力装备
|
||||
if (layer == 'gpsZb') {
|
||||
for (let key in _that._self.gpsZb) {
|
||||
let item = _that._self.gpsZb[key]
|
||||
if (item && item.length > 0) {
|
||||
for (let child in item) { item[child].destroy() }
|
||||
_that._self.gpsZb[key] = []
|
||||
}
|
||||
}
|
||||
}
|
||||
if (layer == 'rx') _that.idsBox[layer] = [];
|
||||
// 其他图层
|
||||
if (!_that._self[layer]) return false;
|
||||
|
||||
if (layer !== 'gpsZb') {
|
||||
for (let i = 0; i < _that._self[layer].length; i++) {
|
||||
const el = _that._self[layer][i];
|
||||
el.destroy() //destory()销毁 , show(false) false:隐藏 true ：展示
|
||||
}
|
||||
_that._self[layer] = [];
|
||||
|
||||
// d带标题的撒点
|
||||
let flagT = layer + 'Title';
|
||||
if (!_that._self[flagT]) return false;
|
||||
for (let i = 0; i < _that._self[flagT].length; i++) {
|
||||
const el = _that._self[flagT][i];
|
||||
el.destroy() //destory()销毁 , show(false) false:隐藏 true ：展示
|
||||
}
|
||||
_that._self[flagT] = []
|
||||
}
|
||||
};
|
||||
/**
|
||||
* 删除图层的某个要素
|
||||
* @param {*} layer 唯一标识
|
||||
*/
|
||||
MapUtil.prototype.removeElementOne = (layer, id) => {
|
||||
if (!_that.idsBox[layer]) return false;
|
||||
let list = _that.idsBox[layer];
|
||||
list.forEach((el, index) => {
|
||||
if (el == id) {
|
||||
_that.idsBox[layer].splice(index, 1);
|
||||
_that._self[layer][index].destroy()
|
||||
_that._self[layer].splice(index, 1)
|
||||
if (layer == 'rx') {
|
||||
let flagT = layer + 'Title';
|
||||
_that._self[flagT][index].destroy()
|
||||
_that._self[flagT].splice(index, 1)
|
||||
_that.removeGpsZbOverlayById(id) //删除图标
|
||||
}
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
// 删除图标装备
|
||||
MapUtil.prototype.removeGpsZbOverlayById = (id) => {
|
||||
if (_that._self.gpsZb[id]) {
|
||||
try {
|
||||
let info = _that._self.gpsZb[id]
|
||||
if (info) {
|
||||
info.forEach(element => {
|
||||
element.destroy()
|
||||
});
|
||||
delete _that._self.gpsZb[id]
|
||||
}
|
||||
} catch (err) {}
|
||||
}
|
||||
}
|
||||
|
||||
// 绘制数据的初始化
|
||||
MapUtil.prototype.Drawplot = (color) => {
|
||||
const {
|
||||
point,
|
||||
line,
|
||||
polygon,
|
||||
circle,
|
||||
rectangle,
|
||||
geoJson,
|
||||
remove,
|
||||
enableEdit
|
||||
} = map.draw({
|
||||
lineWidth: 2,
|
||||
lineColor: 'rgba(233,168,32,1)',
|
||||
fillColor: 'rgba(233,168,32,0.5)',
|
||||
color: 'rgba(233,168,32,1)',
|
||||
pixelSzie: 0,
|
||||
})
|
||||
_that._CustomDraw = {
|
||||
point,
|
||||
line,
|
||||
polygon,
|
||||
circle,
|
||||
rectangle,
|
||||
geoJson,
|
||||
remove,
|
||||
enableEdit
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 绘制工具
|
||||
* @param {*} type 绘制形状
|
||||
* (point 点, line 线, circle 圆, polygon 多边形, rectangle 矩形) ,
|
||||
* geoJson:根据geojson回显图
|
||||
*/
|
||||
MapUtil.prototype.plot = (res, resFun) => {
|
||||
let { flag, color, linecolor, type, coords } = res
|
||||
if (!_that._self[flag]) _that._self[flag] = [];
|
||||
if (res.isclear) _that.removePlot(flag); //移除绘制工具
|
||||
if (res.isclear && res.type == 'polygon') _that.removeEara(flag); //移除回显的面
|
||||
if (res.isclear && res.type == 'line') _that.removeElement(flag); //移除回显的线条
|
||||
switch (type) {
|
||||
case 'point':
|
||||
_that._CustomDraw.point((val) => {
|
||||
_that.handlePlot(val, type, flag, resFun)
|
||||
})
|
||||
break;
|
||||
case 'rectangle':
|
||||
_that._CustomDraw.rectangle((val) => {
|
||||
_that.handlePlot(val, type, flag, resFun)
|
||||
})
|
||||
break;
|
||||
case 'circle':
|
||||
_that._CustomDraw.circle((val) => {
|
||||
_that.handlePlot(val, type, flag, resFun)
|
||||
})
|
||||
break;
|
||||
case 'polygon':
|
||||
_that._CustomDraw.polygon((val) => {
|
||||
_that.handlePlot(val, type, flag, resFun)
|
||||
}, {
|
||||
fillColor: color || 'rgba(233,168,32,0.5)',
|
||||
lineColor: linecolor || 'rgba(233,168,32,1)',
|
||||
})
|
||||
break;
|
||||
case 'line':
|
||||
_that._CustomDraw.line((val) => {
|
||||
_that.handlePlot(val, type, flag, resFun)
|
||||
})
|
||||
break;
|
||||
case 'geoJson': //返回面
|
||||
console.log(color, linecolor);
|
||||
let json = {
|
||||
type: 'FeatureCollection',
|
||||
features: [{
|
||||
type: 'Feature',
|
||||
geometry: {
|
||||
type: 'Polygon',
|
||||
coordinates: coords // coords 是三维数组
|
||||
},
|
||||
id: flag,
|
||||
properties: {
|
||||
fillColor: color || 'rgba(233,168,32,1)',
|
||||
lineColor: linecolor || 'rgba(233,168,32,1)',
|
||||
}
|
||||
}],
|
||||
}
|
||||
_that._CustomDraw.geoJson(json, (data) => {
|
||||
_that.handlePlot(data, type, flag, resFun)
|
||||
})
|
||||
break;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 处理自定义数据
|
||||
* @param {*} val 返回数据
|
||||
* @param {*} type 类型
|
||||
* @param {*} flag 唯一标识
|
||||
* @param {*} resFun 回调
|
||||
*/
|
||||
MapUtil.prototype.handlePlot = (val, type, flag, resFun) => {
|
||||
_that._self[flag].push(val.id)
|
||||
let coords = val.positionData; //绘制区域
|
||||
resFun(coords, type, flag, val);
|
||||
}
|
||||
|
||||
/**
|
||||
* 移除绘制工具
|
||||
* @param {*} flag 唯一标识
|
||||
*/
|
||||
MapUtil.prototype.removePlot = (flag) => {
|
||||
if (!_that._self[flag]) return false;
|
||||
_that._self[flag].forEach(v => {
|
||||
_that._CustomDraw.remove(v)
|
||||
})
|
||||
}
|
||||
/**
|
||||
* 移除绘制面
|
||||
* @param {*} flag 唯一标识
|
||||
*/
|
||||
MapUtil.prototype.removeEara = (flag) => {
|
||||
_that._CustomDraw.remove(flag)
|
||||
_that.removePlot(flag)
|
||||
}
|
||||
/**
|
||||
* 创建线
|
||||
* @param {*} type 回显形状
|
||||
* (solid 实线, dash 虚线, FlowColor 彩虹线, RoadLine 流线
|
||||
*/
|
||||
MapUtil.prototype.createLine = (res) => {
|
||||
let {
|
||||
type,
|
||||
coords,
|
||||
isclear,
|
||||
flag
|
||||
} = res;
|
||||
// coords 是数组对象，可以同时撒多条数据
|
||||
if (!coords) return false;
|
||||
if (!_that._self[flag]) _that._self[flag] = [];
|
||||
if (isclear) _that.removeElement(flag); //移除回显的线条
|
||||
let data = coords.map((item, index) => {
|
||||
return {
|
||||
position: item.coords[0], //二维数组
|
||||
text: '',
|
||||
id: index,
|
||||
userData: {
|
||||
name: item.text
|
||||
}
|
||||
}
|
||||
})
|
||||
let style = {
|
||||
color: 'rgba(20, 237, 245,1)',
|
||||
width: 10,
|
||||
type,
|
||||
highlightColor: 'red',
|
||||
labelOption: {
|
||||
pixelOffset: [0, -1],
|
||||
allShow: false,
|
||||
type: 'text',
|
||||
fontColor: 'rgba(20, 237, 245,1)'
|
||||
}
|
||||
}
|
||||
let line = map.createLine(data, style, flag)
|
||||
_that._self[flag].push(line)
|
||||
}
|
||||
|
||||
/**
|
||||
* 回显平面- 圆 - 多边形 - 矩形
|
||||
* @param {*} type 回显形状
|
||||
* type: 'polygon', 'rectangle
|
||||
coords = [{
|
||||
position:[[[jd,wd],[jd,wd] ---]], //三维数组
|
||||
text,//展示的文字
|
||||
id, //唯一标识
|
||||
FID, //渲染颜色的标识
|
||||
userData:{} //存储数据
|
||||
}]
|
||||
|
||||
* type:circle
|
||||
coords:[jd,wd] radius:半径
|
||||
|
||||
* @param {*} text 展示的文字
|
||||
*/
|
||||
MapUtil.prototype.echoPlane = (res) => {
|
||||
let { type , coords ,fontColor,fontSize, text = '' ,radius = 0, isclear ,flag ,id = 1 , color , linecolor} = res;
|
||||
if(!coords) return;
|
||||
if(isclear) _that.removeElement(flag)
|
||||
if(!_that._self[flag]) _that._self[flag] = [];
|
||||
let color1 = color ? color : 'rgba(29,237,245,0.6)'
|
||||
let linecolor1 = linecolor ? linecolor : 'rgba(29,237,245,0.6)'
|
||||
let style = {
|
||||
color:color1,
|
||||
outLineColor:linecolor1,
|
||||
outLineWidth:2,
|
||||
highlightColor:'rgba(255,0,0,0.5)',
|
||||
labelOption:{
|
||||
pixelOffset:[0,0],
|
||||
allShow:true,
|
||||
fontColor:fontColor ? fontColor:'#ffffff',
|
||||
fontSize:fontSize?fontSize:'12px'
|
||||
}
|
||||
}
|
||||
let maker ;
|
||||
// 圆
|
||||
if(type == 'circle'){
|
||||
let params = [{ center:coords,radius, text, id }]
|
||||
maker = map.createCircle(params,style);
|
||||
}
|
||||
// 矩形
|
||||
if(type == 'rectangle') maker = map.createRectangle(coords,style);
|
||||
|
||||
// 多边形
|
||||
if(type == 'polygon') maker = map.createPolygon(coords,style);
|
||||
_that._self[flag].push(maker);
|
||||
|
||||
maker.addEventListener("click", (val) => {
|
||||
// debugger;
|
||||
if( flag == 'xfq'){
|
||||
maker.highlight(val.id) //高亮展示
|
||||
emitter.emit('showXFQinfo', val)
|
||||
if(val.id == _that.lightHeight) {
|
||||
_that.isCheck = !_that.isCheck
|
||||
if(_that.isCheck) {
|
||||
maker.highlight(0); //取消高亮展示
|
||||
emitter.emit('showXFQinfo', null)
|
||||
}else{
|
||||
emitter.emit('showXFQinfo', val)
|
||||
}
|
||||
}
|
||||
_that.lightHeight = val.id
|
||||
}
|
||||
if( flag == 'qjss'){
|
||||
_that.openInfoDetail(flag,JSON.parse(val.userData).data ) //点击打开详情
|
||||
}
|
||||
if( flag == 'zdxl_fzyc'){
|
||||
emitter.emit('showFzycInfo', {info:val,type:true})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 轨迹回放
|
||||
* @param {*} coords 轨迹坐标.二维数组[[104.03640684556253,30.7415801286654],[103.98021233220163,30.6555411499294],[103.85766040251299,30.58094579138167]]
|
||||
* @param {*} isClear 是否清除上一次的记录
|
||||
*/
|
||||
MapUtil.prototype.displayLineAnimation = (res) => {
|
||||
let { coords, isClear, flag } = res
|
||||
if (!coords) return;
|
||||
if (!_that._self[flag]) _that._self[flag] = [];
|
||||
if (isClear && _that._self[flag]) _that.removeElement(flag); //destroy 移除,start 播放,pause 暂停
|
||||
let lineString = getUUid().slice(3, 5)
|
||||
// data 有几个对象就有几条路线
|
||||
const data = [{
|
||||
position: coords,
|
||||
text: '实线',
|
||||
id: lineString,
|
||||
userData: {
|
||||
name: '测试1'
|
||||
}
|
||||
}]
|
||||
let trajectory = map.trajectoryPlayback(data, {
|
||||
image: 'images/car.png',
|
||||
width: 6,
|
||||
color: '#28F',
|
||||
isArrow: true, //是否有箭头
|
||||
arrowSize: 8,
|
||||
speed: 100,
|
||||
imageWidth: 48,
|
||||
imageHeight: 24,
|
||||
isFly: true
|
||||
})
|
||||
_that._self[flag].push(trajectory)
|
||||
|
||||
|
||||
}
|
||||
|
||||
/**geojson 创建线*/
|
||||
MapUtil.prototype.createBoundarysLine = (res) => {
|
||||
let { data } = res
|
||||
if (!data) return false;
|
||||
if (_that.polygonGeoLine) _that.polygonGeoLine.destroy()
|
||||
_that.polygonGeoLine = map.createLine(data, {
|
||||
color: 'rgba(20,237,245,1)',
|
||||
outLineColor: '#cf1010',
|
||||
width: 10,
|
||||
type: 'solid',
|
||||
highlightColor: 'red',
|
||||
labelOption: {
|
||||
pixelOffset: [0, -1],
|
||||
allShow: false,
|
||||
type: 'text',
|
||||
fontColor: '#ffffff'
|
||||
}
|
||||
})
|
||||
_that.polygonGeoLine.flyTo()
|
||||
}
|
||||
|
||||
/**geojson 创建边界*/
|
||||
MapUtil.prototype.createBoundarys = (res) => {
|
||||
let { data ,flag} = res
|
||||
if (!data) return false;
|
||||
if (_that.polygonGeo) _that.removeBj();
|
||||
_that.polygonGeo = map.createPolygon(data, {
|
||||
color: 'rgba(20,237,245,0.3)',
|
||||
outLineColor:'rgba(243,146,0,1)',
|
||||
outLineWidth:1,
|
||||
highlightColor: 'red',
|
||||
type: 'solid',
|
||||
labelOption: {
|
||||
pixelOffset: [2, 0],
|
||||
allShow: false,
|
||||
fontColor: '#ffffff'
|
||||
}
|
||||
},'BoundarysMap')
|
||||
_that.polygonGeo.flyTo()
|
||||
}
|
||||
// 移除边界
|
||||
MapUtil.prototype.removeBj = (res) => {
|
||||
_that.polygonGeo.destroy()
|
||||
}
|
||||
|
||||
// 打开详情弹窗
|
||||
// 打开详情弹窗
|
||||
MapUtil.prototype.openInfoDetail = (flag, data) => {
|
||||
switch (flag) {
|
||||
case "rx":
|
||||
emitter.emit("showJzInfo", data);
|
||||
break;
|
||||
case "gaj":
|
||||
case "pcs":
|
||||
case "jwz":
|
||||
case "xfq":
|
||||
case "kfd":
|
||||
case "zdfkd":
|
||||
console.log(data);
|
||||
|
||||
emitter.emit("showGazy", [data]);
|
||||
break;
|
||||
case "sp":
|
||||
emitter.emit("showGzy", data);
|
||||
emitter.emit("showGzyInfo", data);
|
||||
break;
|
||||
case "kk":
|
||||
emitter.emit("showGzy", data);
|
||||
break;
|
||||
case "aj":
|
||||
case "jqMap":
|
||||
emitter.emit("showAj", [data]);
|
||||
break;
|
||||
case "yj":
|
||||
case "yjMap":
|
||||
emitter.emit("showYjxq", data);
|
||||
break;
|
||||
case "jczMap_jws":
|
||||
emitter.emit("showJws", [data]);
|
||||
break;
|
||||
case "jczMap_jcz":
|
||||
emitter.emit("showJcz", [data]);
|
||||
break;
|
||||
case "zjk":
|
||||
emitter.emit("showZjk", [data]);
|
||||
|
||||
break;
|
||||
case "zyk":
|
||||
emitter.emit("showZyk", [data]);
|
||||
break;
|
||||
}
|
||||
};
|
||||
}
|
||||
// 获取uuid 作为边界图层ID
|
||||
function getUUid() {
|
||||
var list = [];
|
||||
var hexDigits = "0123456789abcdefghijklmnopqrstuvwxyz";
|
||||
for (var i = 0; i < 32; i++) {
|
||||
list[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
|
||||
}
|
||||
list[14] = "4";
|
||||
list[19] = hexDigits.substr((list[19] & 0x3) | 0x8, 1);
|
||||
list[8] = list[13] = list[18] = list[23];
|
||||
let uuid = list.join("");
|
||||
return uuid;
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
{
|
||||
"coords":"104.191712,30.332337,104.190379,30.321575,104.231962,30.315252,104.227763,30.283791,104.241479,30.268395,104.228153,30.257561,104.242864,30.244730,104.270769,30.240455,104.269092,30.219985,104.277914,30.224568,104.293406,30.209630,104.302729,30.213200,104.307097,30.202998,104.325129,30.207037,104.355347,30.194195,104.363096,30.183460,104.354874,30.185101,104.352787,30.178549,104.386214,30.163126,104.392108,30.139422,104.386563,30.134069,104.406584,30.128212,104.417883,30.110023,104.411449,30.102072,104.421724,30.093237,104.433945,30.091459,104.434490,30.102374,104.447575,30.103505,104.455815,30.090000,104.477106,30.090159,104.472787,30.079513,104.480840,30.075074,104.465410,30.062860,104.479359,30.049892,104.456587,30.050092,104.452813,30.040084,104.465165,30.035835,104.455327,30.027999,104.458818,30.019591,104.448027,29.999489,104.477911,29.990649,104.457530,29.956299,104.478816,29.947313,104.470366,29.937748,104.486035,29.924377,104.486081,29.908460,104.505562,29.900162,104.492675,29.891903,104.492992,29.877076,104.501067,29.874142,104.487466,29.868024,104.475572,29.839224,104.480389,29.823872,104.473848,29.813915,104.499239,29.808909,104.491448,29.794094,104.465447,29.790942,104.442186,29.735454,104.427166,29.742971,104.414194,29.733388,104.404817,29.736075,104.393217,29.753224,104.373968,29.744401,104.367685,29.731782,104.356188,29.739397,104.355446,29.733333,104.335661,29.730418,104.332333,29.717842,104.347244,29.712211,104.346778,29.702659,104.336663,29.700136,104.313561,29.713003,104.295611,29.673814,104.280138,29.671614,104.283271,29.663143,104.274707,29.653997,104.280570,29.652266,104.271474,29.639306,104.247799,29.635751,104.237983,29.645245,104.243843,29.650490,104.231474,29.654349,104.237800,29.660088,104.228079,29.663086,104.233011,29.673066,104.227693,29.678490,104.204520,29.666834,104.193826,29.684265,104.200269,29.695269,104.183408,29.688925,104.185530,29.712206,104.181102,29.708149,104.167587,29.719218,104.164097,29.712006,104.156209,29.719685,104.147994,29.708280,104.132691,29.711712,104.116456,29.735662,104.105234,29.739340,104.109314,29.745872,104.099019,29.750351,104.088669,29.742201,104.058084,29.781140,104.070105,29.785362,104.088526,29.816182,104.072903,29.815785,104.072469,29.829395,104.040234,29.833418,104.056118,29.857406,104.049233,29.871115,104.040958,29.865559,104.027382,29.876641,104.001555,29.876057,103.981529,29.851563,103.964863,29.857306,103.968616,29.869100,103.991537,29.880289,103.998148,29.894420,103.984192,29.887484,103.969852,29.890776,103.952945,29.917885,103.962461,29.927505,103.946054,29.965100,103.952523,29.969262,103.917956,29.980131,103.926683,29.990640,103.959824,29.983321,103.957729,29.994857,103.972654,30.001121,103.966893,30.009745,103.977840,30.029956,103.971729,30.047714,103.987262,30.074897,103.977687,30.093740,103.981558,30.102835,103.968602,30.112735,103.978708,30.128111,103.970273,30.143360,103.981090,30.145538,103.982377,30.158880,103.974518,30.161745,103.979487,30.172736,103.969649,30.180335,103.989892,30.197132,103.959528,30.216906,103.966730,30.233955,103.979510,30.240572,103.964281,30.252780,103.969394,30.267698,103.984404,30.277331,103.997281,30.265453,104.047086,30.274065,104.051446,30.261304,104.062409,30.268811,104.066778,30.256984,104.074634,30.261237,104.078283,30.250003,104.089862,30.253217,104.094024,30.241503,104.124537,30.228739,104.149999,30.246957,104.150805,30.269599,104.165559,30.285692,104.179104,30.327688,104.191656,30.332522,104.191712,30.332337;104.479952"
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,400 +0,0 @@
|
||||
<template>
|
||||
<div :id="mapid" style="width: 100%; height: 100%"></div>
|
||||
<div class="changeMap_box" v-if="props.isShow">
|
||||
<el-carousel type="card" height="75px" :autoplay="false" indicator-position="none" :initial-index="2" @change="onMapImageChange">
|
||||
<el-carousel-item>
|
||||
<div class="mapImageItem">
|
||||
<img :src="require('@/assets/images/layout/yxt.jpg')" alt=""/>
|
||||
<div>浅色图</div>
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
<el-carousel-item>
|
||||
<div class="mapImageItem">
|
||||
<img :src="require('@/assets/images/layout/yst.jpg')" alt=""/>
|
||||
<div>深色图</div>
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
<el-carousel-item>
|
||||
<div class="mapImageItem">
|
||||
<img :src="require('@/assets/images/layout/yst.jpg')" alt=""/>
|
||||
<div>三合一</div>
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
<!-- 地图缩放 -->
|
||||
<div class="zoomTargetBox">
|
||||
<el-input-number :min="6" :max="17" v-model="zoomTarget" :step="1" step-strictly @change="handleZoom"></el-input-number>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import store from "@/store";
|
||||
import { ref, onMounted, onUnmounted, defineProps, nextTick } from "vue";
|
||||
import { MapUtil } from "./mapUtil";
|
||||
import * as zgBj from "./Bj/510300.json";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { getItem } from "@/utils/storage";
|
||||
const mMap = ref(null); //地图对象
|
||||
const mapUtil = ref(null); //地图工具对象
|
||||
const zoomTarget = ref(6);
|
||||
const props = defineProps({
|
||||
mapid: {
|
||||
type: String,
|
||||
default: "mapDiv"
|
||||
},
|
||||
//是否显示可以切换地图底图
|
||||
isShow: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//是否显示实时路况
|
||||
isShowMvt: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//是否显示地图层级
|
||||
isShowZoom: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//是否显示绘制控件
|
||||
isShowDraw: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
try {
|
||||
const userInfo = getItem("deptId")[0].deptCode;
|
||||
} catch (error) {}
|
||||
let map;
|
||||
let mapLayer;
|
||||
|
||||
onMounted(() => {
|
||||
emitter.on("followUp", (res) => {
|
||||
let box = document.getElementsByClassName("changeMap_box");
|
||||
if (!box) return;
|
||||
box[0].style.right = !res ? "4px" : "398px";
|
||||
box[0].style.transition = "0.5s";
|
||||
});
|
||||
const setMapToken = (url, toekn) => {
|
||||
return {
|
||||
url,
|
||||
headers: {
|
||||
"Content-Type": "application/x-protobuf",
|
||||
userToken: "",
|
||||
appToken: "",
|
||||
host: "152.9.14.26",
|
||||
"authentication-code": toekn
|
||||
}
|
||||
};
|
||||
};
|
||||
map = new EliMap({
|
||||
id: props.mapid,
|
||||
crs: "EPSG:4490",
|
||||
style: {
|
||||
glyphs: "./fonts/{fontstack}/{range}.pbf",
|
||||
center: [104.76944000298249, 29.32785788936213],
|
||||
zoom: 10,
|
||||
sources: {
|
||||
TDT_SS: {
|
||||
type: "raster",
|
||||
tiles: [
|
||||
window.location.origin +
|
||||
"/restcloud/pgis/api/map/services/scmap-sl-ss/wmts/1.0.0/GetTile?layer=scmap&style=default&tilematrixset=ChinaPublicServicesCGCS2000_snzsllayers&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix={z}&TileRow={y}&TileCol={x}"
|
||||
],
|
||||
tileSize: 256
|
||||
},
|
||||
TDT_SL: {
|
||||
type: "raster",
|
||||
tiles: [
|
||||
window.location.origin + "/restcloud/pgis/api/map/sl?layer=scmap&style=default&tilematrixset=ChinaPublicServicesCGCS2000_snzsllayers&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix={z}&TileRow={y}&TileCol={x}"
|
||||
],
|
||||
tileSize: 256
|
||||
},
|
||||
TDT_ROAD_SOURCES: {
|
||||
type: "raster",
|
||||
tiles: ["http://80.2.22.218:9099/sc_map_road/{z}/{y}/{x}.png"],
|
||||
tileSize: 256
|
||||
},
|
||||
TDT_POI_SOURCES: {
|
||||
type: "raster",
|
||||
tiles: ["http://80.2.22.218:9099/sc_map_poi/{z}/{y}/{x}.png"],
|
||||
tileSize: 256
|
||||
},
|
||||
TDT_TITLE_SOURCES: {
|
||||
type: "raster",
|
||||
tiles: ["http://80.2.22.218:9099/sc_map_bg/{z}/{y}/{x}.png"],
|
||||
tileSize: 256
|
||||
}
|
||||
},
|
||||
layers: [
|
||||
{
|
||||
type: "background",
|
||||
id: "background",
|
||||
paint: {
|
||||
"background-color": "#f0f8ff"
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "TDT_MAP_SL",
|
||||
type: "raster",
|
||||
source: "TDT_SL"
|
||||
}
|
||||
]
|
||||
},
|
||||
minZoom: 7,
|
||||
maxZoom: 18,
|
||||
transformRequest: (url) => {
|
||||
//电子地图
|
||||
if (url.indexOf("map/sl") != -1) {
|
||||
return setMapToken(url, "ecc71965-3414-41e9-836c-195ca61d2d4d");
|
||||
}
|
||||
//四川省深色电子地图
|
||||
if (url.indexOf("scmap-sl-ss") != -1) {
|
||||
return setMapToken(url, "8f211be3-a1ef-4fe5-85ad-801bc842f62b");
|
||||
}
|
||||
//路况
|
||||
if (url.indexOf("mvt") != -1) {
|
||||
return setMapToken(url, "be47ee81-040d-43b4-b7f9-9dc735735272");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
window.map = map;
|
||||
let layer;
|
||||
// 路况
|
||||
const add = () => {
|
||||
layer = map.addMvtLayer({
|
||||
url: window.location.origin + "/restcloud/pgis/api/mvt/road/condition/{z}/{x}/{y}",
|
||||
sourceLayer: "mvt",
|
||||
layer: "line",
|
||||
style: {
|
||||
paint: {
|
||||
// state:道路路段交通情况（1畅通 2缓慢 3拥堵 4极度拥堵 5无数据）
|
||||
"line-color": [
|
||||
"match",
|
||||
["get", "state"],
|
||||
1,
|
||||
"#53FF2B",
|
||||
2,
|
||||
"#FFEA47",
|
||||
3,
|
||||
"#FF5627",
|
||||
4,
|
||||
"#FF1200",
|
||||
5,
|
||||
"#999999",
|
||||
"#53FF2B"
|
||||
],
|
||||
"line-width": 3
|
||||
},
|
||||
layout: {
|
||||
"line-join": "miter",
|
||||
"line-cap": "round"
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
map.mapboxGLMap.on("load", () => {
|
||||
add();
|
||||
zoomTarget.value = map.mapboxGLMap.getZoom();
|
||||
});
|
||||
mapUtil.value = new MapUtil(map);
|
||||
mapUtil.value.Drawplot(); //初始化加载绘制工具
|
||||
// 设置地图中心点及图层
|
||||
emitter.on("setMapCenter", (res) => {
|
||||
mapUtil.value.setMapCenter(res.location, res.zoomLevel);
|
||||
});
|
||||
emitter.on("removePlot", (flag) => {
|
||||
mapUtil.value.removePlot(flag);
|
||||
});
|
||||
// 撒点
|
||||
emitter.on("addPointArea", (obj) => {
|
||||
mapUtil.value.makerSki(obj);
|
||||
});
|
||||
// 鼠标滑过提示文字的点位
|
||||
emitter.on("showPoint", (obj) => {
|
||||
mapUtil.value.showPoint(obj);
|
||||
});
|
||||
// 清除所有
|
||||
emitter.on("removeAll", (res) => {
|
||||
mapUtil.value.removeAll(res);
|
||||
});
|
||||
// 清除某个覆盖物
|
||||
emitter.on("deletePointArea", (res) => {
|
||||
mapUtil.value.removeElement(res);
|
||||
});
|
||||
// 清除某个覆盖物的单个
|
||||
emitter.on("deletePointAreaOne", (obj) => {
|
||||
mapUtil.value.removeElementOne(obj.flag, obj.id);
|
||||
});
|
||||
// 绘制图形 - 回显区域
|
||||
emitter.on("drawShape", (res) => {
|
||||
mapUtil.value.plot(res, resFun);
|
||||
});
|
||||
// 回显图形
|
||||
emitter.on("echoPlane", (res) => {
|
||||
mapUtil.value.echoPlane(res);
|
||||
});
|
||||
//移除绘制区域
|
||||
emitter.on("removeEara", (flag) => {
|
||||
mapUtil.value.removeEara(flag);
|
||||
});
|
||||
// 回显线
|
||||
emitter.on("echoLine", (res) => {
|
||||
mapUtil.value.createLine(res, res.flag);
|
||||
});
|
||||
//创建边界面（geojson）
|
||||
emitter.on("setBoundarys", (res) => {
|
||||
mapUtil.value.createBoundarys(res);
|
||||
});
|
||||
// 移除边界
|
||||
emitter.on("removeBj", (res) => {
|
||||
mapUtil.value.removeBj(res);
|
||||
});
|
||||
//创建线（geojson）
|
||||
emitter.on("setBoundaryLine", (res) => {
|
||||
mapUtil.value.createBoundarysLine(res);
|
||||
});
|
||||
// 轨迹回放
|
||||
emitter.on("drawLineAnimation", (res) => {
|
||||
mapUtil.value.displayLineAnimation(res);
|
||||
});
|
||||
|
||||
// 聚合撒点
|
||||
emitter.on("addPoint", (obj) => {
|
||||
mapUtil.value.aggregateScatteringPoint(obj);
|
||||
});
|
||||
// 热力图显示
|
||||
emitter.on("thermodynamicChart", (res) => {
|
||||
mapUtil.value.showHeatDrawing(res);
|
||||
});
|
||||
// 扩散圆
|
||||
emitter.on("diffusionCircle", (res) => {
|
||||
mapUtil.value.diffusionCircle(res);
|
||||
});
|
||||
|
||||
//删除自定义点位
|
||||
emitter.on("ClearssCircle", (res) => {
|
||||
mapUtil.value.clearmakerZdy(res);
|
||||
});
|
||||
// 获取当前地图中心点
|
||||
emitter.on("getCurrentCenter", (res) => {
|
||||
let centerPoint = map.mapboxGLMap.getCenter();
|
||||
let coords = [centerPoint.lng, centerPoint.lat];
|
||||
emitter.emit("getcentercoord", coords);
|
||||
});
|
||||
hendleEare(); // 获取边界上图
|
||||
});
|
||||
|
||||
//获取地图绘制的数据
|
||||
const resFun = (coord, type, flag, data) => {
|
||||
emitter.emit("coordString", { coord: coord, type: type, flag: flag, data: data });
|
||||
};
|
||||
|
||||
// 地图层级
|
||||
const handleZoom = (val) => {
|
||||
map.mapboxGLMap.setZoom(val);
|
||||
};
|
||||
|
||||
//切换地图底图
|
||||
const onMapImageChange = (val) => {
|
||||
//清除已经存在胡地图图层
|
||||
if (map.mapboxGLMap.getLayer("TDT_MAP_SS")) map.mapboxGLMap.removeLayer("TDT_MAP_SS");
|
||||
if (map.mapboxGLMap.getLayer("TDT_MAP_SL")) map.mapboxGLMap.removeLayer("TDT_MAP_SL");
|
||||
if (map.mapboxGLMap.getLayer("TDT_TITLE_ID")) map.mapboxGLMap.removeLayer("TDT_TITLE_ID");
|
||||
if (map.mapboxGLMap.getLayer("TDT_ROAD_ID")) map.mapboxGLMap.removeLayer("TDT_ROAD_ID");
|
||||
if (map.mapboxGLMap.getLayer("TDT_POI_ID")) map.mapboxGLMap.removeLayer("TDT_POI_ID");
|
||||
//设置图层
|
||||
switch (val) {
|
||||
case 0:
|
||||
mapSetLayer("TDT_MAP_SL", "TDT_SL");
|
||||
break;
|
||||
case 1:
|
||||
mapSetLayer("TDT_MAP_SS", "TDT_SS");
|
||||
break;
|
||||
case 2:
|
||||
mapSetLayer("TDT_TITLE_ID", "TDT_TITLE_SOURCES");
|
||||
mapSetLayer("TDT_POI_ID", "TDT_POI_SOURCES");
|
||||
mapSetLayer("TDT_ROAD_ID", "TDT_ROAD_SOURCES");
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
//设置图层函数
|
||||
const mapSetLayer = (id, source) => {
|
||||
map.mapboxGLMap.addLayer({ id, type: "raster", source });
|
||||
map.mapboxGLMap.moveLayer("BoundarysMap",undefined)
|
||||
};
|
||||
|
||||
// 获取边界上图
|
||||
const hendleEare = () => {
|
||||
let data = zgBj.default;
|
||||
setTimeout(() => { mapUtil.value.createBoundarys({ data,flag:'BjMap' }); }, 2000);
|
||||
};
|
||||
|
||||
onUnmounted(() => {
|
||||
emitter.off("removePlot");
|
||||
emitter.off("addPointArea");
|
||||
emitter.off("removeAll");
|
||||
emitter.off("showPoint");
|
||||
emitter.off("deletePointArea");
|
||||
emitter.off("deletePointAreaOne");
|
||||
emitter.off("drawShape");
|
||||
emitter.off("echoPlane");
|
||||
emitter.off("removeEara");
|
||||
emitter.off("echoLine");
|
||||
emitter.off("addPoint");
|
||||
emitter.off("thermodynamicChart");
|
||||
emitter.off("drawLineAnimation");
|
||||
emitter.off("trackAnimation");
|
||||
emitter.off("aggregateScatteringPoint");
|
||||
emitter.off("hotmap");
|
||||
emitter.off("setBoundarys");
|
||||
emitter.off("setBoundaryLine");
|
||||
emitter.off("diffusionCircle");
|
||||
emitter.off("SsCircle");
|
||||
emitter.off("ClearssCircle");
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.changeMap_box {
|
||||
position: absolute;
|
||||
right: 398px;
|
||||
bottom: 4px;
|
||||
z-index: 9;
|
||||
.mapImageItem {
|
||||
border: 1px solid #08aae8;
|
||||
background: rgb(9, 26, 70);
|
||||
color: #fff;
|
||||
& > img {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
}
|
||||
& > div {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
top: -3px;
|
||||
}
|
||||
}
|
||||
.zoomTargetBox {
|
||||
margin-top: 10px;
|
||||
}
|
||||
::v-deep .el-input-number__decrease,
|
||||
::v-deep .el-input-number__increase {
|
||||
background: #133362;
|
||||
color: #fff;
|
||||
border: none;
|
||||
}
|
||||
::v-deep .el-input__inner {
|
||||
background: #0c1641;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,459 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
:id="mapid"
|
||||
style="width: 100%; height: 100%"
|
||||
></div>
|
||||
<div
|
||||
class="changeMap_box"
|
||||
v-if="props.isShow"
|
||||
>
|
||||
<el-carousel
|
||||
type="card"
|
||||
height="75px"
|
||||
:autoplay="false"
|
||||
indicator-position="none"
|
||||
:initial-index="2"
|
||||
@change="onMapImageChange"
|
||||
>
|
||||
<el-carousel-item>
|
||||
<div class="mapImageItem">
|
||||
<img
|
||||
:src="require('@/assets/images/layout/yxt.jpg')"
|
||||
alt=""
|
||||
/>
|
||||
<div>浅色图</div>
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
<el-carousel-item>
|
||||
<div class="mapImageItem">
|
||||
<img
|
||||
:src="require('@/assets/images/layout/yst.jpg')"
|
||||
alt=""
|
||||
/>
|
||||
<div>深色图</div>
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
<el-carousel-item>
|
||||
<div class="mapImageItem">
|
||||
<img
|
||||
:src="require('@/assets/images/layout/yst.jpg')"
|
||||
alt=""
|
||||
/>
|
||||
<div>三合一</div>
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
<!-- 地图缩放 -->
|
||||
<div class="zoomTargetBox">
|
||||
<el-input-number
|
||||
:min="6"
|
||||
:max="17"
|
||||
v-model="zoomTarget"
|
||||
:step="1"
|
||||
step-strictly
|
||||
@change="handleZoom"
|
||||
>
|
||||
</el-input-number>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import store from "@/store";
|
||||
import { ref, onMounted, onUnmounted, defineProps, nextTick } from "vue";
|
||||
import { MapUtil } from "./mapUtil";
|
||||
import * as zgBj from "./Bj/510300.json";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { getItem } from "@/utils/storage";
|
||||
const mMap = ref(null); //地图对象
|
||||
const mapUtil = ref(null); //地图工具对象
|
||||
const isLz = ref(false); //是否是泸州用户
|
||||
const zoomTarget = ref(6);
|
||||
const props = defineProps({
|
||||
mapid: {
|
||||
type: String,
|
||||
default: "mapDiv"
|
||||
},
|
||||
//是否显示可以切换地图底图
|
||||
isShow: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//是否显示实时路况
|
||||
isShowMvt: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//是否显示地图层级
|
||||
isShowZoom: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//是否显示绘制控件
|
||||
isShowDraw: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
try {
|
||||
const userInfo = getItem("deptId")[0].deptCode;
|
||||
} catch (error) {}
|
||||
let map;
|
||||
let layer;
|
||||
onMounted(() => {
|
||||
emitter.on("followUp", (res) => {
|
||||
let box = document.getElementsByClassName("changeMap_box");
|
||||
if (!box) return;
|
||||
box[0].style.right = !res ? "4px" : "398px";
|
||||
box[0].style.transition = "0.5s";
|
||||
});
|
||||
map = new EliMap({
|
||||
id: props.mapid,
|
||||
crs: "EGSP:4326",
|
||||
style: {
|
||||
glyphs: "/fonts/{fontstack}/{range}.pbf",
|
||||
center: [104.76944000298249, 29.32785788936213],
|
||||
zoom: 6,
|
||||
sources: {
|
||||
TDT_SS: {
|
||||
type: "raster",
|
||||
tiles: [
|
||||
window.location.origin +
|
||||
"/restcloud/pgis/api/map/services/scmap-sl-ss/wmts/1.0.0/GetTile?layer=scmap&style=default&tilematrixset=ChinaPublicServicesCGCS2000_snzsllayers&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix={z}&TileRow={y}&TileCol={x}"
|
||||
],
|
||||
tileSize: 256
|
||||
},
|
||||
TDT_SL: {
|
||||
type: "raster",
|
||||
tiles: [
|
||||
window.location.origin +
|
||||
"/restcloud/pgis/api/map/sl?layer=scmap&style=default&tilematrixset=ChinaPublicServicesCGCS2000_snzsllayers&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix={z}&TileRow={y}&TileCol={x}"
|
||||
],
|
||||
tileSize: 256
|
||||
},
|
||||
TDT_ROAD_SOURCES: {
|
||||
type: "raster",
|
||||
tiles: ["http://80.2.22.218:9099/sc_map_road/{z}/{y}/{x}.png"],
|
||||
tileSize: 256
|
||||
},
|
||||
TDT_POI_SOURCES: {
|
||||
type: "raster",
|
||||
tiles: ["http://80.2.22.218:9099/sc_map_poi/{z}/{y}/{x}.png"],
|
||||
tileSize: 256
|
||||
},
|
||||
TDT_TITLE_SOURCES: {
|
||||
type: "raster",
|
||||
tiles: ["http://80.2.22.218:9099/sc_map_bg/{z}/{y}/{x}.png"],
|
||||
tileSize: 256
|
||||
}
|
||||
},
|
||||
layers: [
|
||||
{
|
||||
type: "background",
|
||||
id: "background",
|
||||
paint: {
|
||||
"background-color": "#f0f8ff"
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "TDT_MAP_SS",
|
||||
type: "raster",
|
||||
source: "TDT_SS"
|
||||
}
|
||||
]
|
||||
},
|
||||
transformRequest: (url) => {
|
||||
//电子地图
|
||||
if (url.indexOf("map/sl") != -1) {
|
||||
return setMapToken(url, "ecc71965-3414-41e9-836c-195ca61d2d4d");
|
||||
}
|
||||
//四川省深色电子地图
|
||||
if (url.indexOf("scmap-sl-ss") != -1) {
|
||||
return setMapToken(url, "8f211be3-a1ef-4fe5-85ad-801bc842f62b");
|
||||
}
|
||||
//路况
|
||||
if (url.indexOf("mvt") != -1) {
|
||||
return setMapToken(url, "be47ee81-040d-43b4-b7f9-9dc735735272");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
window.map = map;
|
||||
|
||||
map.mapboxGLMap.on("load", () => {
|
||||
add(); // 路况
|
||||
zoomTarget.value = map.mapboxGLMap.getZoom();
|
||||
});
|
||||
mapUtil.value = new MapUtil(map);
|
||||
|
||||
mapUtil.value.Drawplot(); //初始化加载绘制工具
|
||||
|
||||
// 设置地图中心点及图层
|
||||
emitter.on("setMapCenter", (res) => {
|
||||
mapUtil.value.setMapCenter(res.location, res.zoomLevel);
|
||||
});
|
||||
emitter.on("removePlot", (flag) => {
|
||||
mapUtil.value.removePlot(flag);
|
||||
});
|
||||
// 撒点
|
||||
emitter.on("addPointArea", (obj) => {
|
||||
mapUtil.value.makerSki(obj);
|
||||
});
|
||||
// 鼠标滑过提示文字的点位
|
||||
emitter.on("showPoint", (obj) => {
|
||||
mapUtil.value.showPoint(obj);
|
||||
});
|
||||
// 清除所有
|
||||
emitter.on("removeAll", (res) => {
|
||||
mapUtil.value.removeAll(res);
|
||||
});
|
||||
// 清除某个覆盖物
|
||||
emitter.on("deletePointArea", (res) => {
|
||||
mapUtil.value.removeElement(res);
|
||||
});
|
||||
// 清除某个覆盖物的单个
|
||||
emitter.on("deletePointAreaOne", (obj) => {
|
||||
mapUtil.value.removeElementOne(obj.flag, obj.id);
|
||||
});
|
||||
// 绘制图形 - 回显区域
|
||||
emitter.on("drawShape", (res) => {
|
||||
mapUtil.value.plot(res, resFun);
|
||||
});
|
||||
// 回显图形
|
||||
emitter.on("echoPlane", (res) => {
|
||||
mapUtil.value.echoPlane(res);
|
||||
});
|
||||
//移除绘制区域
|
||||
emitter.on("removeEara", (flag) => {
|
||||
mapUtil.value.removeEara(flag);
|
||||
});
|
||||
// 回显线
|
||||
emitter.on("echoLine", (res) => {
|
||||
mapUtil.value.createLine(res, res.flag);
|
||||
});
|
||||
//创建边界面（geojson）
|
||||
emitter.on("setBoundarys", (res) => {
|
||||
mapUtil.value.createBoundarys(res);
|
||||
});
|
||||
// 移除边界
|
||||
emitter.on("removeBj", (res) => {
|
||||
mapUtil.value.removeBj(res);
|
||||
});
|
||||
//创建线（geojson）
|
||||
emitter.on("setBoundaryLine", (res) => {
|
||||
mapUtil.value.createBoundarysLine(res);
|
||||
});
|
||||
// 轨迹回放
|
||||
emitter.on("drawLineAnimation", (res) => {
|
||||
mapUtil.value.displayLineAnimation(res);
|
||||
});
|
||||
// 轨迹跟踪
|
||||
emitter.on("trackAnimation", (res) => {
|
||||
mapUtil.value.trackAnimationAnimation(res.coords, res.isClear);
|
||||
});
|
||||
// 聚合撒点
|
||||
emitter.on("addPoint", (obj) => {
|
||||
mapUtil.value.aggregateScatteringPoint(obj);
|
||||
});
|
||||
// 热力图显示
|
||||
emitter.on("thermodynamicChart", (res) => {
|
||||
mapUtil.value.showHeatDrawing(res);
|
||||
});
|
||||
// 扩散圆
|
||||
emitter.on("diffusionCircle", (res) => {
|
||||
mapUtil.value.diffusionCircle(res);
|
||||
});
|
||||
//自定义撒点(闪动效果)
|
||||
emitter.on("SsCircle", (res) => {
|
||||
mapUtil.value.makerZdy(res);
|
||||
});
|
||||
//删除自定义点位
|
||||
emitter.on("ClearssCircle", (res) => {
|
||||
mapUtil.value.clearmakerZdy(res);
|
||||
});
|
||||
// 获取当前地图中心点
|
||||
emitter.on("getCurrentCenter", (res) => {
|
||||
let centerPoint = map.mapboxGLMap.getCenter();
|
||||
let coords = [centerPoint.lng, centerPoint.lat];
|
||||
emitter.emit("getcentercoord", coords);
|
||||
});
|
||||
csbj();
|
||||
});
|
||||
|
||||
// 路况
|
||||
const add = () => {
|
||||
layer = map.addMvtLayer({
|
||||
url:
|
||||
window.location.origin +
|
||||
"/restcloud/pgis/api/mvt/road/condition/{z}/{x}/{y}",
|
||||
sourceLayer: "mvt",
|
||||
layer: "line",
|
||||
style: {
|
||||
paint: {
|
||||
// state:道路路段交通情况（1畅通 2缓慢 3拥堵 4极度拥堵 5无数据）
|
||||
"line-color": [
|
||||
"match",
|
||||
["get", "state"],
|
||||
1,
|
||||
"#53FF2B",
|
||||
2,
|
||||
"#FFEA47",
|
||||
3,
|
||||
"#FF5627",
|
||||
4,
|
||||
"#FF1200",
|
||||
5,
|
||||
"#999999",
|
||||
"#53FF2B"
|
||||
],
|
||||
"line-width": 3
|
||||
},
|
||||
layout: {
|
||||
"line-join": "miter",
|
||||
"line-cap": "round"
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//初始边界
|
||||
const csbj = () => {
|
||||
let data = zgBj.default;
|
||||
setTimeout(() => {
|
||||
mapUtil.value.createBoundarys({ data });
|
||||
}, 2000);
|
||||
};
|
||||
const setMapToken = (url, toekn) => {
|
||||
let type = "image/png;charset=utf-8";
|
||||
if (url.indexOf("mvt") != -1) {
|
||||
let type = "application/x-protobuf";
|
||||
}
|
||||
return {
|
||||
url,
|
||||
headers: {
|
||||
"Content-Type": type,
|
||||
userToken: "",
|
||||
appToken: "",
|
||||
host: "152.9.14.26",
|
||||
"authentication-code": toekn
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
//切换地图底图
|
||||
const onMapImageChange = (val) => {
|
||||
//清除已经存在胡地图图层
|
||||
try {
|
||||
layer.destroy();
|
||||
} catch (error) {}
|
||||
if (map.mapboxGLMap.getLayer("TDT_MAP_SS"))
|
||||
map.mapboxGLMap.removeLayer("TDT_MAP_SS");
|
||||
if (map.mapboxGLMap.getLayer("TDT_MAP_SL"))
|
||||
map.mapboxGLMap.removeLayer("TDT_MAP_SL");
|
||||
if (map.mapboxGLMap.getLayer("TDT_TITLE_ID"))
|
||||
map.mapboxGLMap.removeLayer("TDT_TITLE_ID");
|
||||
if (map.mapboxGLMap.getLayer("TDT_ROAD_ID"))
|
||||
map.mapboxGLMap.removeLayer("TDT_ROAD_ID");
|
||||
if (map.mapboxGLMap.getLayer("TDT_POI_ID"))
|
||||
map.mapboxGLMap.removeLayer("TDT_POI_ID");
|
||||
//设置图层
|
||||
switch (val) {
|
||||
case 0:
|
||||
mapSetLayer("TDT_MAP_SL", "TDT_SL");
|
||||
break;
|
||||
case 1:
|
||||
mapSetLayer("TDT_MAP_SS", "TDT_SS");
|
||||
break;
|
||||
case 2:
|
||||
mapSetLayer("TDT_TITLE_ID", "TDT_TITLE_SOURCES");
|
||||
mapSetLayer("TDT_POI_ID", "TDT_POI_SOURCES");
|
||||
mapSetLayer("TDT_ROAD_ID", "TDT_ROAD_SOURCES");
|
||||
break;
|
||||
}
|
||||
add();
|
||||
};
|
||||
|
||||
//设置图层函数
|
||||
const mapSetLayer = (id, source) => {
|
||||
map.mapboxGLMap.addLayer({ id, type: "raster", source });
|
||||
};
|
||||
|
||||
//获取地图绘制的数据
|
||||
const resFun = (coord, type, flag, data) => {
|
||||
emitter.emit("coordString", {
|
||||
coord: coord,
|
||||
type: type,
|
||||
flag: flag,
|
||||
data: data
|
||||
});
|
||||
};
|
||||
|
||||
// 地图层级
|
||||
const handleZoom = (val) => {
|
||||
map.mapboxGLMap.setZoom(val);
|
||||
};
|
||||
|
||||
onUnmounted(() => {
|
||||
emitter.off("removePlot");
|
||||
emitter.off("addPointArea");
|
||||
emitter.off("removeAll");
|
||||
emitter.off("showPoint");
|
||||
emitter.off("deletePointArea");
|
||||
emitter.off("deletePointAreaOne");
|
||||
emitter.off("drawShape");
|
||||
emitter.off("echoPlane");
|
||||
emitter.off("removeEara");
|
||||
emitter.off("echoLine");
|
||||
emitter.off("addPoint");
|
||||
emitter.off("thermodynamicChart");
|
||||
emitter.off("drawLineAnimation");
|
||||
emitter.off("trackAnimation");
|
||||
emitter.off("aggregateScatteringPoint");
|
||||
emitter.off("hotmap");
|
||||
emitter.off("setBoundarys");
|
||||
emitter.off("setBoundaryLine");
|
||||
emitter.off("diffusionCircle");
|
||||
emitter.off("SsCircle");
|
||||
emitter.off("ClearssCircle");
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.changeMap_box {
|
||||
position: absolute;
|
||||
right: 398px;
|
||||
bottom: 4px;
|
||||
z-index: 9;
|
||||
.mapImageItem {
|
||||
border: 1px solid #08aae8;
|
||||
background: rgb(9, 26, 70);
|
||||
color: #fff;
|
||||
& > img {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
}
|
||||
& > div {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
top: -3px;
|
||||
}
|
||||
}
|
||||
.zoomTargetBox {
|
||||
margin-top: 10px;
|
||||
}
|
||||
::v-deep .el-input-number__decrease,
|
||||
::v-deep .el-input-number__increase {
|
||||
background: #133362;
|
||||
color: #fff;
|
||||
border: none;
|
||||
}
|
||||
::v-deep .el-input__inner {
|
||||
background: #0c1641;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,366 +0,0 @@
|
||||
<template>
|
||||
<div :id="mapid" style="width: 100%; height: 100%; background-color: aliceblue"></div>
|
||||
<div class="changeMap_box" v-if="props.isShow">
|
||||
<!-- 地图缩放 -->
|
||||
<div class="zoomTargetBox">
|
||||
<el-input-number :min="6" :max="17" v-model="zoomTarget" :step="1" step-strictly @change="handleZoom">
|
||||
</el-input-number>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref,onMounted, onUnmounted, defineProps, nextTick } from "vue";
|
||||
import { MapUtil } from "./mapUtil";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { getItem } from "@/utils/storage";
|
||||
const mMap = ref(null); //地图对象
|
||||
const mapUtil = ref(null); //地图工具对象
|
||||
const isLz = ref(false); //是否是泸州用户
|
||||
const zoomTarget = ref(6);
|
||||
const props = defineProps({
|
||||
mapid: {
|
||||
type: String,
|
||||
default: "mapDiv"
|
||||
},
|
||||
//是否显示可以切换地图底图
|
||||
isShow: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//是否显示实时路况
|
||||
isShowMvt: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//是否显示地图层级
|
||||
isShowZoom: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//是否显示绘制控件
|
||||
isShowDraw: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
try {
|
||||
const userInfo = getItem("deptId")[0].deptCode;
|
||||
} catch (error) {}
|
||||
let map;
|
||||
let mapLayer;
|
||||
let mapLayer1;
|
||||
onMounted(() => {
|
||||
emitter.on("followUp", (res) => {
|
||||
let box = document.getElementsByClassName("changeMap_box");
|
||||
if (!box) return;
|
||||
box[0].style.right = !res ? "4px" : "398px";
|
||||
box[0].style.transition = "0.5s";
|
||||
});
|
||||
map = new EliMap({
|
||||
id: props.mapid,
|
||||
crs: "EPSG:4490",
|
||||
style: {
|
||||
glyphs: "./fonts/{fontstack}/{range}.pbf",
|
||||
center: [104.772095, 29.325092],
|
||||
// center: [106.64672875088394,30.443490852323272],
|
||||
zoom: 10
|
||||
},
|
||||
minZoom: 7,
|
||||
maxZoom: 18,
|
||||
transformRequest: (url) => {
|
||||
if (url.indexOf("TileMatrix=") != -1) {
|
||||
const arr = url.split("TileMatrix=");
|
||||
const arr1 = arr[1].split("&");
|
||||
const nurl = `${arr[0]}&TileMatrix=${Number(arr1[0])}&${arr1[1]}&${
|
||||
arr1[2]
|
||||
}`;
|
||||
return {
|
||||
url: nurl,
|
||||
headers: {
|
||||
"Content-Type": "image/png;charset=utf-8",
|
||||
userToken: JSON.parse(window.localStorage.GdToken).userToken,
|
||||
appToken: JSON.parse(window.localStorage.GdToken).appToken,
|
||||
host: "152.9.14.26",
|
||||
"authentication-code": "fce03430-067e-419b-b866-948d622d5983"
|
||||
}
|
||||
};
|
||||
} else {
|
||||
if (url.indexOf("restcloud") != -1) {
|
||||
return {
|
||||
url: url,
|
||||
headers: {
|
||||
"Content-Type": "application/x-protobuf",
|
||||
userToken: JSON.parse(window.localStorage.GdToken).userToken,
|
||||
appToken: JSON.parse(window.localStorage.GdToken).appToken,
|
||||
host: "152.9.14.26",
|
||||
"authentication-code": "8d03f353-9dd4-44bd-a9ea-3104fbbdd777"
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
window.map = map;
|
||||
let layer;
|
||||
// 路况
|
||||
const add = () => {
|
||||
layer = map.addMvtLayer({
|
||||
url: "http://www.api.sc:8080/restcloud/pgis/api/mvt/road/condition/{z}/{x}/{y}",
|
||||
sourceLayer: "mvt",
|
||||
layer: "line",
|
||||
style: {
|
||||
paint: {
|
||||
// state:道路路段交通情况（1畅通 2缓慢 3拥堵 4极度拥堵 5无数据）
|
||||
"line-color": [
|
||||
"match",
|
||||
["get", "state"],
|
||||
1,
|
||||
"#53FF2B",
|
||||
2,
|
||||
"#FFEA47",
|
||||
3,
|
||||
"#FF5627",
|
||||
4,
|
||||
"#FF1200",
|
||||
5,
|
||||
"#999999",
|
||||
"#53FF2B"
|
||||
],
|
||||
"line-width": 3
|
||||
},
|
||||
layout: {
|
||||
"line-join": "miter",
|
||||
"line-cap": "round"
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
map.mapboxGLMap.on("load", () => {
|
||||
map.addWMTSLayer(
|
||||
"http://www.api.sc:8080/restcloud/pgis/api/map/sl",
|
||||
{
|
||||
layer: "scmap",
|
||||
style: "default",
|
||||
tilematrixset: "ChinaPublicServicesCGCS2000_snzsllayers",
|
||||
Service: "WMTS",
|
||||
Request: "GetTile",
|
||||
Version: "1.0.0",
|
||||
Format: "image/png",
|
||||
TileMatrix: "{z}",
|
||||
TileRow: "{y}",
|
||||
TileCol: "{x}"
|
||||
},
|
||||
{
|
||||
tileSize: 256
|
||||
}
|
||||
);
|
||||
// add();
|
||||
zoomTarget.value = map.mapboxGLMap.getZoom();
|
||||
});
|
||||
mapUtil.value = new MapUtil(map);
|
||||
|
||||
mapUtil.value.Drawplot(); //初始化加载绘制工具
|
||||
|
||||
// 设置地图中心点及图层
|
||||
emitter.on("setMapCenter", (res) => {
|
||||
mapUtil.value.setMapCenter(res.location, res.zoomLevel);
|
||||
});
|
||||
emitter.on("removePlot", (flag) => {
|
||||
mapUtil.value.removePlot(flag);
|
||||
});
|
||||
// 撒点
|
||||
emitter.on("addPointArea", (obj) => {
|
||||
mapUtil.value.makerSki(obj);
|
||||
});
|
||||
// 鼠标滑过提示文字的点位
|
||||
emitter.on("showPoint", (obj) => {
|
||||
mapUtil.value.showPoint(obj);
|
||||
});
|
||||
|
||||
// 清除覆盖物
|
||||
emitter.on("deletePointArea", (res) => {
|
||||
mapUtil.value.removeElement(res);
|
||||
});
|
||||
// 清除某个覆盖物的单个
|
||||
emitter.on("deletePointAreaOne", (obj) => {
|
||||
mapUtil.value.removeElementOne(obj.flag, obj.id);
|
||||
});
|
||||
// 清除全部覆盖物
|
||||
emitter.on("removeElementAll", () => {
|
||||
mapUtil.value.removeElementAll();
|
||||
});
|
||||
|
||||
// 绘制图形 - 回显区域
|
||||
emitter.on("drawShape", (res) => {
|
||||
mapUtil.value.plot(res, resFun);
|
||||
});
|
||||
// 回显图形
|
||||
emitter.on("echoPlane", (res) => {
|
||||
mapUtil.value.echoPlane(res);
|
||||
});
|
||||
//移除绘制区域
|
||||
emitter.on("removeEara", (flag) => {
|
||||
mapUtil.value.removeEara(flag);
|
||||
});
|
||||
// 回显线
|
||||
emitter.on("echoLine", (res) => {
|
||||
mapUtil.value.createLine(res, res.flag);
|
||||
});
|
||||
//创建边界面（geojson）
|
||||
emitter.on("setBoundarys", (res) => {
|
||||
mapUtil.value.createBoundarys(res);
|
||||
});
|
||||
// 移除边界
|
||||
emitter.on("removeBj", (res) => {
|
||||
mapUtil.value.removeBj(res);
|
||||
});
|
||||
//创建线（geojson）
|
||||
emitter.on("setBoundaryLine", (res) => {
|
||||
mapUtil.value.createBoundarysLine(res);
|
||||
});
|
||||
// 轨迹回放
|
||||
emitter.on("drawLineAnimation", (res) => {
|
||||
mapUtil.value.displayLineAnimation(res);
|
||||
});
|
||||
|
||||
// 聚合撒点
|
||||
emitter.on("addPoint", (obj) => {
|
||||
mapUtil.value.aggregateScatteringPoint(obj);
|
||||
});
|
||||
|
||||
// 热力图显示
|
||||
emitter.on("thermodynamicChart", (res) => {
|
||||
mapUtil.value.showHeatDrawing(res);
|
||||
});
|
||||
// 扩散圆
|
||||
emitter.on("diffusionCircle", (res) => {
|
||||
mapUtil.value.diffusionCircle(res);
|
||||
});
|
||||
|
||||
// 获取当前地图中心点
|
||||
emitter.on("getCurrentCenter", (res) => {
|
||||
let centerPoint = map.mapboxGLMap.getCenter();
|
||||
let coords = [centerPoint.lng, centerPoint.lat];
|
||||
emitter.emit("getcentercoord", res?res:coords);
|
||||
});
|
||||
});
|
||||
//切换地图底图
|
||||
const onMapImageChange = (val) => {
|
||||
//清除已经存在胡地图图层
|
||||
if (map.mapboxGLMap.getLayer("SGQS_ID"))
|
||||
map.mapboxGLMap.removeLayer("SGQS_ID");
|
||||
if (map.mapboxGLMap.getLayer("YX_ID")) map.mapboxGLMap.removeLayer("YX_ID");
|
||||
if (map.mapboxGLMap.getLayer("SGSG_ID"))
|
||||
map.mapboxGLMap.removeLayer("SGSG_ID");
|
||||
if (map.mapboxGLMap.getLayer("TDT_TITLE_ID"))
|
||||
map.mapboxGLMap.removeLayer("TDT_TITLE_ID");
|
||||
if (map.mapboxGLMap.getLayer("TDT_ROAD_ID"))
|
||||
map.mapboxGLMap.removeLayer("TDT_ROAD_ID");
|
||||
if (map.mapboxGLMap.getLayer("TDT_POI_ID"))
|
||||
map.mapboxGLMap.removeLayer("TDT_POI_ID");
|
||||
//设置图层
|
||||
switch (val) {
|
||||
case 0:
|
||||
mapSetLayer("SGQS_ID", "SGQS");
|
||||
break;
|
||||
case 1:
|
||||
mapSetLayer("YX_ID", "YX");
|
||||
break;
|
||||
case 2:
|
||||
mapSetLayer("SGSG_ID", "SGSG");
|
||||
break;
|
||||
case 3:
|
||||
mapSetLayer("TDT_TITLE_ID", "TDT_TITLE_SOURCES");
|
||||
mapSetLayer("TDT_ROAD_ID", "TDT_ROAD_SOURCES");
|
||||
mapSetLayer("TDT_POI_ID", "TDT_POI_SOURCES");
|
||||
break;
|
||||
}
|
||||
if (map.mapboxGLMap.getLayer("realTimeTrafficlevelOne"))
|
||||
map.mapboxGLMap.moveLayer("realTimeTrafficlevelOne");
|
||||
if (map.mapboxGLMap.getLayer("map_id")) map.mapboxGLMap.moveLayer("map_id");
|
||||
if (map.mapboxGLMap.getLayer("map_ids")) map.mapboxGLMap.moveLayer("map_ids");
|
||||
};
|
||||
|
||||
//设置图层函数
|
||||
const mapSetLayer = (id, source) => {
|
||||
map.mapboxGLMap.addLayer({ id, type: "raster", source });
|
||||
};
|
||||
|
||||
//获取地图绘制的数据
|
||||
const resFun = (coord, type, flag, data) => {
|
||||
emitter.emit("coordString", {
|
||||
coord: coord,
|
||||
type: type,
|
||||
flag: flag,
|
||||
data: data
|
||||
});
|
||||
};
|
||||
|
||||
// 地图层级
|
||||
const handleZoom = (val) => {
|
||||
map.mapboxGLMap.setZoom(val);
|
||||
};
|
||||
|
||||
onUnmounted(() => {
|
||||
emitter.off("removePlot");
|
||||
emitter.off("addPointArea");
|
||||
emitter.off("showPoint");
|
||||
emitter.off("deletePointArea");
|
||||
emitter.off("deletePointAreaOne");
|
||||
emitter.off("removeElementAll");
|
||||
emitter.off("drawShape");
|
||||
emitter.off("echoPlane");
|
||||
emitter.off("removeEara");
|
||||
emitter.off("echoLine");
|
||||
emitter.off("addPoint");
|
||||
emitter.off("deletePoint");
|
||||
emitter.off("thermodynamicChart");
|
||||
emitter.off("drawLineAnimation");
|
||||
emitter.off("aggregateScatteringPoint");
|
||||
emitter.off("hotmap");
|
||||
emitter.off("setBoundarys");
|
||||
emitter.off("setBoundaryLine");
|
||||
emitter.off("diffusionCircle");
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.changeMap_box {
|
||||
position: absolute;
|
||||
right: 398px;
|
||||
bottom: 4px;
|
||||
z-index: 9;
|
||||
.mapImageItem {
|
||||
border: 1px solid #08aae8;
|
||||
background: rgb(9, 26, 70);
|
||||
& > img {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
}
|
||||
& > div {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
top: -3px;
|
||||
}
|
||||
}
|
||||
.zoomTargetBox {
|
||||
margin-top: 10px;
|
||||
}
|
||||
::v-deep .el-input-number__decrease,
|
||||
::v-deep .el-input-number__increase {
|
||||
background: #133362;
|
||||
color: #fff;
|
||||
border: none;
|
||||
}
|
||||
::v-deep .el-input__inner {
|
||||
background: #0c1641;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,853 +0,0 @@
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
|
||||
export function MapUtil(map) {
|
||||
let _that = this;
|
||||
_that.mMap = map; //地图对象
|
||||
_that._self = {}; //图层对象
|
||||
_that._CustomDraw = null; //自定义绘图
|
||||
_that.polygonGeo = null; //边界
|
||||
_that.polygonGeoLine = null; //geojson 线
|
||||
_that.idsBox = {}; //存放id的容器（需要某个标记单个删除的时候存储）
|
||||
|
||||
/**
|
||||
* 设置地图中心点以
|
||||
* @param {*} location 中心坐标 [jd,wd]
|
||||
* @param {*} zoomLevel 层级 10
|
||||
*/
|
||||
MapUtil.prototype.setMapCenter = (location, zoomLevel) => {
|
||||
map.mapboxGLMap.setCenter(location);
|
||||
map.mapboxGLMap.setZoom(zoomLevel);
|
||||
};
|
||||
|
||||
/**
|
||||
* 撒点.鼠标滑动展示内容
|
||||
* @param {*} coords 坐标 geojson
|
||||
* @param {*} icon 图标
|
||||
* @param {*} flag 标识
|
||||
*/
|
||||
MapUtil.prototype.showPoint = (res) => {
|
||||
let { coords, icon, flag, iconH } = res;
|
||||
if (!coords) return;
|
||||
if (!_that._self[flag]) _that._self[flag] = [];
|
||||
let pointList = coords.map((it, index) => {
|
||||
let text = it.kfdMc || it.wzBc || it.gajgmc;
|
||||
let obj = {
|
||||
position: [it.jd, it.wd],
|
||||
userData: {
|
||||
deviceSn: "text" + index,
|
||||
area: text
|
||||
},
|
||||
id: it.id,
|
||||
text: text,
|
||||
data: it
|
||||
};
|
||||
if (it.jd && it.wd) return obj;
|
||||
});
|
||||
|
||||
const point = map.createdPoint(pointList, {
|
||||
image: icon, //对应上面的图片名称
|
||||
scale: 0.6,
|
||||
highlightImage: iconH ? iconH : icon, //高亮图标
|
||||
labelOption: {
|
||||
pixelOffset: [0, -3],
|
||||
allShow: false,
|
||||
fontSize: "18px",
|
||||
fontWeight: 600,
|
||||
fontColor: "#18f439"
|
||||
}
|
||||
});
|
||||
_that._self[flag].push(point);
|
||||
|
||||
point.addEventListener("click", (val) => {
|
||||
let data = val.data ? JSON.parse(val.data) : {};
|
||||
// point.highlight(data.id) //高亮展示选中的点位
|
||||
_that.openInfoDetail(flag, data); //点击打开详情
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 撒点
|
||||
* @param {*} coords 坐标 geojson
|
||||
* @param {*} icon 图标
|
||||
* @param {*} flag 标识
|
||||
* @param {*} isBounds 点击图标是否变大方法
|
||||
* @param {*} showTitle 是否展示标题
|
||||
*/
|
||||
|
||||
MapUtil.prototype.makerSki = (res) => {
|
||||
let { coords, icon, flag, isBounds, showTitle, scale } = res;
|
||||
if (!coords) return;
|
||||
if (!_that._self[flag]) _that._self[flag] = []; //存储地图标识的容器
|
||||
if (!_that.idsBox[flag]) _that.idsBox[flag] = []; //存储id的容器
|
||||
if (flag == "rx") {
|
||||
_that.handlePolice(coords, icon, flag, showTitle);
|
||||
} else {
|
||||
coords.forEach((item) => {
|
||||
let el = document.createElement("img");
|
||||
el.src = item.icon || icon;
|
||||
el.style.width = scale ? "30px" : "25px"; //改变撒点图标大小
|
||||
if (showTitle) _that.makerShowTitle(item, [item.jd, item.wd], flag); //展示标题
|
||||
const marker = map.Marker(el, [item.jd, item.wd], {
|
||||
anchor: "bottom",
|
||||
offset: [0, 0]
|
||||
});
|
||||
el.addEventListener("click", () => {
|
||||
_that.openInfoDetail(flag, item); //点击打开详情
|
||||
});
|
||||
_that._self[flag].push(marker);
|
||||
_that.idsBox[flag].push(item.id);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 警力处理展示
|
||||
MapUtil.prototype.handlePolice = (coords, icon, flag, showTitle) => {
|
||||
// 01-大型车辆-DXCL， 02-小型车辆=XXCL，03-摩托车-MTC，04-其他车辆-QTCL，05-重型车辆-ZXCL，06-风控车-FKC，07-巡逻车-XLC，08-装甲车-ZJC
|
||||
coords.forEach((item) => {
|
||||
let el = document.createElement("img");
|
||||
let jcIcon = require(`@/assets/point/police-car-bx.png`);
|
||||
switch (item.lx) {
|
||||
case "01": // 特警
|
||||
jcIcon = require(`@/assets/point/specialPolice.png`);
|
||||
break;
|
||||
case "02": // 交警
|
||||
jcIcon = require(`@/assets/point/trafficPolice.png`);
|
||||
break;
|
||||
case "03": // 派出所民警
|
||||
jcIcon = require(`@/assets/point/peoplePolice.png`);
|
||||
break;
|
||||
default: // 默认图标
|
||||
jcIcon = require(`@/assets/point/specialPolice.png`);
|
||||
break;
|
||||
}
|
||||
if (item.zzlx == 1) jcIcon = require(`@/assets/point/by.png`); //便衣
|
||||
let cllxList = item.cllx ? item.cllx.split(",") : [];
|
||||
|
||||
if (
|
||||
(cllxList.includes("03") || cllxList.includes("04")) &&
|
||||
item.lx == "02"
|
||||
)
|
||||
jcIcon = require(`@/assets/point/xljmtc.png`); //交警-摩托车
|
||||
if (
|
||||
(cllxList.includes("03") || cllxList.includes("04")) &&
|
||||
item.lx == "01"
|
||||
)
|
||||
jcIcon = require(`@/assets/point/tjc.png`); //特警-摩托车
|
||||
if (cllxList.includes("08") || cllxList.includes("06"))
|
||||
jcIcon = require(`@/assets/point/zjc.png`); //装甲车
|
||||
|
||||
el.src = jcIcon;
|
||||
let isShoeCar = cllxList.includes("03") || cllxList.includes("08"); //车辆类型
|
||||
if (showTitle) _that.makerShowTitle(item, [item.jd, item.wd], flag); //展示标题
|
||||
_that.shouIcon(item, [item.jd, item.wd]); // 展示装备图标
|
||||
let offset = isShoeCar ? [-10, 0] : [0, 0];
|
||||
if (cllxList.includes("08")) offset = [-12, -10];
|
||||
const marker = map.Marker(el, [item.jd, item.wd], {
|
||||
anchor: "bottom",
|
||||
offset: offset
|
||||
});
|
||||
el.addEventListener("click", () => {
|
||||
console.log(flag, item);
|
||||
_that.openInfoDetail(flag, item); //点击打开详情
|
||||
});
|
||||
_that._self[flag].push(marker);
|
||||
_that.idsBox[flag].push(item.id);
|
||||
});
|
||||
};
|
||||
|
||||
// 信息框展示
|
||||
MapUtil.prototype.makerShowTitle = (item, points, flag) => {
|
||||
let flagT = flag + "Title";
|
||||
if (!_that._self[flagT]) _that._self[flagT] = [];
|
||||
// 展示名字
|
||||
let textTitle = item.jzMc ? item.jzMc : item.fzrXm + "警组";
|
||||
if (flag == "sbwz_car" || flag == "sbwz_sb") textTitle = item.sbmc;
|
||||
// 设置样式
|
||||
const el = document.createElement("div");
|
||||
el.className = "makerTitle";
|
||||
if (flag == "sbwz_car" || flag == "sbwz_sb") el.className = "makerTitlezb";
|
||||
if (flag == "rx") {
|
||||
if (item.xfzt == "0") el.classList.add("makerTitleLine");
|
||||
else el.classList.add("makerTitleUnLine");
|
||||
}
|
||||
el.innerHTML = textTitle;
|
||||
// 渲染
|
||||
const marker = map.Marker(el, points, {
|
||||
anchor: "bottom",
|
||||
offset: [0, -50]
|
||||
});
|
||||
_that._self[flagT].push(marker);
|
||||
};
|
||||
|
||||
/**
|
||||
* 装备图标
|
||||
* @param {点位数据} data
|
||||
* @param {点} point
|
||||
*/
|
||||
MapUtil.prototype.shouIcon = (data, point) => {
|
||||
if (!_that._self.gpsZb) _that._self.gpsZb = [];
|
||||
// var qxIcon = require(`@/assets/point/qx.png`); //qixie
|
||||
// var zfjlyIcon = require(`@/assets/point/interphone.png`); // 对讲机
|
||||
// var clIcon = require(`@/assets/point/car.png`); // 车辆
|
||||
let jyqx =
|
||||
typeof data.jyqx == "string"
|
||||
? JSON.parse(data.jyqx)
|
||||
: data.jyqx
|
||||
? data.jyqx
|
||||
: [];
|
||||
let txzb =
|
||||
typeof data.txzb == "string"
|
||||
? JSON.parse(data.txzb)
|
||||
: data.txzb
|
||||
? data.txzb
|
||||
: [];
|
||||
let pbcl =
|
||||
typeof data.pbcl == "string"
|
||||
? JSON.parse(data.pbcl)
|
||||
: data.pbcl
|
||||
? data.pbcl
|
||||
: [];
|
||||
let list = [];
|
||||
let cl = pbcl && pbcl.length > 0 ? true : false; // 车辆
|
||||
let zb = txzb && txzb.length > 0 ? true : false; // 智能装备
|
||||
let qx = jyqx && jyqx.length > 0 ? true : false; // 警用器械
|
||||
if (zb) {
|
||||
let el = document.createElement("img");
|
||||
el.style.width = "15px";
|
||||
el.src = zfjlyIcon;
|
||||
const makerZb = map.Marker(el, point, {
|
||||
anchor: "bottom",
|
||||
offset: [20, -26]
|
||||
});
|
||||
list.push(makerZb);
|
||||
}
|
||||
if (qx) {
|
||||
let elqx = document.createElement("img");
|
||||
elqx.style.width = "15px";
|
||||
elqx.src = qxIcon;
|
||||
const makerQx = map.Marker(elqx, point, {
|
||||
anchor: "bottom",
|
||||
offset: [20, -10]
|
||||
});
|
||||
list.push(makerQx);
|
||||
}
|
||||
if (cl) {
|
||||
let elcl = document.createElement("img");
|
||||
elcl.style.width = "20px";
|
||||
elcl.src = clIcon;
|
||||
const makerCl = map.Marker(elcl, point, {
|
||||
anchor: "bottom",
|
||||
offset: [20, 2]
|
||||
});
|
||||
list.push(makerCl);
|
||||
}
|
||||
_that._self.gpsZb[data.id] = list;
|
||||
};
|
||||
|
||||
/**扩散圆
|
||||
* @param coords:[jd,wd]
|
||||
*/
|
||||
MapUtil.prototype.diffusionCircle = (obj) => {
|
||||
let { coords, flag, isClear } = obj;
|
||||
if (!_that._self[flag]) _that._self[flag] = {};
|
||||
if (isClear) _that._self[flag].destroy(); //destroy销毁，show(false) 移除
|
||||
let data = [{ position: coords }];
|
||||
_that._self[flag] = map.DiffuseCircle(data, {
|
||||
radius: 10,
|
||||
color: "rgba(81,217,254)", //扫描扇形的颜色，必须是十六进制或者rgb
|
||||
duration: 30, //圆环与上一个圆环出现的间隔时间。配合speed参数可以调整圆圈的数量
|
||||
speed: 4 //圆环移动速度
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 聚合撒点
|
||||
* @param {*} coords 点位数据 geojson lng lat
|
||||
* @param {*} icon 点位图
|
||||
*/
|
||||
MapUtil.prototype.aggregateScatteringPoint = (obj) => {
|
||||
let { coords, icon, flag, isclear, scale } = obj;
|
||||
let points = coords.map((item) => {
|
||||
item.lng = item.jd;
|
||||
item.lat = item.wd;
|
||||
return item;
|
||||
});
|
||||
if (!_that._self[flag]) _that._self[flag] = [];
|
||||
if (isclear) _that.removeElement(flag); //移除聚合
|
||||
let maker = map.clusterLayer(points, {
|
||||
id: flag,
|
||||
size: 18,
|
||||
pixelRange: 60,
|
||||
gradient: {
|
||||
1: "#00BFFF",
|
||||
10: "#008000",
|
||||
100: "#FFA500",
|
||||
1000: "#FF0000"
|
||||
}, //可以自定义图片,把颜色换成图片地址
|
||||
// gradient: { '1': icon, '10': icon, '100': icon, '1000': icon }, //可以自定义图片,把颜色换成图片地址
|
||||
fontSize: 12,
|
||||
fontColor: "#fff",
|
||||
style: "spiral",
|
||||
image: icon,
|
||||
scale: scale ? scale : 1,
|
||||
// highlightImage:icon,
|
||||
fontFamily: ["Microsoft YaHei"]
|
||||
});
|
||||
|
||||
_that._self[flag].push(maker);
|
||||
|
||||
// 聚合的点击一个
|
||||
maker.addEventListener("click", (val) => {
|
||||
_that.openInfoDetail(flag, [val]); //点击打开详情
|
||||
});
|
||||
// 聚合的多个
|
||||
maker.addEventListener("clusterClick", (val) => {
|
||||
_that.openInfoDetail(flag, val); //点击打开详情
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 热力图
|
||||
* @param {*} coords 数组
|
||||
*/
|
||||
MapUtil.prototype.showHeatDrawing = (res) => {
|
||||
let { coords, flag, isclear, color } = res;
|
||||
if (!_that._self[flag]) _that._self[flag] = [];
|
||||
if (isclear) _that.removeElement(flag); //清除热力
|
||||
let data = {
|
||||
type: "FeatureCollection",
|
||||
features: []
|
||||
};
|
||||
for (let index = 0; index < coords.length; index++) {
|
||||
const item = coords[index];
|
||||
let jd = item.lng || item.jd;
|
||||
let wd = item.lat || item.wd;
|
||||
let mag =
|
||||
item.count <= 10
|
||||
? 1.4
|
||||
: item.count > 10 && item.count <= 50
|
||||
? 1.6
|
||||
: 1.9;
|
||||
let obj = {
|
||||
properties: { mag },
|
||||
type: "Feature",
|
||||
geometry: {
|
||||
type: "Point",
|
||||
coordinates: [jd, wd, 0.1]
|
||||
}
|
||||
};
|
||||
data.features.push(obj);
|
||||
}
|
||||
let colors = {
|
||||
0: "rgba(23,102,172,0)",
|
||||
0.5: "rgb(209,229,240)",
|
||||
1: "rgb(178,24,43)"
|
||||
};
|
||||
if (color) colors = { 0: color[0], 0.5: color[1], 1: color[2] };
|
||||
let heartmap = map.HeatMap(data, { colors });
|
||||
_that._self[flag].push(heartmap);
|
||||
};
|
||||
|
||||
/**
|
||||
* 删除图层要素
|
||||
* @param {*} layer 唯一标识
|
||||
*/
|
||||
MapUtil.prototype.removeElement = (layer) => {
|
||||
//警力装备
|
||||
if (layer == "gpsZb") {
|
||||
for (let key in _that._self.gpsZb) {
|
||||
let item = _that._self.gpsZb[key];
|
||||
if (item && item.length > 0) {
|
||||
for (let child in item) {
|
||||
item[child].destroy();
|
||||
}
|
||||
_that._self.gpsZb[key] = [];
|
||||
}
|
||||
}
|
||||
}
|
||||
// 其他图层
|
||||
if (!_that._self[layer]) return false;
|
||||
|
||||
if (layer !== "gpsZb") {
|
||||
for (let i = 0; i < _that._self[layer].length; i++) {
|
||||
const el = _that._self[layer][i];
|
||||
if (typeof el !== "string") {
|
||||
el.destroy(); //destory()销毁 , show(false) false:隐藏 true ：展示
|
||||
} else {
|
||||
_that._CustomDraw.remove(el);
|
||||
}
|
||||
}
|
||||
_that._self[layer] = [];
|
||||
|
||||
// 带标题
|
||||
let flagT = layer + "Title"; // d带标题的撒点
|
||||
if (!_that._self[flagT]) return false;
|
||||
for (let i = 0; i < _that._self[flagT].length; i++) {
|
||||
const el = _that._self[flagT][i];
|
||||
el.destroy(); //destory()销毁 , show(false) false:隐藏 true ：展示
|
||||
}
|
||||
_that._self[flagT] = [];
|
||||
}
|
||||
};
|
||||
/**
|
||||
* 删除图层的某个要素
|
||||
* @param {*} layer 唯一标识
|
||||
*/
|
||||
MapUtil.prototype.removeElementOne = (layer, id) => {
|
||||
if (!_that.idsBox[layer]) return false;
|
||||
let list = _that.idsBox[layer];
|
||||
list.forEach((el, index) => {
|
||||
if (el == id) {
|
||||
_that.idsBox[layer].splice(index, 1);
|
||||
if (_that._self[layer][index]) _that._self[layer][index].destroy();
|
||||
_that._self[layer].splice(index, 1);
|
||||
if (layer == "rx") {
|
||||
let flagT = layer + "Title";
|
||||
if (_that._self[flagT][index]) _that._self[flagT][index].destroy();
|
||||
_that._self[flagT].splice(index, 1);
|
||||
_that.removeGpsZbOverlayById(id); //删除图标
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 清除所有元素
|
||||
MapUtil.prototype.removeElementAll = () => {
|
||||
for (let key in _that._self) {
|
||||
let itemArr = _that._self[key];
|
||||
if (
|
||||
key != "rx" &&
|
||||
key != "rxTitle" &&
|
||||
key != "gpsZb" &&
|
||||
itemArr &&
|
||||
itemArr.length > 0
|
||||
) {
|
||||
for (let child in itemArr) {
|
||||
if (typeof itemArr[child] == "string") {
|
||||
_that._CustomDraw.remove(itemArr[child]);
|
||||
} else {
|
||||
itemArr[child].destroy();
|
||||
}
|
||||
}
|
||||
_that._self[key] = [];
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 删除图标装备
|
||||
MapUtil.prototype.removeGpsZbOverlayById = (id) => {
|
||||
if (_that._self.gpsZb[id]) {
|
||||
try {
|
||||
let info = _that._self.gpsZb[id];
|
||||
if (info) {
|
||||
info.forEach((element) => {
|
||||
element.destroy();
|
||||
});
|
||||
delete _that._self.gpsZb[id];
|
||||
}
|
||||
} catch (err) {}
|
||||
}
|
||||
};
|
||||
|
||||
// 绘制数据的初始化
|
||||
MapUtil.prototype.Drawplot = (color) => {
|
||||
const {
|
||||
point,
|
||||
line,
|
||||
polygon,
|
||||
circle,
|
||||
rectangle,
|
||||
geoJson,
|
||||
remove,
|
||||
enableEdit
|
||||
} = map.draw({
|
||||
lineWidth: 2,
|
||||
lineColor: "rgba(233,168,32,1)",
|
||||
fillColor: "rgba(233,168,32,0.5)",
|
||||
color: "rgba(233,168,32,1)",
|
||||
pixelSzie: 0
|
||||
});
|
||||
_that._CustomDraw = {
|
||||
point,
|
||||
line,
|
||||
polygon,
|
||||
circle,
|
||||
rectangle,
|
||||
geoJson,
|
||||
remove,
|
||||
enableEdit
|
||||
};
|
||||
};
|
||||
/**
|
||||
* 绘制工具
|
||||
* @param {*} type 绘制形状
|
||||
* (point 点, line 线, circle 圆, polygon 多边形, rectangle 矩形) ,
|
||||
* geoJson:根据geojson回显图
|
||||
*/
|
||||
MapUtil.prototype.plot = (res, resFun) => {
|
||||
let { flag, color, linecolor, type, coords } = res;
|
||||
if (!_that._self[flag]) _that._self[flag] = [];
|
||||
if (res.isclear) _that.removePlot(flag); //移除绘制工具
|
||||
if (res.isclear && res.type == "polygon") _that.removeEara(flag); //移除回显的面
|
||||
if (res.isclear && res.type == "line") _that.removeElement(flag); //移除回显的线条
|
||||
switch (type) {
|
||||
case "point":
|
||||
_that._CustomDraw.point((val) => {
|
||||
_that.handlePlot(val, type, flag, resFun);
|
||||
});
|
||||
break;
|
||||
case "rectangle":
|
||||
_that._CustomDraw.rectangle((val) => {
|
||||
_that.handlePlot(val, type, flag, resFun);
|
||||
});
|
||||
break;
|
||||
case "circle":
|
||||
_that._CustomDraw.circle((val) => {
|
||||
_that.handlePlot(val, type, flag, resFun);
|
||||
});
|
||||
break;
|
||||
case "polygon":
|
||||
_that._CustomDraw.polygon(
|
||||
(val) => {
|
||||
_that.handlePlot(val, type, flag, resFun);
|
||||
},
|
||||
{
|
||||
fillColor: color || "rgba(233,168,32,0.5)",
|
||||
lineColor: linecolor || "rgba(233,168,32,1)"
|
||||
}
|
||||
);
|
||||
break;
|
||||
case "line":
|
||||
_that._CustomDraw.line((val) => {
|
||||
_that.handlePlot(val, type, flag, resFun);
|
||||
});
|
||||
break;
|
||||
case "geoJson": //返回面
|
||||
let json = {
|
||||
type: "FeatureCollection",
|
||||
features: [
|
||||
{
|
||||
type: "Feature",
|
||||
geometry: {
|
||||
type: "Polygon",
|
||||
coordinates: coords // coords 是三维数组
|
||||
},
|
||||
id: flag,
|
||||
properties: {
|
||||
fillColor: color || "rgba(233,168,32,1)",
|
||||
lineColor: linecolor || "rgba(233,168,32,1)"
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
_that._CustomDraw.geoJson(json, (data) => {
|
||||
_that.handlePlot(data, type, flag, resFun);
|
||||
});
|
||||
break;
|
||||
}
|
||||
};
|
||||
/**
|
||||
* 处理自定义数据
|
||||
* @param {*} val 返回数据
|
||||
* @param {*} type 类型
|
||||
* @param {*} flag 唯一标识
|
||||
* @param {*} resFun 回调
|
||||
*/
|
||||
MapUtil.prototype.handlePlot = (val, type, flag, resFun) => {
|
||||
_that._self[flag].push(val.id);
|
||||
let coords = val.positionData; //绘制区域
|
||||
resFun(coords, type, flag, val);
|
||||
};
|
||||
|
||||
/**
|
||||
* 移除绘制工具
|
||||
* @param {*} flag 唯一标识
|
||||
*/
|
||||
MapUtil.prototype.removePlot = (flag) => {
|
||||
if (!_that._self[flag]) return false;
|
||||
_that._self[flag].forEach((v) => {
|
||||
_that._CustomDraw.remove(v);
|
||||
});
|
||||
};
|
||||
/**
|
||||
* 移除绘制面
|
||||
* @param {*} flag 唯一标识
|
||||
*/
|
||||
MapUtil.prototype.removeEara = (flag) => {
|
||||
_that._CustomDraw.remove(flag);
|
||||
_that.removePlot(flag);
|
||||
};
|
||||
/**
|
||||
* 创建线
|
||||
* @param {*} type 回显形状
|
||||
* (solid 实线, dash 虚线, FlowColor 彩虹线, RoadLine 流线
|
||||
*/
|
||||
MapUtil.prototype.createLine = (res) => {
|
||||
let { type, coords, isclear, flag, width } = res;
|
||||
// coords 是数组对象，可以同时撒多条数据
|
||||
if (!coords) return false;
|
||||
if (!_that._self[flag]) _that._self[flag] = [];
|
||||
if (isclear) _that.removeElement(flag); //移除回显的线条
|
||||
let data = coords.map((item, index) => {
|
||||
return {
|
||||
position: item.coords[0], //二维数组
|
||||
text: "",
|
||||
id: index,
|
||||
userData: {
|
||||
name: item.text
|
||||
}
|
||||
};
|
||||
});
|
||||
let style = {
|
||||
color: "rgba(20, 237, 245,1)",
|
||||
width: width ? width : 10,
|
||||
type,
|
||||
highlightColor: "red",
|
||||
labelOption: {
|
||||
pixelOffset: [0, -1],
|
||||
allShow: false,
|
||||
type: "text",
|
||||
fontColor: "rgba(20, 237, 245,1)"
|
||||
}
|
||||
};
|
||||
let line = map.createLine(data, style, flag);
|
||||
_that._self[flag].push(line);
|
||||
};
|
||||
|
||||
/**
|
||||
* 回显平面- 圆 - 多边形 - 矩形
|
||||
* @param {*} type 回显形状
|
||||
* type: 'polygon', 'rectangle
|
||||
coords = [{
|
||||
position:[[[jd,wd],[jd,wd] ---]], //三维数组
|
||||
text,//展示的文字
|
||||
id, //唯一标识
|
||||
FID, //渲染颜色的标识
|
||||
userData:{} //存储数据
|
||||
}]
|
||||
|
||||
* type:circle
|
||||
coords:[jd,wd] radius:半径
|
||||
|
||||
* @param {*} text 展示的文字
|
||||
*/
|
||||
MapUtil.prototype.echoPlane = (res) => {
|
||||
let {
|
||||
type,
|
||||
coords,
|
||||
fontColor,
|
||||
fontSize,
|
||||
text = "",
|
||||
radius = 0,
|
||||
isclear,
|
||||
flag,
|
||||
id = 1,
|
||||
color,
|
||||
linecolor
|
||||
} = res;
|
||||
if (!coords) return;
|
||||
if (isclear) _that.removeElement(flag);
|
||||
if (!_that._self[flag]) _that._self[flag] = [];
|
||||
let color1 = color ? color : "rgba(29,237,245,0.6)";
|
||||
let linecolor1 = linecolor ? linecolor : "rgba(29,237,245,0.6)";
|
||||
let style = {
|
||||
color: color1,
|
||||
outLineColor: linecolor1,
|
||||
outLineWidth: 2,
|
||||
highlightColor: "rgba(255,0,0,0.5)",
|
||||
labelOption: {
|
||||
pixelOffset: [0, 0],
|
||||
allShow: true,
|
||||
fontColor: fontColor ? fontColor : "#ffffff",
|
||||
fontSize: fontSize ? fontSize : "12px"
|
||||
}
|
||||
};
|
||||
let maker;
|
||||
|
||||
if (type == "circle") {
|
||||
let params = [{ center: coords, radius, text, id }];
|
||||
maker = map.createCircle(params, style);
|
||||
} // 圆
|
||||
|
||||
if (type == "rectangle") maker = map.createRectangle(coords, style); // 矩形
|
||||
|
||||
if (type == "polygon") maker = map.createPolygon(coords, style); // 多边形
|
||||
_that._self[flag].push(maker);
|
||||
|
||||
maker.addEventListener("click", (val) => {
|
||||
if (flag == "xfq") {
|
||||
maker.highlight(val.id); //高亮展示
|
||||
if (val.id == _that.lightHeight) maker.highlight(0); //取消高亮展示
|
||||
_that.lightHeight = val.id;
|
||||
}
|
||||
if (flag == "zdxl_fzyc") {
|
||||
emitter.emit("showFzycInfo", { info: val, type: true });
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 轨迹回放
|
||||
* @param {*} coords 轨迹坐标.二维数组[[104.03640684556253,30.7415801286654],[103.98021233220163,30.6555411499294],[103.85766040251299,30.58094579138167]]
|
||||
* @param {*} isClear 是否清除上一次的记录
|
||||
*/
|
||||
MapUtil.prototype.displayLineAnimation = (res) => {
|
||||
let { coords, isClear, flag } = res;
|
||||
if (!coords) return;
|
||||
if (!_that._self[flag]) _that._self[flag] = [];
|
||||
if (isClear && _that._self[flag]) _that.removeElement(flag); //destroy 移除,start 播放,pause 暂停
|
||||
let lineString = getUUid().slice(3, 5);
|
||||
const data = [
|
||||
{
|
||||
position: coords,
|
||||
text: "实线",
|
||||
id: lineString,
|
||||
userData: {
|
||||
name: "测试1"
|
||||
}
|
||||
}
|
||||
];
|
||||
const track = map.trajectoryRealtime(data, {
|
||||
color: "#28F", //轨迹背景颜色
|
||||
width: 8,
|
||||
image: "images/car.png",
|
||||
speed: 10000, // 单位 m/s
|
||||
imageWidth: 20,
|
||||
imageHeight: 40,
|
||||
isShowLine: false, //轨迹线是否显示
|
||||
isAgain: false, //轨迹运动是否重复,
|
||||
traveledColor: "#32b1fb" //运动轨迹颜色
|
||||
});
|
||||
track.start();
|
||||
// 展示起点和终点
|
||||
track.on("length", (data) => {
|
||||
let obj = { flag };
|
||||
if (data && data[0].percent == 0) {
|
||||
obj.icon = require("@/assets/point/start.png"); // 开始
|
||||
let item = data[0].position[0];
|
||||
obj.coords = [
|
||||
{
|
||||
jd: item[0],
|
||||
wd: item[1]
|
||||
}
|
||||
];
|
||||
_that.makerSki(obj);
|
||||
}
|
||||
if (data && data[0].percent == 99) {
|
||||
let len = data[0].position.length;
|
||||
let val = data[0].position[len - 1];
|
||||
obj.coords = [
|
||||
{
|
||||
jd: val[0],
|
||||
wd: val[1]
|
||||
}
|
||||
];
|
||||
obj.icon = require("@/assets/point/end.png"); // 结束
|
||||
_that.makerSki(obj);
|
||||
}
|
||||
});
|
||||
_that._self[flag].push(track);
|
||||
};
|
||||
|
||||
/**geojson 创建线*/
|
||||
MapUtil.prototype.createBoundarysLine = (res) => {
|
||||
let { data } = res;
|
||||
if (!data) return false;
|
||||
if (_that.polygonGeoLine) _that.polygonGeoLine.destroy();
|
||||
_that.polygonGeoLine = map.createLine(data, {
|
||||
color: "rgba(20,237,245,1)",
|
||||
outLineColor: "#cf1010",
|
||||
width: 10,
|
||||
type: "solid",
|
||||
highlightColor: "red",
|
||||
labelOption: {
|
||||
pixelOffset: [0, -1],
|
||||
allShow: false,
|
||||
type: "text",
|
||||
fontColor: "#ffffff"
|
||||
}
|
||||
});
|
||||
_that.polygonGeoLine.flyTo();
|
||||
};
|
||||
|
||||
/**geojson 创建边界*/
|
||||
MapUtil.prototype.createBoundarys = (res) => {
|
||||
let { data } = res;
|
||||
if (!data) return false;
|
||||
if (_that.polygonGeo) _that.removeBj();
|
||||
_that.polygonGeo = map.createPolygon(data, {
|
||||
color: "rgba(20,237,245,0.3)",
|
||||
outLineColor: "#cf1010",
|
||||
outLineWidth: 6,
|
||||
highlightColor: "red",
|
||||
type: "solid",
|
||||
labelOption: {
|
||||
pixelOffset: [2, 0],
|
||||
allShow: false,
|
||||
fontColor: "#ffffff"
|
||||
}
|
||||
});
|
||||
_that.polygonGeo.flyTo();
|
||||
};
|
||||
// 移除边界
|
||||
MapUtil.prototype.removeBj = (res) => {
|
||||
_that.polygonGeo.destroy();
|
||||
};
|
||||
|
||||
// 打开详情弹窗
|
||||
MapUtil.prototype.openInfoDetail = (flag, data) => {
|
||||
switch (flag) {
|
||||
case "rx":
|
||||
emitter.emit("showJzInfo", data);
|
||||
break;
|
||||
case "gaj":
|
||||
case "pcs":
|
||||
case "jwz":
|
||||
case "xfq":
|
||||
case "kfd":
|
||||
case "zdfkd":
|
||||
emitter.emit("showGazy", [data]);
|
||||
break;
|
||||
case "sp":
|
||||
emitter.emit("showGzy", data);
|
||||
emitter.emit("showGzyInfo", data);
|
||||
break;
|
||||
case "kk":
|
||||
emitter.emit("showGzy", data);
|
||||
break;
|
||||
case "aj":
|
||||
case "jqMap":
|
||||
emitter.emit("showAj", [data]);
|
||||
break;
|
||||
case "yj":
|
||||
case "yjMap":
|
||||
emitter.emit("showYjxq", data);
|
||||
break;
|
||||
case "jczMap_jws":
|
||||
emitter.emit("showJws", [data]);
|
||||
break;
|
||||
case "jczMap_jcz":
|
||||
emitter.emit("showJcz", [data]);
|
||||
break;
|
||||
case "zjk":
|
||||
emitter.emit("showZjk", [data]);
|
||||
break;
|
||||
case "zyk":
|
||||
emitter.emit("showZyk", [data]);
|
||||
break;
|
||||
}
|
||||
};
|
||||
}
|
||||
// 获取uuid 作为边界图层ID
|
||||
function getUUid() {
|
||||
var list = [];
|
||||
var hexDigits = "0123456789abcdefghijklmnopqrstuvwxyz";
|
||||
for (var i = 0; i < 32; i++) {
|
||||
list[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
|
||||
}
|
||||
list[14] = "4";
|
||||
list[19] = hexDigits.substr((list[19] & 0x3) | 0x8, 1);
|
||||
list[8] = list[13] = list[18] = list[23];
|
||||
let uuid = list.join("");
|
||||
return uuid;
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
{
|
||||
"coords":"104.191712,30.332337,104.190379,30.321575,104.231962,30.315252,104.227763,30.283791,104.241479,30.268395,104.228153,30.257561,104.242864,30.244730,104.270769,30.240455,104.269092,30.219985,104.277914,30.224568,104.293406,30.209630,104.302729,30.213200,104.307097,30.202998,104.325129,30.207037,104.355347,30.194195,104.363096,30.183460,104.354874,30.185101,104.352787,30.178549,104.386214,30.163126,104.392108,30.139422,104.386563,30.134069,104.406584,30.128212,104.417883,30.110023,104.411449,30.102072,104.421724,30.093237,104.433945,30.091459,104.434490,30.102374,104.447575,30.103505,104.455815,30.090000,104.477106,30.090159,104.472787,30.079513,104.480840,30.075074,104.465410,30.062860,104.479359,30.049892,104.456587,30.050092,104.452813,30.040084,104.465165,30.035835,104.455327,30.027999,104.458818,30.019591,104.448027,29.999489,104.477911,29.990649,104.457530,29.956299,104.478816,29.947313,104.470366,29.937748,104.486035,29.924377,104.486081,29.908460,104.505562,29.900162,104.492675,29.891903,104.492992,29.877076,104.501067,29.874142,104.487466,29.868024,104.475572,29.839224,104.480389,29.823872,104.473848,29.813915,104.499239,29.808909,104.491448,29.794094,104.465447,29.790942,104.442186,29.735454,104.427166,29.742971,104.414194,29.733388,104.404817,29.736075,104.393217,29.753224,104.373968,29.744401,104.367685,29.731782,104.356188,29.739397,104.355446,29.733333,104.335661,29.730418,104.332333,29.717842,104.347244,29.712211,104.346778,29.702659,104.336663,29.700136,104.313561,29.713003,104.295611,29.673814,104.280138,29.671614,104.283271,29.663143,104.274707,29.653997,104.280570,29.652266,104.271474,29.639306,104.247799,29.635751,104.237983,29.645245,104.243843,29.650490,104.231474,29.654349,104.237800,29.660088,104.228079,29.663086,104.233011,29.673066,104.227693,29.678490,104.204520,29.666834,104.193826,29.684265,104.200269,29.695269,104.183408,29.688925,104.185530,29.712206,104.181102,29.708149,104.167587,29.719218,104.164097,29.712006,104.156209,29.719685,104.147994,29.708280,104.132691,29.711712,104.116456,29.735662,104.105234,29.739340,104.109314,29.745872,104.099019,29.750351,104.088669,29.742201,104.058084,29.781140,104.070105,29.785362,104.088526,29.816182,104.072903,29.815785,104.072469,29.829395,104.040234,29.833418,104.056118,29.857406,104.049233,29.871115,104.040958,29.865559,104.027382,29.876641,104.001555,29.876057,103.981529,29.851563,103.964863,29.857306,103.968616,29.869100,103.991537,29.880289,103.998148,29.894420,103.984192,29.887484,103.969852,29.890776,103.952945,29.917885,103.962461,29.927505,103.946054,29.965100,103.952523,29.969262,103.917956,29.980131,103.926683,29.990640,103.959824,29.983321,103.957729,29.994857,103.972654,30.001121,103.966893,30.009745,103.977840,30.029956,103.971729,30.047714,103.987262,30.074897,103.977687,30.093740,103.981558,30.102835,103.968602,30.112735,103.978708,30.128111,103.970273,30.143360,103.981090,30.145538,103.982377,30.158880,103.974518,30.161745,103.979487,30.172736,103.969649,30.180335,103.989892,30.197132,103.959528,30.216906,103.966730,30.233955,103.979510,30.240572,103.964281,30.252780,103.969394,30.267698,103.984404,30.277331,103.997281,30.265453,104.047086,30.274065,104.051446,30.261304,104.062409,30.268811,104.066778,30.256984,104.074634,30.261237,104.078283,30.250003,104.089862,30.253217,104.094024,30.241503,104.124537,30.228739,104.149999,30.246957,104.150805,30.269599,104.165559,30.285692,104.179104,30.327688,104.191656,30.332522,104.191712,30.332337;104.479952"
|
||||
}
|
||||
@ -18,7 +18,6 @@
|
||||
<el-menu-item :index="items.path">{{items.meta.title}}</el-menu-item>
|
||||
</el-radio-group>
|
||||
</el-sub-menu> <el-menu-item v-else :index="item.path">{{item.meta.title}}</el-menu-item></template>
|
||||
|
||||
</el-menu>
|
||||
<!-- <div class="meunAside">
|
||||
<ul v-if="props.meuns.children" class="meunBox noScollLine">
|
||||
@ -81,14 +80,14 @@ export default {
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.meunAside {
|
||||
width: 152px;
|
||||
height: calc(100vh - 88px);
|
||||
background: #fff;
|
||||
width: 300px;
|
||||
height: calc(100vh);
|
||||
background: #ff000000;
|
||||
padding: 10px 0 0 0;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
color: #000;
|
||||
color: #ffffff;
|
||||
.meunBox {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
@ -133,4 +132,26 @@ export default {
|
||||
// }
|
||||
}
|
||||
}
|
||||
::v-deep .el-menu-item{
|
||||
color: #ffffff;
|
||||
}
|
||||
::v-deep .el-menu-item:hover{
|
||||
background-color: #0003;
|
||||
}
|
||||
::v-deep .el-menu-item.is-active{
|
||||
background-image: linear-gradient(to right, #2356d4 0%, #8efbde 100%);
|
||||
margin: 0 14px;
|
||||
color: #ffffff;
|
||||
border-radius: 4px;
|
||||
padding-left: 25px !important;
|
||||
}
|
||||
::v-deep .el-sub-menu__title{
|
||||
color: #ffffff;
|
||||
}
|
||||
::v-deep .el-menu{
|
||||
background-color: #3f8cff00;
|
||||
}
|
||||
::v-deep .el-sub-menu__title:hover{
|
||||
background-color: #08080800;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -309,80 +309,80 @@ export const publicRoutes = [{
|
||||
]
|
||||
},
|
||||
// 考勤管理 流程管理 请休假管理 请休假审批 外出管理 外出审批 出差管理 出差审批
|
||||
{
|
||||
path: "/kaoQinGL",
|
||||
name: "kaoQinGL",
|
||||
redirect: "/lcgl",
|
||||
meta: {
|
||||
title: "考勤管理",
|
||||
icon: "article"
|
||||
},
|
||||
children: [{
|
||||
path: "/lcgl",
|
||||
name: "lcgl",
|
||||
component: () => import("@/views/backOfficeSystem/kaoQinGL/lcgl/index"),
|
||||
meta: {
|
||||
title: "流程管理",
|
||||
icon: "role"
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/qxjgl",
|
||||
name: "qxjgl",
|
||||
component: () => import("@/views/backOfficeSystem/kaoQinGL/qxjgl/index"),
|
||||
meta: {
|
||||
title: "请休假管理",
|
||||
icon: "role"
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/qxjsp",
|
||||
name: "qxjsp",
|
||||
component: () => import("@/views/backOfficeSystem/kaoQinGL/qxjsp/index"),
|
||||
meta: {
|
||||
title: "请休假审批",
|
||||
icon: "role"
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/wcgl",
|
||||
name: "wcgl",
|
||||
component: () => import("@/views/backOfficeSystem/kaoQinGL/wcgl/index"),
|
||||
meta: {
|
||||
title: "外出管理",
|
||||
icon: "role"
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/wcsp",
|
||||
name: "wcsp",
|
||||
component: () => import("@/views/backOfficeSystem/kaoQinGL/wcsp/index"),
|
||||
meta: {
|
||||
title: "外出审批",
|
||||
icon: "role"
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/ccgl",
|
||||
name: "ccgl",
|
||||
component: () => import("@/views/backOfficeSystem/kaoQinGL/ccgl/index"),
|
||||
meta: {
|
||||
title: "出差管理",
|
||||
icon: "role"
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/ccsp",
|
||||
name: "ccsp",
|
||||
component: () => import("@/views/backOfficeSystem/kaoQinGL/ccsp/index"),
|
||||
meta: {
|
||||
title: "出差审批",
|
||||
icon: "role"
|
||||
}
|
||||
},
|
||||
// {
|
||||
// path: "/kaoQinGL",
|
||||
// name: "kaoQinGL",
|
||||
// redirect: "/lcgl",
|
||||
// meta: {
|
||||
// title: "考勤管理",
|
||||
// icon: "article"
|
||||
// },
|
||||
// children: [{
|
||||
// path: "/lcgl",
|
||||
// name: "lcgl",
|
||||
// component: () => import("@/views/backOfficeSystem/kaoQinGL/lcgl/index"),
|
||||
// meta: {
|
||||
// title: "流程管理",
|
||||
// icon: "role"
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// path: "/qxjgl",
|
||||
// name: "qxjgl",
|
||||
// component: () => import("@/views/backOfficeSystem/kaoQinGL/qxjgl/index"),
|
||||
// meta: {
|
||||
// title: "请休假管理",
|
||||
// icon: "role"
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// path: "/qxjsp",
|
||||
// name: "qxjsp",
|
||||
// component: () => import("@/views/backOfficeSystem/kaoQinGL/qxjsp/index"),
|
||||
// meta: {
|
||||
// title: "请休假审批",
|
||||
// icon: "role"
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// path: "/wcgl",
|
||||
// name: "wcgl",
|
||||
// component: () => import("@/views/backOfficeSystem/kaoQinGL/wcgl/index"),
|
||||
// meta: {
|
||||
// title: "外出管理",
|
||||
// icon: "role"
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// path: "/wcsp",
|
||||
// name: "wcsp",
|
||||
// component: () => import("@/views/backOfficeSystem/kaoQinGL/wcsp/index"),
|
||||
// meta: {
|
||||
// title: "外出审批",
|
||||
// icon: "role"
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// path: "/ccgl",
|
||||
// name: "ccgl",
|
||||
// component: () => import("@/views/backOfficeSystem/kaoQinGL/ccgl/index"),
|
||||
// meta: {
|
||||
// title: "出差管理",
|
||||
// icon: "role"
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// path: "/ccsp",
|
||||
// name: "ccsp",
|
||||
// component: () => import("@/views/backOfficeSystem/kaoQinGL/ccsp/index"),
|
||||
// meta: {
|
||||
// title: "出差审批",
|
||||
// icon: "role"
|
||||
// }
|
||||
// },
|
||||
|
||||
]
|
||||
},
|
||||
// ]
|
||||
// },
|
||||
{
|
||||
path: "/systemConfig",
|
||||
name: "systemConfigModel",
|
||||
|
||||
@ -5,17 +5,23 @@
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
.sidebar-container {
|
||||
height: 100%;
|
||||
background: url('~@/assets/images/aside.png') no-repeat center center;
|
||||
overflow: hidden;
|
||||
background-size: 100% 100%;
|
||||
flex-shrink: 0;
|
||||
|
||||
// 重置 element-plus 的css
|
||||
.horizontal-collapse-transition {
|
||||
transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
|
||||
}
|
||||
|
||||
.scrollbar-wrapper {
|
||||
overflow-x: hidden !important;
|
||||
}
|
||||
|
||||
.el-scrollbar__bar.is-vertical {
|
||||
right: 0px;
|
||||
}
|
||||
@ -129,6 +135,7 @@
|
||||
}
|
||||
|
||||
.withoutAnimation {
|
||||
|
||||
.main-container,
|
||||
.sidebar-container {
|
||||
transition: none;
|
||||
@ -141,6 +148,7 @@
|
||||
.svg-icon {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.sub-el-icon {
|
||||
margin-right: 12px;
|
||||
margin-left: -2px;
|
||||
|
||||
@ -219,10 +219,10 @@ onUnmounted(() => {
|
||||
--el-dialog-bg-color: #10295b;
|
||||
}
|
||||
::v-deep .el-dialog__title {
|
||||
color: #fff;
|
||||
color: #140101;
|
||||
}
|
||||
.settingItem {
|
||||
color: #fff;
|
||||
color: #000000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 30px;
|
||||
|
||||
@ -4,7 +4,7 @@ function resolve(dir) {
|
||||
return path.join(__dirname, dir);
|
||||
}
|
||||
// const serverHost = "http://192.192.192.109:8006";
|
||||
const serverHost = "http://192.168.8.9:8006";
|
||||
const serverHost = "http://192.168.43.92:8006";
|
||||
// const serverHost ="http://80.60.36.64:8006"
|
||||
module.exports = {
|
||||
publicPath: "/",
|
||||
|
||||
Reference in New Issue
Block a user