1.使用百度地图最重要的一点就是得有百度AK，在百度地图开发者申请秘钥
2.在项目中引用
引入时，有两种形式：
第一种，以script 形式在index.html页面引入
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=yourAK"></script>然后就可以在页面中使用，在mount中加载百度地图（可以直接在mount中写调用及一系列操作，也可以在methods中定义方法，然后在mount中调用方法）
第二种（这种没有测试，在网上看到的），首先，下载百度地图包 vue-baidu-map
npm i vue-baidu-map --save然后，在main.js中引入
import BaiduMap from 'vue-baidu-map';
Vue.use(BaiduMap, {
/* Visit http://lbsyun.baidu.com/apiconsole/key for details about app key. */
ak: 'YOUR_APP_KEY' })下面的代码是我实际用的，作为参考，很多都已经细化，并且有注释。
包含在地图上添加控件，路线规划，打点画圈、更新图标、点击变色等等.....
<template>
<div id="data-view" class="my" @change="dataChange">
<top-header :zaiqingid="zaiqingid"></top-header>
<div class="main-content">
<div class="block-left-right-content">
<div class="block-top-bottom-content" style="">
<dv-border-box-10
id="allmap"
style="border: 5px solid #1890ff; position: relative"
>
</dv-border-box-10>
</div>
<!-- 力量派遣 -->
<template v-if="this.isActive == '5'">
<liliangbushu :passZaiqing="passZaiqing"></liliangbushu>
</template>
<!-- 图上组会 -->
<template v-if="this.isActive == '444444'">
<tushangzuhui :fanwei="fanwei"></tushangzuhui>
</template>
<!-- 路线规划 -->
<template v-if="this.isActive == '3'">
<div id="luxianguihua">
<el-form
:inline="true"
:model="form"
class="demo-form-inline"
style="margin-top: 10px"
>
<div style="color: #ffd700"><h3>当前灾情</h3></div>
<div
style="
height: 100px;
overflow: auto;
padding: 0 5px;
margin-bottom: 10px;
"
>
<div
style="
width: 100%;
height: 100%;
float: left;
border-top: 5px solid rgb(29, 72, 196);
"
>
<div style="width: 100%; height: 33.3%; float: left">
<div
style="
width: 100%;
height: 100%;
float: left;
font-size: 18px;
font-weight: bold;
padding-top: 4%;
color: rgb(247, 168, 69);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
"
>
{{ passZaiqing.name }}
</div>
</div>
<div style="width: 100%; height: 33.3%; float: left">
<div
style="
width: 60%;
height: 100%;
float: left;
font-size: 14px;
padding-top: 4%;
"
>
<i class="el-icon-time" style="color: #fa824a"></i
>{{ passZaiqing.shijian }}
</div>
<div
style="
width: 40%;
height: 100%;
float: left;
font-size: 14px;
padding-top: 4%;
"
>
<i class="el-icon-star-on" style="color: #ff5809"></i
>{{ passZaiqing.jibie }}
</div>
</div>
<div
style="
width: 100%;
height: 33.3%;
float: left;
font-size: 14px;
padding-top: 2%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
"
>
<i
class="el-icon-location"
style="color: rgb(247, 168, 69)"
></i
>{{ passZaiqing.didian }}
</div>
</div>
</div>
<div
style="
height: 36px;
padding: 0 0 0 5px;
border-left: 3px solid rgb(247, 168, 69);
color: #f40;
font-weight: bold;
"
>
<el-form-item prop="jigou" style="width: 75%; float: left">
<treeselect
show-checkbox
v-model="form.jigou"
:options="deptOptions"
:normalizer="normalizer"
placeholder="选择出警机构"
@select="getName"
/>
</el-form-item>
<!-- <el-tooltip class="item" effect="light" content="点击后请稍等片刻或者连续点击几次" placement="top"> -->
<el-button
type="primary"
@click="routePlan(form)"
style="width: 20%; float: left"
>go</el-button
>
<!-- </el-tooltip> -->
</div>
<template v-if="luxianList.length > 0">
<div style="color: #ffd700"><h3>路线规划</h3></div>
<div
style="
height: 660px;
overflow: auto;
padding: 0 5px;
margin-bottom: 10px;
"
class="routePlanList"
>
<div
v-for="(item, i) in luxianList"
@click="setRoute(item, i)"
:key="i"
:class="{ ac: i == isactiveroute }"
style="
width: 100%;
height: 15%;
float: left;
border-top: 5px solid rgb(29, 72, 196);
"
>
<div style="width: 100%; height: 33.3%; float: left">
<div
style="
width: 100%;
height: 100%;
float: left;
font-size: 20px;
font-weight: bold;
padding-top: 4%;
color: rgb(247, 168, 69);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
"
>
<span style="color: #fff; font-size: 16px"
>总路程:</span
>
{{ Number(item.dis).toFixed(4) }}
<span style="color: #fff; font-size: 16px">米</span>
</div>
</div>
<div
style="
width: 100%;
height: 33.3%;
float: left;
font-size: 14px;
padding-top: 5%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
"
>
<i
class="el-icon-time"
style="color: rgb(247, 168, 69)"
></i>
预计时长:{{ Number(item.dis /1000).toFixed(2) }}分钟
</div>
<div
style="
width: 100%;
height: 33.3%;
float: left;
font-size: 14px;
padding-top: 2%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
"
>
<i
class="el-icon-location"
style="color: rgb(247, 168, 69)"
></i>
出发点:{{ item.jgmc }}
</div>
</div>
</div>
</template>
</el-form>
</div>
</template>
<!-- 资源汇总 -->
<template v-if="this.isActive == '2'">
<ziyuanhuizong
:fanwei="fanwei"
@getData="getData(arguments)"
:passZaiqing="passZaiqing"
:juli="juli"
></ziyuanhuizong>
</template>
<!-- 点位标注 -->
<template v-if="this.isActive == '1'">
<dianweibiaozhu @getData="getData"></dianweibiaozhu>
</template>
<!-- 灾情 -->
<template v-if="this.isActive == '0'">
<ranking-board @getData="getData"></ranking-board>
</template>
</div>
</div>
<el-dialog
:modal="false"
title="消火栓详情"
:visible.sync="openxhsDetail"
style="margin-top: 10%; margin-right: 15%"
class="mydialog"
>
<el-form :model="detail" disabled>
<el-row :gutter="24" style="margin-bottom: 10px">
<el-col :span="12">
<el-form-item label="消火栓编号" :label-width="formLabelWidth">
<el-input v-model="detail.xhsbm" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="行政区划" :label-width="formLabelWidth">
<el-input v-model="detail.xzqh" autocomplete="off"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24" style="margin-bottom: 10px">
<el-col :span="12">
<el-form-item label="主消防机构" :label-width="formLabelWidth">
<el-input v-model="detail.xqjbm" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="管道口径" :label-width="formLabelWidth">
<el-input v-model="detail.gdkj" autocomplete="off"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24" style="margin-bottom: 10px">
<el-col :span="12">
<el-form-item label="电压" :label-width="formLabelWidth">
<el-input v-model="detail.dy" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="运行状态" :label-width="formLabelWidth">
<el-input v-model="detail.zt" autocomplete="off"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24" style="margin-bottom: 10px">
<el-col :span="12">
<el-form-item label="信号强度" :label-width="formLabelWidth">
<el-input v-model="detail.xhqd" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="压力" :label-width="formLabelWidth">
<el-input v-model="detail.yl" autocomplete="off"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24" style="margin-bottom: 10px">
<el-col :span="24">
<el-form-item label="地址" :label-width="formLabelWidth">
<el-input v-model="detail.sbdz" autocomplete="off"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-dialog>
<el-dialog
:modal="false"
title="微型消防站详情"
:visible.sync="openwxxfzDetail"
style="margin-top: 10%; margin-right: 15%"
class="mydialog"
>
<el-form :model="wxxfzDetail" disabled>
<el-row :gutter="24" style="margin-bottom: 10px">
<el-col :span="12">
<el-form-item label="名称" :label-width="formLabelWidth">
<el-input
v-model="wxxfzDetail.wxxfzmc"
autocomplete="off"
></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="联系电话" :label-width="formLabelWidth">
<el-input
v-model="wxxfzDetail.lxdh"
autocomplete="off"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24" style="margin-bottom: 10px">
<el-col :span="12">
<el-form-item label="经度" :label-width="formLabelWidth">
<el-input v-model="wxxfzDetail.jd" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="纬度" :label-width="formLabelWidth">
<el-input v-model="wxxfzDetail.wd" autocomplete="off"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24" style="margin-bottom: 10px">
<el-col :span="12">
<el-form-item label="岗前培训" :label-width="formLabelWidth">
<el-input
v-model="wxxfzDetail.sfgqpx"
autocomplete="off"
></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="是否达标" :label-width="formLabelWidth">
<el-input
v-model="wxxfzDetail.sfdb"
autocomplete="off"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24" style="margin-bottom: 10px">
<el-col :span="24">
<el-form-item label="装备器材" :label-width="formLabelWidth">
<el-input
type="textarea"
v-model="wxxfzDetail.zbqcpzqk"
autocomplete="off"
:autosize="{ minRows: 4, maxRows: 8 }"
></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-dialog>
<el-dialog
:modal="false"
title="消防机构详情"
:visible.sync="openxfjgDetail"
style="margin-top: 10%; margin-right: 15%"
class="mydialog"
>
<el-form :model="xfjgDetail" disabled>
<el-row :gutter="24" style="margin-bottom: 10px">
<el-col :span="12">
<el-form-item label="消防机构" :label-width="formLabelWidth">
<el-input
v-model="xfjgDetail.deptName"
autocomplete="off"
></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="经纬度" :label-width="formLabelWidth">
<el-input
v-model="xfjgDetail.status"
autocomplete="off"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24" style="margin-bottom: 10px">
<el-col :span="12">
<el-form-item label="负责人" :label-width="formLabelWidth">
<el-input
v-model="xfjgDetail.leader"
autocomplete="off"
></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="联系电话" :label-width="formLabelWidth">
<el-input
v-model="xfjgDetail.phone"
autocomplete="off"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24" style="margin-bottom: 10px">
<el-col :span="12">
<el-form-item label="邮箱" :label-width="formLabelWidth">
<el-input
v-model="xfjgDetail.email"
autocomplete="off"
></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="行政编消防员" :label-width="formLabelWidth">
<el-input
v-model="xfjgDetail.shibing"
autocomplete="off"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24" style="margin-bottom: 10px">
<el-col :span="12">
<el-form-item label="干部" :label-width="formLabelWidth">
<el-input
v-model="xfjgDetail.ganbu"
autocomplete="off"
></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="专职消防员" :label-width="formLabelWidth">
<el-input
v-model="xfjgDetail.xianyi"
autocomplete="off"
></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-dialog>
<el-dialog
:modal="false"
title="摄像头详情"
:visible.sync="opensxtDetail"
style="margin-top: 10%; margin-right: 15%"
class="mydialog"
>
<div style="width: 100%; height: 500px">
<div
id="videoId12123"
style="width: 100%; height: 100%;"
></div>
</div>
</el-dialog>
</div>
</template>
<script>
import kscreenshot from "kscreenshot";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import topHeader from "./topHeader";
import digitalFlop from "./digitalFlop";
import rankingBoard from "./rankingBoard";
import dianweibiaozhu from "./dianweibiaozhu";
import ziyuanhuizong from "./ziyuanhuizong";
import liliangbushu from "./liliangbushu";
import tushangzuhui from "./tushangzuhui";
import roseChart from "./roseChart";
import waterLevelChart from "./waterLevelChart";
import scrollBoard from "./scrollBoard";
import cards from "./cards";
import html2canvas from "html2canvas";
import {
shouyetuchuzaiqing,
shouyejishijingqing,
} from "@/api/juece/zaiqingchujing";
import { listAgency, getAgency } from "@/api/agency/agency";
import { getJingWeiduByDiDian, getJiGouByMinDis } from "@/api/juece/zaiqing";
import {
getXiaoHuoSuan,
getXiaoHuoSuanDetail,
getPointWithRange,
getAllJiGouPoints,
getWxxfzDetail,
} from "@/api/zffujian/fujian";
export default {
name: "DataView",
components: {
Treeselect,
topHeader,
digitalFlop,
rankingBoard,
roseChart,
waterLevelChart,
scrollBoard,
cards,
dianweibiaozhu,
ziyuanhuizong,
tushangzuhui,
liliangbushu,
},
data() {
return {
playerOptions: {
playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
autoplay: false, // 如果true,浏览器准备好时开始回放。
muted: false, // 默认情况下将会消除任何音频。
loop: false, // 导致视频一结束就重新开始。
preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
language: "zh-CN",
aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
sources: [
{
type: "video/m3u8", // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
src: "@assets/video.test.m3u8", // url地址
},
],
poster: "", // 你的封面地址
width: document.documentElement.clientWidth, // 播放器宽度
notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
controlBar: {
timeDivider: true,
durationDisplay: true,
remainingTimeDisplay: false,
fullscreenToggle: true, // 全屏按钮
},
},
isactiveroute: -1,
luxianList: [],
juli: "0",
passZaiqing: null,
dis: 0,
deptOptions: [],
jigous: [],
jigous1: [],
form: {
jigou: null,
didian: "",
},
mudidipre: "",
mudidi: {},
qidian: "",
jigou: "默认",
startAddres: "",
mapSelected: {
lng: "",
lat: "",
},
fanwei: {
x1: "",
x2: "",
y1: "",
y2: "",
},
isActive: 0,
zaiqingid: "",
selectedPoint: "",
curMarker: "",
msg: {},
points: {},
map2: null,
jishi: {
data: [],
rowNum: 9,
},
config: {
data: [],
rowNum: 9,
},
lngandlat: {
lng: "",
lat: "",
},
zyhzData: [], //资源汇总数据
formLabelWidth: "100px",
openxhsDetail: false,
openwxxfzDetail: false,
openxfjgDetail: false,
opensxtDetail: false,
detail: {},
xfjgDetail: {},
wxxfzDetail: {},
sxtDetail: {},
};
},
methods: {
setRoute(data, index) {
this.mudidipre = this.passZaiqing.jingweidu;
this.isactiveroute = index;
var startPoint = new BMap.Point(
Number(data.point.split(",")[0]),
Number(data.point.split(",")[1])
); //起始点
var endPoint = new BMap.Point(
Number(this.mudidipre.split(",")[0]),
Number(this.mudidipre.split(",")[1])
); //目的地
var driving = new BMap.DrivingRoute(this.map2, {
renderOptions: { map: this.map2, autoViewport: true },
onSearchComplete:onSearchCompleteHandler,//获取规划路径信息
policy: BMAP_DRIVING_POLICY_LEAST_DISTANCE,
});
//--------------获取规划路径信息s----------
function onSearchCompleteHandler(result){
var t = result.getPlan(0);
var tt = t.getRoute(0).getPath();
var result = "";
$.each(tt,function(index,item){
if(item){
if(result === ""){
result += item.lng + "," + item.lat;
}else{
result += ";" + item.lng + "," + item.lat;
}
}
});
var ob = new Object();
ob.coors = result;
ob.time = t.getDuration(false);
ob.formattime = t.getDuration(true);
ob.distance = t.getDistance(false);
ob.formatdistance = t.getDistance(true);
if(typeof onSearchCompleteYeWHandler === "function"){
onSearchCompleteYeWHandler(ob);
}
}
function onSearchCompleteYeWHandler(data){
//data中包含搜索返回的一些数据
if(data){
$("#result").text(data.coors);
$("#time").val(data.time);
$("#timeformate").val(data.formattime);
$("#distance").val(data.distance);
$("#distanceformate").val(data.formatdistance);
}
}
//-----------------获取规划路径信息e-------
// this.map2.clearOverlays(); //清除所有的覆盖物，包括打点、画圈等
// ----------清除上一条路线s------
var allOverlay = this.map2.getOverlays();
if (allOverlay.length) {
for (var i = 0; i < allOverlay.length; i++) {
debugger
console.log(allOverlay[i].toString())
if (allOverlay[i].toString() == "[object Polyline]") {
this.map2.removeOverlay(allOverlay[i]);
}
}
}
// ----------清除上一条路线e-----------------
driving.search(startPoint, endPoint);
},
getName(val) {
this.jigou = val.status;
},
normalizer(node) {
if (node.children && !node.children.length) {
delete node.children;
}
return {
id: node.deptId,
label: node.deptName,
children: node.children,
};
},
getTreeselect() {
// 路线规划标点
let cur = this;
listAgency().then((response) => {
this.jigous = response.data;
this.deptOptions = this.handleTree(response.data, "deptId");
// if(response.data.length>0){//各个消防机构在地图中标点
// response.data.forEach(item=>{
// var vectorMarker = ''
// vectorMarker = new BMap.Marker(new BMap.Point(Number(item.status.split(',')[0]),Number(item.status.split(',')[1])), {
// icon: new BMap.Icon(//机构标识图
// require("@/assets/image/index/jianzhu.svg"),
// new BMap.Size(80, 80),
// {
// imageSize: new BMap.Size(40,40),
// imageOffset:new BMap.Size(0,0)
// }
// )
// });
// var label = new BMap.Label(item.deptName,{offset:new BMap.Size(20,-10)});
// var labeled = new BMap.Label('已选择出警机构为：'+item.deptName,{offset:new BMap.Size(20,-10)});
// vectorMarker.setLabel(label);
// var labeledMarker = function(e,ee,vectorMarker){
// vectorMarker.setLabel(labeled);
// cur.mapSelected.lng = e.lng
// cur.mapSelected.lat = e.lat
// }
// //创建右键菜单
// var markerMenu=new BMap.ContextMenu();
// markerMenu.addItem(new BMap.MenuItem('选为出警机构',labeledMarker.bind(vectorMarker)));
// this.map2.addOverlay(vectorMarker);
// vectorMarker.addContextMenu(markerMenu);
// })
// }
});
},
getRoutes() {
if (this.passZaiqing.jingweidu) {
const params = { address: this.passZaiqing.jingweidu, juli: this.juli };
getAllJiGouPoints(params).then((res) => {
//获取起点
this.luxianList = res.data;
});
} else {
this.$message({
type: "info",
message: "请选择灾情",
});
}
},
routePlan(val) {
//路线规划画线
// this.mudidipre = val.didian
this.mudidipre = this.passZaiqing.jingweidu;
if (this.mudidipre) {
if (this.jigou != "默认" || this.mapSelected.lng != "") {
//选择了起点
if (this.mapSelected.lng != "") {
//从地图中选择的机构
this.jigou = "默认";
var startPoint = new BMap.Point(
this.mapSelected.lng,
this.mapSelected.lat
); //起始点
var endPoint = new BMap.Point(
Number(this.mudidipre.split(",")[0]),
Number(this.mudidipre.split(",")[1])
); //目的地
var driving = new BMap.DrivingRoute(this.map2, {
renderOptions: { map: this.map2, autoViewport: true },
policy: BMAP_DRIVING_POLICY_LEAST_DISTANCE,
});
// this.map2.clearOverlays();
// ----------清除上一条路线s------
var allOverlay = this.map2.getOverlays();
if (allOverlay.length) {
for (var i = 0; i < allOverlay.length; i++) {
if (allOverlay[i].toString() == "[object Polyline]") {
this.map2.removeOverlay(allOverlay[i]);
}
}
}
// ----------清除上一条路线e-----------------
driving.search(startPoint, endPoint);
} else {
//下拉选择的机构
var startPoint = new BMap.Point(
Number(this.jigou.split(",")[0]),
Number(this.jigou.split(",")[1])
); //起始点
var endPoint = new BMap.Point(
Number(this.mudidipre.split(",")[0]),
Number(this.mudidipre.split(",")[1])
); //目的地
var driving = new BMap.DrivingRoute(this.map2, {
renderOptions: { map: this.map2, autoViewport: true },
policy: BMAP_DRIVING_POLICY_LEAST_DISTANCE,
});
// this.map2.clearOverlays();
// ----------清除上一条路线s------
var allOverlay = this.map2.getOverlays();
if (allOverlay.length) {
for (var i = 0; i < allOverlay.length; i++) {
if (allOverlay[i].toString() == "[object Polyline]") {
this.map2.removeOverlay(allOverlay[i]);
}
}
}
// ----------清除上一条路线e-----------------
driving.search(startPoint, endPoint);
}
} else {
//没有选择起点
this.$message({
type: "info",
message: "请选择机构",
});
}
} else {
this.$message({
type: "info",
message: "请选择灾情",
});
}
},
dataChange(data) {
this.zaiqingid = data;
},
search() {
const params = { keyWords: "", region: "" };
shouyetuchuzaiqing(params).then((res) => {
this.config.data = res.data;
});
},
search2() {
const params = { keyWords: "" };
shouyejishijingqing(params).then((res) => {
this.jishi.data = res.data;
});
},
resetMap() {
this.map2.centerAndZoom(new BMap.Point(102.639957, 37.935061), 8);
this.map2.enableScrollWheelZoom(true);
},
getvideourl(url) {
console.log("tcplayM3u8开始播放");
var player = document.getElementById("videoId12123");
debugger;
if (player) {
player = document.getElementById("videoId12123").innerHTML = "";
}
player = new TcPlayer("videoId12123", {
m3u8: url,
flv: url + ".flv", //增加了一个flv的播放地址，用于PC平台的播放 请替换成实际可用的播放地址
autoplay: true, //iOS下safari浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
// coverpic: "http://www.test.com/myimage.jpg"
});
},
activeVedio(sessionID) {
$.ajax({
url:
"http://124.152.117.60:9090/api/transmit/device/realplay/" +
sessionID,
type: "POST",
dataType: "json",
contentType: "application/json",
data: JSON.stringify({ outputType: "hls" }),
success: function (data) {
$.ajax({
url:
"http://124.152.117.60:9090/api/transmit/device/keepAlive/" +
sessionID,
type: "PUT",
success: function (data) {
console.log("保活成功1");
console.log(data);
},
});
},
});
},
getData(data) {
var jigouIcon = new BMap.Icon( //机构标识图
require("@/assets/image/index/jianzhu.svg"),
new BMap.Size(80, 80),
{
imageSize: new BMap.Size(40, 40),
imageOffset: new BMap.Size(0, 0),
}
);
var xhsIcon = new BMap.Icon( //消火栓标识图
require("@/assets/image/index/xhs.svg"),
new BMap.Size(80, 80),
{
imageSize: new BMap.Size(40, 40),
imageOffset: new BMap.Size(0, 0),
}
);
var wxxfzIcon = new BMap.Icon( //微型消防站标识图
require("@/assets/image/index/wxxfz.svg"),
new BMap.Size(80, 102),
{
imageSize: new BMap.Size(40, 40),
imageOffset: new BMap.Size(0, 0),
}
);
var sxtIcon = new BMap.Icon( //摄像头标识图
require("@/assets/image/index/sxt.svg"),
new BMap.Size(80, 102),
{
imageSize: new BMap.Size(40, 40),
imageOffset: new BMap.Size(0, 0),
}
);
if (data.id != null) {
//1.接收灾情点击传值(灾情id)
this.zaiqingid = data.id;
this.selectedPoint = data;
this.passZaiqing = data;
} else if (data.jingdu != null) {
//2.接收点位标注点击传值(经纬度)
this.msg = data; //接收经纬度
//--------------点击右侧查询标点start-------------------
if (this.points) {
this.map2.centerAndZoom(
new BMap.Point(
Number(this.points.jingdu),
Number(this.points.weidu)
),
16
);
var point = new BMap.Point(
this.points.jingdu + 0,
Number(this.points.weidu)
);
var marker = new BMap.Marker(point);
marker.customData = {biaoshi: 'dianweibiaozhu' }
this.map2.addOverlay(marker);
// marker.setAnimation(BMAP_ANIMATION_BOUNCE);
}
//--------------点击右侧查询标点end---------------------
} else {
//3.接收资源汇总信息(数组，包含经纬度)
this.zyhzData = data[0];
let region = data[1]
// if (this.zyhzData.list.length > 0) {
let cur = this;
if(region!=""){//空串时是全部
// ----------清除上一组打点(包含灾情)start------
var allOverlay = this.map2.getOverlays();
if (allOverlay.length) {
for (var i = 0; i < allOverlay.length; i++) {
if (allOverlay[i].toString() == "[object Marker]") {
this.map2.removeOverlay(allOverlay[i]);
}
}
}
// ----------清除上一组打点(包含灾情)end >>>>>>>>>> 所以对所选灾情重新打点-----------
console.log(this.selectedPoint)
var point = new BMap.Point(
Number(this.selectedPoint.jingweidu.split(",")[0]),
Number(this.selectedPoint.jingweidu.split(",")[1])
);
var marker = new BMap.Marker(point,{
icon: new BMap.Symbol(BMap_Symbol_SHAPE_POINT, {
scale: 1,
fillColor: "#F19E0F",
fillOpacity: 0.8,
}),
});
this.map2.addOverlay(marker);
}
//资源重新打点------
this.zyhzData.list.forEach((item) => {
if (item.jd) {
var point = new BMap.Point(item.jd + 0, item.wd + 0);
}
if (cur.zyhzData.flag === "xfjg") {
var marker = new BMap.Marker(point, { icon: jigouIcon });
}
if (cur.zyhzData.flag === "xhs") {
var marker = new BMap.Marker(point, { icon: xhsIcon });
}
if (cur.zyhzData.flag === "wxxfz") {
var marker = new BMap.Marker(point, { icon: wxxfzIcon });
}
if (cur.zyhzData.flag === "sxt") {
var marker = new BMap.Marker(point, { icon: sxtIcon });
}
// var marker = new BMap.Marker(point);
// this.map2.centerAndZoom(new BMap.Point(Number(item.jd),Number(item.wd)), 11);
// this.map2.centerAndZoom(new BMap.Point(102.639957,37.935061), 9);
marker.customData = {biaoshi: 'ziyuan' }
this.map2.addOverlay(marker);
// ------------消火栓信息窗口----------------------
if (cur.zyhzData.flag === "xhs") {
marker.addEventListener("click", getdetail);
function getdetail() {
const params = { id: item.id };
getXiaoHuoSuanDetail(params).then((res) => {
cur.detail = res.data.data[0];
});
cur.openxhsDetail = true;
}
}
if (cur.zyhzData.flag === "wxxfz") {
marker.addEventListener("click", getdetail);
function getdetail() {
getWxxfzDetail(item.id).then((response) => {
cur.wxxfzDetail = response.data;
});
cur.openwxxfzDetail = true;
}
}
if (cur.zyhzData.flag === "sxt") {
marker.addEventListener("click", getdetail);
//video.vedioUrl,video.sessionID
function getdetail() {
cur.opensxtDetail = true;
if (item.sessionID) {
cur.activeVedio(item.sessionID);
setTimeout(() => {
cur.getvideourl(item.vedioUrl);
}, 2000);
} else {
setTimeout(() => {
cur.getvideourl(item.vedioUrl);
}, 2000);
}
}
}
if (cur.zyhzData.flag === "xfjg") {
marker.addEventListener("click", getdetail);
function getdetail() {
getAgency(item.id).then((response) => {
cur.xfjgDetail = response.data;
});
cur.openxfjgDetail = true;
}
}
});
// } else {
// // this.resetMap();
// }
}
},
changePointColor(val) {
var jigouIcon = new BMap.Icon( //机构标识图
require("@/assets/image/index/jianzhu.svg"),
new BMap.Size(80, 80),
{
imageSize: new BMap.Size(40, 40),
imageOffset: new BMap.Size(0, 0),
}
);
var xhsIcon = new BMap.Icon( //消火栓标识图
require("@/assets/image/index/xhs.svg"),
new BMap.Size(80, 80),
{
imageSize: new BMap.Size(40, 40),
imageOffset: new BMap.Size(0, 0),
}
);
var wxxfzIcon = new BMap.Icon( //微型消防站标识图
require("@/assets/image/index/wxxfz.svg"),
new BMap.Size(80, 102),
{
imageSize: new BMap.Size(40, 40),
imageOffset: new BMap.Size(0, 0),
}
);
var sxtIcon = new BMap.Icon( //摄像头标识图
require("@/assets/image/index/sxt.svg"),
new BMap.Size(80, 102),
{
imageSize: new BMap.Size(40, 40),
imageOffset: new BMap.Size(0, 0),
}
);
let arr = this.map2.getOverlays();
for (let i = 0; i < arr.length; i++) {
const element = arr[i];
if (element.point) {
//灾情所有点
element.show();
if (
i > 0 &&
element.point.lng === Number(val.jingweidu.split(",")[0]) &&
element.point.lat === Number(val.jingweidu.split(",")[1])
) {
const element1 = arr[i - 1];
element1.show();
element.hide();
}
if (
i == 0 &&
element.point.lng === Number(val.jingweidu.split(",")[0]) &&
element.point.lat === Number(val.jingweidu.split(",")[1])
) {
element.hide();
}
}
}
this.map2.removeOverlay(this.curMarker); //清除上一次点击
this.curMarker = new BMap.Marker(
new BMap.Point(
Number(val.jingweidu.split(",")[0]),
Number(val.jingweidu.split(",")[1])
),
{
icon: new BMap.Symbol(BMap_Symbol_SHAPE_POINT, {
scale: 1,
fillColor: "#F19E0F",
fillOpacity: 0.8,
}),
}
);
this.curMarker.customData = {biaoshi: 'zaiqing' }
this.map2.addOverlay(this.curMarker);
this.curMarker.setAnimation(BMAP_ANIMATION_BOUNCE);
//---------------------即时警情画圈打点
if (val.gonglishu != null) {
var centerPoint = new BMap.Point(
Number(val.jingweidu.split(",")[0]),
Number(val.jingweidu.split(",")[1])
);
this.map2.centerAndZoom(centerPoint, 16);
var circle = new BMap.Circle(centerPoint, val.gonglishu, {
fillColor: "#CAFFFF",
strokeWeight: 1,
fillOpacity: 0.3,
strokeOpacity: 0.3,
});
this.map2.addOverlay(circle);
//查询在范围内的消火栓和微型消防站
// getPointWithRange({
// lng: Number(val.jingweidu.split(",")[0]),
// lat: Number(val.jingweidu.split(",")[1]),
// distance: val.gonglishu,
// }).then((resPoint) => {
// debugger
// resPoint.data.jigou.forEach((ele) => {
// this.resMarker = new BMap.Marker(new BMap.Point(ele.lng, ele.lat), {
// icon: jigouIcon,
// });
// this.map2.addOverlay(this.resMarker);
// });
// resPoint.data.wxxfz.forEach((ele) => {
// this.resMarker = new BMap.Marker(new BMap.Point(ele.lng, ele.lat), {
// icon: wxxfzIcon,
// });
// this.map2.addOverlay(this.resMarker);
// });
// resPoint.data.sxt.forEach((ele) => {
// this.resMarker = new BMap.Marker(new BMap.Point(ele.lng, ele.lat), {
// icon: sxtIcon,
// });
// this.map2.addOverlay(this.resMarker);
// });
// resPoint.data.xhs.forEach((ele) => {
// this.resMarker = new BMap.Marker(new BMap.Point(ele.lng, ele.lat), {
// icon: xhsIcon,
// });
// this.map2.addOverlay(this.resMarker);
// });
// });
}
},
},
created() {
this.search();
this.search2();
},
watch: {
msg: {
handler(newValue) {
this.points = newValue;
},
deep: true,
},
zaiqingid: {
handler(newValue) {
this.zaiqingid = newValue;
},
deep: true,
},
selectedPoint: {
handler(newValue) {
if (newValue != "") {
this.changePointColor(newValue);
this.juli = newValue.gonglishu;
}
},
deep: true,
},
fanwei: {
handler(newValue) {
this.fanwei = newValue;
},
deep: true,
},
zyhzData: {
handler(newValue) {
this.zyhzData = newValue;
},
deep: true,
},
"form.jigou"(val) {
if (val == undefined) {
this.jigou = "默认";
}
},
},
mounted() {
var aa = document.createElement("script");
aa.defer = "true";
aa.src = "http://124.152.117.57:9017/TcPlayer-2.4.0.js";
document.body.appendChild(aa);
var xiaqubianjieClick = false;
var dianweijuheClick = false;
var dingweiClick = false;
var yingyanClick = false;
var celiangjuliClick = false;
var celiangmianjiClick = false;
var ziyuanhuizongClick = false;
var tucengClick = false;
var dianweibiaozhuClick = false;
var luxianguihuaClick = false;
var ditujietuClick = false;
var tushangzuhuClick = false;
var map = new BMap.Map("allmap");
this.map2 = map;
map.centerAndZoom(new BMap.Point(102.639957, 37.935061), 8);
map.enableScrollWheelZoom();
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
map.addControl(
new BMap.MapTypeControl({
mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP],
})
);
let self = this;
function getBoundary() {
var bdary = new BMap.Boundary();
bdary.get("武威", function (rs) {
map.clearOverlays();
var count = rs.boundaries.length;
if (count === 0) {
alert("未能获取当前输入行政区域");
return;
}
var pointArray = [];
for (var i = 0; i < count; i++) {
var ply = new BMap.Polygon(rs.boundaries[i], {
strokeWeight: 3,
strokeColor: "red",
fillColor: "",
});
map.addOverlay(ply);
pointArray = pointArray.concat(ply.getPath());
}
map.setViewport(pointArray);
/start(全部标点)
if (self.config.data.length > 0) {
//突出灾情
self.config.data.forEach((item) => {
if (item.jingweidu) {
var point = new BMap.Point(
item.jingweidu.split(",")[0] + 0,
Number(item.jingweidu.split(",")[1])
);
var marker = new BMap.Marker(point);
marker.disableMassClear();
marker.customData = {biaoshi: 'zaiqing' }
map.addOverlay(marker);
marker.setAnimation(BMAP_ANIMATION_BOUNCE);
}
});
}
if (self.jishi.data.length > 0) {
//即时警情
self.jishi.data.forEach((item) => {
if (item.jingweidu) {
var point = new BMap.Point(
item.jingweidu.split(",")[0] + 0,
Number(item.jingweidu.split(",")[1])
);
var marker = new BMap.Marker(point);
marker.disableMassClear();
marker.customData = {biaoshi: 'zaiqing' }
map.addOverlay(marker);
marker.setAnimation(BMAP_ANIMATION_BOUNCE);
}
});
}
/end(全部标点)
});
}
//--------------------------添加与移除鹰眼定义的变量s-----------------------------
var mapType1 = new BMap.MapTypeControl({
mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP],
anchor: BMAP_ANCHOR_TOP_LEFT,
});
var overView = new BMap.OverviewMapControl();
var overViewOpen = new BMap.OverviewMapControl({
isOpen: true,
anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
});
//---------------------------添加与移除鹰眼定义的变量e----------------------------
var traffic = new BMap.TrafficLayer(); // 创建交通流量图层实例
var tileLayer = new BMap.TileLayer({ isTransparentPng: true }); //基础图层
tileLayer.getTilesUrl = function (tileCoord, zoom) {
var x = tileCoord.x;
var y = tileCoord.y;
return "/img/tu.png";
};
//==========================================辖区边界S====================================
var ply1 = "";
var ply2 = "";
// 定义一个控件类,即function
function ZoomControl() {
// 默认停靠位置和偏移量
this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
this.defaultOffset = new BMap.Size(10, 160);
}
ZoomControl.prototype = new BMap.Control();
ZoomControl.prototype.initialize = function (map) {
var div = document.createElement("div");
div.appendChild(document.createTextNode("辖区边界"));
div.style.cursor = "pointer";
div.style.border = "1px solid #DAA424";
div.style.backgroundColor = "#88A9E8";
div.style.width = "75px";
div.style.height = "22px";
div.style.lineHeight = "22px";
div.style.borderRadius = "4px";
div.style.fontSize = "13px";
div.style.color = "#FFF";
div.style.textAlign = "center";
// 绑定事件
div.onclick = function (e) {
xiaqubianjieClick = true;
dianweijuheClick = false;
dingweiClick = false;
yingyanClick = false;
celiangjuliClick = false;
celiangmianjiClick = false;
ziyuanhuizongClick = false;
tucengClick = false;
dianweibiaozhuClick = false;
luxianguihuaClick = false;
ditujietuClick = false;
tushangzuhuClick = false;
var bdary1 = new BMap.Boundary();
bdary1.get("武威市凉州区", function (rs) {
// map.clearOverlays(ply);
var count1 = rs.boundaries.length;
if (count1 === 0) {
alert("未能获取当前输入行政区域");
return;
}
var pointArray1 = [];
for (var i = 0; i < count1; i++) {
ply1 = new BMap.Polygon(rs.boundaries[i], {
strokeWeight: 2,
strokeColor: "red",
fillColor: "",
});
map.addOverlay(ply1);
pointArray1 = pointArray1.concat(ply1.getPath());
}
});
var bdary2 = new BMap.Boundary();
bdary2.get("武威市古浪县", function (rs) {
var count2 = rs.boundaries.length;
if (count2 === 0) {
alert("未能获取当前输入行政区域");
return;
}
var pointArray2 = [];
for (var i = 0; i < count2; i++) {
ply2 = new BMap.Polygon(rs.boundaries[i], {
strokeWeight: 2,
strokeColor: "red",
fillColor: "",
});
map.addOverlay(ply2);
pointArray2 = pointArray2.concat(ply2.getPath());
}
});
};
map.getContainer().appendChild(div);
return div;
};
// 创建控件
var myZoomCtrl = new ZoomControl();
// 添加到地图当中
map.addControl(myZoomCtrl);
//============================辖区边界E====================================================
//=============================点位聚合s===================================================
var markerClusterer = "";
var markers = [];
function ZoomControl2() {
this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
this.defaultOffset = new BMap.Size(10, 190);
}
ZoomControl2.prototype = new BMap.Control();
ZoomControl2.prototype.initialize = function (map) {
var div = document.createElement("div");
div.appendChild(document.createTextNode("点位聚合"));
div.style.cursor = "pointer";
div.style.border = "1px solid #DAA424";
div.style.backgroundColor = "#88A9E8";
div.style.width = "75px";
div.style.height = "22px";
div.style.lineHeight = "22px";
div.style.borderRadius = "4px";
div.style.fontSize = "13px";
div.style.color = "#FFF";
div.style.textAlign = "center";
div.onclick = function (e) {
xiaqubianjieClick = false;
dianweijuheClick = true;
dingweiClick = false;
yingyanClick = false;
celiangjuliClick = false;
celiangmianjiClick = false;
ziyuanhuizongClick = false;
tucengClick = false;
dianweibiaozhuClick = false;
luxianguihuaClick = false;
ditujietuClick = false;
tushangzuhuClick = false;
var MAX = self.config.data.length + self.jishi.data.length;
var pt = null;
var i = 0;
for (; i < MAX; i++) {
if (self.config.data.length > 0) {
//突出灾情
self.config.data.forEach((item) => {
if (item.jingweidu) {
pt = new BMap.Point(
item.jingweidu.split(",")[0] + 0,
Number(item.jingweidu.split(",")[1])
);
} else {
// pt = new BMap.Point(102.639957,37.935061);
}
});
}
markers.push(new BMap.Marker(pt));
}
markerClusterer = new BMapLib.MarkerClusterer(map, {
markers: markers,
});
};
map.getContainer().appendChild(div);
return div;
};
// 创建控件
var myZoomCtrl2 = new ZoomControl2();
// 添加到地图当中
map.addControl(myZoomCtrl2);
//==============================点位聚合e==================================================
//=============================定位s==================================
var searchInfoWindow = "";
function ZoomControldw() {
this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
this.defaultOffset = new BMap.Size(10, 340);
}
ZoomControldw.prototype = new BMap.Control();
ZoomControldw.prototype.initialize = function (map) {
var div = document.createElement("div");
div.appendChild(document.createTextNode("定位"));
div.style.cursor = "pointer";
div.style.border = "1px solid #DAA424";
div.style.backgroundColor = "#88A9E8";
div.style.width = "75px";
div.style.height = "22px";
div.style.lineHeight = "22px";
div.style.borderRadius = "4px";
div.style.fontSize = "13px";
div.style.color = "#FFF";
div.style.textAlign = "center";
searchInfoWindow = new BMapLib.SearchInfoWindow(map, "", {
title: "搜索定位", //标题
panel: "panel", //检索结果面板
enableAutoPan: true, //自动平移
searchTypes: [
BMAPLIB_TAB_SEARCH, //周边检索
],
});
function openInfoWindow() {
searchInfoWindow.open(new BMap.Point(102.639957, 37.935061));
}
// 绑定事件
div.onclick = function (e) {
xiaqubianjieClick = false;
dianweijuheClick = false;
dingweiClick = true;
yingyanClick = false;
celiangjuliClick = false;
celiangmianjiClick = false;
ziyuanhuizongClick = false;
tucengClick = false;
dianweibiaozhuClick = false;
luxianguihuaClick = false;
ditujietuClick = false;
tushangzuhuClick = false;
openInfoWindow();
};
map.getContainer().appendChild(div);
return div;
};
// 创建控件
var myZoomCtrldw = new ZoomControldw();
// 添加到地图当中
map.addControl(myZoomCtrldw);
//==============================定位e================================
//=============================鹰眼s=======================================================
function ZoomControl3() {
this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
this.defaultOffset = new BMap.Size(10, 370);
}
ZoomControl3.prototype = new BMap.Control();
ZoomControl3.prototype.initialize = function (map) {
var div = document.createElement("div");
div.appendChild(document.createTextNode("鹰眼"));
div.style.cursor = "pointer";
div.style.border = "1px solid #DAA424";
div.style.backgroundColor = "#88A9E8";
div.style.width = "75px";
div.style.height = "22px";
div.style.lineHeight = "22px";
div.style.borderRadius = "4px";
div.style.fontSize = "13px";
div.style.color = "#FFF";
div.style.textAlign = "center";
div.onclick = function (e) {
xiaqubianjieClick = false;
dianweijuheClick = false;
dingweiClick = false;
yingyanClick = true;
celiangjuliClick = false;
celiangmianjiClick = false;
ziyuanhuizongClick = false;
tucengClick = false;
dianweibiaozhuClick = false;
luxianguihuaClick = false;
ditujietuClick = false;
tushangzuhuClick = false;
map.addControl(mapType1); //2D图，混合图
map.addControl(overView); //添加默认缩略地图控件
map.addControl(overViewOpen); //右下角，打开
};
map.getContainer().appendChild(div);
return div;
};
// 创建控件
var myZoomCtrl3 = new ZoomControl3();
// 添加到地图当中
map.addControl(myZoomCtrl3);
//==============================鹰眼e======================================================
//=============================测量距离s====================================================
var myDis = "";
function ZoomControl6() {
this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
this.defaultOffset = new BMap.Size(10, 220);
}
ZoomControl6.prototype = new BMap.Control();
ZoomControl6.prototype.initialize = function (map) {
var div = document.createElement("div");
div.appendChild(document.createTextNode("测量距离"));
div.style.cursor = "pointer";
div.style.border = "1px solid #DAA424";
div.style.backgroundColor = "#88A9E8";
div.style.width = "75px";
div.style.height = "22px";
div.style.lineHeight = "22px";
div.style.borderRadius = "4px";
div.style.fontSize = "13px";
div.style.color = "#FFF";
div.style.textAlign = "center";
div.onclick = function (e) {
xiaqubianjieClick = false;
dianweijuheClick = false;
dingweiClick = false;
yingyanClick = false;
celiangjuliClick = true;
celiangmianjiClick = false;
ziyuanhuizongClick = false;
tucengClick = false;
dianweibiaozhuClick = false;
luxianguihuaClick = false;
ditujietuClick = false;
tushangzuhuClick = false;
myDis = new BMapLib.DistanceTool(map);
myDis.open(); //开启鼠标测量距离
};
map.getContainer().appendChild(div);
return div;
};
// 创建控件
var myZoomCtrl6 = new ZoomControl6();
// 添加到地图当中
map.addControl(myZoomCtrl6);
//==============================测量距离e===================================================
//=============================测量面积s==================================
var drawingManagermj = "";
function ZoomControlmj() {
this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
this.defaultOffset = new BMap.Size(10, 250);
}
ZoomControlmj.prototype = new BMap.Control();
ZoomControlmj.prototype.initialize = function (map) {
var div = document.createElement("div");
div.appendChild(document.createTextNode("测量面积"));
div.style.cursor = "pointer";
div.style.border = "1px solid #DAA424";
div.style.backgroundColor = "#88A9E8";
div.style.width = "75px";
div.style.height = "22px";
div.style.lineHeight = "22px";
div.style.borderRadius = "4px";
div.style.fontSize = "13px";
div.style.color = "#FFF";
div.style.textAlign = "center";
// 绑定事件
div.onclick = function (e) {
xiaqubianjieClick = false;
dianweijuheClick = false;
dingweiClick = false;
yingyanClick = false;
celiangjuliClick = false;
celiangmianjiClick = true;
ziyuanhuizongClick = false;
tucengClick = false;
dianweibiaozhuClick = false;
luxianguihuaClick = false;
ditujietuClick = false;
tushangzuhuClick = false;
map.centerAndZoom(new BMap.Point(102.639957, 37.935061), 14);
var styleOptions = {
strokeColor: "#2ECCFA", //边线颜色。
fillColor: "#2ECCFA", //填充颜色。当参数为空时，圆形将没有填充效果。
strokeWeight: 3, //边线的宽度，以像素为单位。
strokeOpacity: 0.8, //边线透明度，取值范围0 - 1。
fillOpacity: 0.5, //填充的透明度，取值范围0 - 1。
strokeStyle: "solid", //边线的样式，solid或dashed。
};
//实例化鼠标绘制工具
drawingManagermj = new BMapLib.DrawingManager(map, {
isOpen: false, //是否开启绘制模式
enableCalculate: true,
enableDrawingTool: true, //是否显示工具栏
drawingToolOptions: {
anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
offset: new BMap.Size(100, 5), //偏离值
drawingModes: [
BMAP_DRAWING_POLYGON, //多边形
],
},
polygonOptions: styleOptions, //多边形的样式
rectangleOptions: styleOptions, //矩形的样式
});
drawingManagermj.open();
};
map.getContainer().appendChild(div);
return div;
};
// 创建控件
ZoomControlmj = new ZoomControlmj();
// 添加到地图当中
map.addControl(ZoomControlmj);
//==============================测量面积e================================
//=============================资源汇总s====================================================
var drawingManagerzyhz = "";
function ZoomControl7() {
this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
this.defaultOffset = new BMap.Size(10, 40);
}
ZoomControl7.prototype = new BMap.Control();
ZoomControl7.prototype.initialize = function (map) {
var div = document.createElement("div");
div.appendChild(document.createTextNode("资源汇总"));
div.style.cursor = "pointer";
div.style.border = "1px solid #DAA424";
div.style.backgroundColor = "#88A9E8";
div.style.width = "75px";
div.style.height = "22px";
div.style.lineHeight = "22px";
div.style.borderRadius = "4px";
div.style.fontSize = "13px";
div.style.color = "#FFF";
div.style.textAlign = "center";
div.onclick = function (e) {
xiaqubianjieClick = false;
dianweijuheClick = false;
dingweiClick = false;
yingyanClick = false;
celiangjuliClick = false;
celiangmianjiClick = false;
ziyuanhuizongClick = true;
tucengClick = false;
dianweibiaozhuClick = false;
luxianguihuaClick = false;
ditujietuClick = false;
tushangzuhuClick = false;
// self.isActive = '2';
if (self.passZaiqing != null) {
self.isActive = "2";
} else {
self.$message({
type: "info",
message: "请先选择即时警情",
});
}
var styleOptions = {
strokeColor: "rgb(247, 168, 69)", //边线颜色。
fillColor: "rgb(247, 168, 69)", //填充颜色。当参数为空时，圆形将没有填充效果。
strokeWeight: 3, //边线的宽度，以像素为单位。
strokeOpacity: 0.8, //边线透明度，取值范围0 - 1。
fillOpacity: 0.5, //填充的透明度，取值范围0 - 1。
strokeStyle: "solid", //边线的样式，solid或dashed。
};
//实例化鼠标绘制工具
// drawingManagerzyhz = new BMapLib.DrawingManager(map, {
// isOpen: false, //是否开启绘制模式
// enableDrawingTool: true, //是否显示工具栏
// drawingToolOptions: {
// anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
// offset: new BMap.Size(100, 5), //偏离值
// drawingModes:[
// BMAP_DRAWING_RECTANGLE,//矩形
// BMAP_DRAWING_CIRCLE, //画圆
// // BMAP_DRAWING_POLYLINE, //画线
// ]
// },
// circleOptions: styleOptions, //圆的样式
// // polylineOptions: styleOptions,//线的样式
// rectangleOptions: styleOptions //矩形的样式
// });
// drawingManagerzyhz.open();
// var overlays = [];
// var overlaycomplete = function(e){ //绘图完成后的回调函数
// for(var i = 0; i < overlays.length; i++){
// map.removeOverlay(overlays[i]);
// }
// overlays.length = 0
// overlays.push(e.overlay);
// var path = e.overlay.getPath();//Array<Point> 返回多边型的点数组
// if(path.length == '41'){//圆
// self.fanwei.x1 = path[10].lng
// self.fanwei.x2 = path[30].lng
// self.fanwei.y1 = path[20].lat
// self.fanwei.y2 = path[0].lat
// }else if(path.length == '4'){//矩形
// self.fanwei.x1 = path[0].lng
// self.fanwei.x2 = path[1].lng
// self.fanwei.y1 = path[2].lat
// self.fanwei.y2 = path[1].lat
// }
// };
// //添加鼠标绘制工具监听事件，用于获取绘制结果
// drawingManagerzyhz.addEventListener('overlaycomplete', overlaycomplete);
};
map.getContainer().appendChild(div);
return div;
};
// 创建控件
var myZoomCtrl7 = new ZoomControl7();
// 添加到地图当中
map.addControl(myZoomCtrl7);
//==============================资源汇总e==================================================
//=============================路况图层s===================================================
var vectorMarker1 = "";
var vectorMarker2 = "";
var vectorMarker3 = "";
var vectorMarker4 = "";
function ZoomControl9() {
this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
this.defaultOffset = new BMap.Size(10, 70);
}
ZoomControl9.prototype = new BMap.Control();
ZoomControl9.prototype.initialize = function (map) {
var div = document.createElement("div");
div.appendChild(document.createTextNode("路况图层"));
div.style.cursor = "pointer";
div.style.border = "1px solid #DAA424";
div.style.backgroundColor = "#88A9E8";
div.style.width = "75px";
div.style.height = "22px";
div.style.lineHeight = "22px";
div.style.borderRadius = "4px";
div.style.fontSize = "13px";
div.style.color = "#FFF";
div.style.textAlign = "center";
div.onclick = function (e) {
xiaqubianjieClick = false;
dianweijuheClick = false;
dingweiClick = false;
yingyanClick = false;
celiangjuliClick = false;
celiangmianjiClick = false;
ziyuanhuizongClick = false;
tucengClick = true;
dianweibiaozhuClick = false;
luxianguihuaClick = false;
ditujietuClick = false;
tushangzuhuClick = false;
map.addTileLayer(traffic); //路况图层
map.addTileLayer(tileLayer); //基础图层
};
map.getContainer().appendChild(div);
return div;
};
// 创建控件
var myZoomCtrl9 = new ZoomControl9();
// 添加到地图当中
map.addControl(myZoomCtrl9);
//==============================路况图层e================================
//=============================清除s==================================
function ZoomControl5() {
this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
this.defaultOffset = new BMap.Size(10, 400);
}
ZoomControl5.prototype = new BMap.Control();
ZoomControl5.prototype.initialize = function (map) {
var div = document.createElement("div");
div.appendChild(document.createTextNode("清除"));
div.style.cursor = "pointer";
div.style.border = "1px solid #DAA424";
div.style.backgroundColor = "#88A9E8";
div.style.width = "75px";
div.style.height = "22px";
div.style.lineHeight = "22px";
div.style.borderRadius = "4px";
div.style.fontSize = "13px";
div.style.color = "#FFF";
div.style.textAlign = "center";
div.onclick = function (e) {
// location.reload();
var allOverlay = map.getOverlays();
if (allOverlay.length) {
for (var i = 0; i < allOverlay.length; i++) {
map.removeOverlay(allOverlay[i]);
}
}
map.removeTileLayer(traffic); //路况图层
map.removeTileLayer(tileLayer); //基础图层
markerClusterer.clearMarkers(markers);
};
map.getContainer().appendChild(div);
return div;
};
// 创建控件
var myZoomCtrl5 = new ZoomControl5();
// 添加到地图当中
map.addControl(myZoomCtrl5);
//==============================清除e================================
//=============================点位标注s==================================
function ZoomControldwbz() {
this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
this.defaultOffset = new BMap.Size(10, 280);
}
ZoomControldwbz.prototype = new BMap.Control();
ZoomControldwbz.prototype.initialize = function (map) {
var div = document.createElement("div");
div.appendChild(document.createTextNode("点位标注"));
div.style.cursor = "pointer";
div.style.border = "1px solid #DAA424";
div.style.backgroundColor = "#88A9E8";
div.style.width = "75px";
div.style.height = "22px";
div.style.lineHeight = "22px";
div.style.borderRadius = "4px";
div.style.fontSize = "13px";
div.style.color = "#FFF";
div.style.textAlign = "center";
// 绑定事件
div.onclick = function (e) {
xiaqubianjieClick = false;
dianweijuheClick = false;
dingweiClick = false;
yingyanClick = false;
celiangjuliClick = false;
celiangmianjiClick = false;
ziyuanhuizongClick = false;
tucengClick = false;
dianweibiaozhuClick = true;
luxianguihuaClick = false;
ditujietuClick = false;
tushangzuhuClick = false;
self.isActive = "1";
};
map.getContainer().appendChild(div);
return div;
};
// 创建控件
var myZoomCtrldwbz = new ZoomControldwbz();
// 添加到地图当中
map.addControl(myZoomCtrldwbz);
//==============================点位标注e================================
//=============================路线规划s==================================
function ZoomControllxgh() {
this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
this.defaultOffset = new BMap.Size(10, 100);
}
ZoomControllxgh.prototype = new BMap.Control();
ZoomControllxgh.prototype.initialize = function (map) {
var div = document.createElement("div");
div.appendChild(document.createTextNode("路线规划"));
div.style.cursor = "pointer";
div.style.border = "1px solid #DAA424";
div.style.backgroundColor = "#88A9E8";
div.style.width = "75px";
div.style.height = "22px";
div.style.lineHeight = "22px";
div.style.borderRadius = "4px";
div.style.fontSize = "13px";
div.style.color = "#FFF";
div.style.textAlign = "center";
// 绑定事件
div.onclick = function (e) {
xiaqubianjieClick = false;
dianweijuheClick = false;
dingweiClick = false;
yingyanClick = false;
celiangjuliClick = false;
celiangmianjiClick = false;
ziyuanhuizongClick = false;
tucengClick = false;
dianweibiaozhuClick = false;
luxianguihuaClick = true;
ditujietuClick = false;
tushangzuhuClick = false;
if (self.passZaiqing != null) {
self.getTreeselect();
self.isActive = "3";
self.getRoutes();
} else {
self.$message({
type: "info",
message: "请先选择灾情",
});
}
};
map.getContainer().appendChild(div);
return div;
};
// 创建控件
var myZoomCtrllxgh = new ZoomControllxgh();
// 添加到地图当中
map.addControl(myZoomCtrllxgh);
//==============================路线规划e================================
//=============================地图截图s==================================
function ZoomControldtjt() {
this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
this.defaultOffset = new BMap.Size(10, 310);
}
ZoomControldtjt.prototype = new BMap.Control();
ZoomControldtjt.prototype.initialize = function (map) {
var div = document.createElement("div");
div.appendChild(document.createTextNode("地图截图"));
div.style.cursor = "pointer";
div.style.border = "1px solid #DAA424";
div.style.backgroundColor = "#88A9E8";
div.style.width = "75px";
div.style.height = "22px";
div.style.lineHeight = "22px";
div.style.borderRadius = "4px";
div.style.fontSize = "13px";
div.style.color = "#FFF";
div.style.textAlign = "center";
// 绑定事件
div.onclick = function (e) {
xiaqubianjieClick = false;
dianweijuheClick = false;
dingweiClick = false;
yingyanClick = false;
celiangjuliClick = false;
celiangmianjiClick = false;
ziyuanhuizongClick = false;
tucengClick = false;
dianweibiaozhuClick = false;
luxianguihuaClick = false;
ditujietuClick = true;
tushangzuhuClick = false;
//-------------------------------2021-06-17修改↓-----------------
new kscreenshot({
key: 65,
needDownload: true,
});
self.$message({
type: "info",
message: "请按shift+A键进行操作",
});
//-------------------------------2021-06-17之前的↓-----------------
// html2canvas(
// document.getElementById('allmap'),
// {
// backgroundColor:null,
// useCORS: true,
// scale:1,
// }
// ).then(canvas => {
// let img = new Image();
// img.src = canvas.toDataURL('image/jpeg');
// document.getElementById('allmap').appendChild(img);
// let a = document.createElement('a');
// a.href = canvas.toDataURL('image/jpeg');
// a.download = 'allmap';
// a.click();
// })
};
map.getContainer().appendChild(div);
return div;
};
// 创建控件
var myZoomCtrldtjt = new ZoomControldtjt();
// 添加到地图当中
map.addControl(myZoomCtrldtjt);
//==============================地图截图e================================
//=============================图上组会s====================================================
// function ZoomControltszh(){
// this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
// this.defaultOffset = new BMap.Size(10, 490);
// }
// ZoomControltszh.prototype = new BMap.Control();
// ZoomControltszh.prototype.initialize = function(map){
// var div = document.createElement("div");
// div.appendChild(document.createTextNode("图上组会"));
// div.style.cursor = "pointer";
// div.style.border = "1px solid #DAA424";
// div.style.backgroundColor = "#88A9E8";
// div.style.width = '75px';
// div.style.height = '22px';
// div.style.lineHeight = '22px';
// div.style.borderRadius = '4px';
// div.style.fontSize= '13px'
// div.style.color = '#FFF'
// div.style.textAlign= 'center'
// div.onclick = function(e){
// xiaqubianjieClick = false;
// dianweijuheClick = false;
// dingweiClick = false;
// yingyanClick = false;
// celiangjuliClick = false;
// celiangmianjiClick = false;
// ziyuanhuizongClick = false;
// tucengClick = false;
// dianweibiaozhuClick = false;
// luxianguihuaClick = false;
// ditujietuClick = false;
// tushangzuhuClick = true;
// self.isActive = '4';
// var styleOptions = {
// strokeColor:"rgb(247, 168, 69)", //边线颜色。
// fillColor:"rgb(247, 168, 69)", //填充颜色。当参数为空时，圆形将没有填充效果。
// strokeWeight: 3, //边线的宽度，以像素为单位。
// strokeOpacity: 0.8, //边线透明度，取值范围0 - 1。
// fillOpacity: 0.5, //填充的透明度，取值范围0 - 1。
// strokeStyle: 'solid' //边线的样式，solid或dashed。
// }
// //实例化鼠标绘制工具
// var drawingManager = new BMapLib.DrawingManager(map, {
// isOpen: false, //是否开启绘制模式
// enableDrawingTool: true, //是否显示工具栏
// drawingToolOptions: {
// anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
// offset: new BMap.Size(100, 5), //偏离值
// drawingModes:[
// BMAP_DRAWING_RECTANGLE,//矩形
// BMAP_DRAWING_CIRCLE, //画圆
// BMAP_DRAWING_POLYLINE, //画线
// ]
// },
// circleOptions: styleOptions, //圆的样式
// polylineOptions: styleOptions,//线的样式
// rectangleOptions: styleOptions //矩形的样式
// });
// drawingManager.open();
// var overlays = [];
// var overlaycomplete = function(e){ //绘图完成后的回调函数
// overlays.push(e.overlay);
// var path = e.overlay.getPath();//Array<Point> 返回多边型的点数组
// if(path.length == '41'){//圆
// self.fanwei.x1 = path[10].lng
// self.fanwei.x2 = path[30].lng
// self.fanwei.y1 = path[20].lat
// self.fanwei.y2 = path[0].lat
// }else if(path.length == '4'){//矩形
// self.fanwei.x1 = path[0].lng
// self.fanwei.x2 = path[1].lng
// self.fanwei.y1 = path[2].lat
// self.fanwei.y2 = path[1].lat
// }//****线选点的个数不固定
// };
// //添加鼠标绘制工具监听事件，用于获取绘制结果
// drawingManager.addEventListener('overlaycomplete', overlaycomplete);
// }
// map.getContainer().appendChild(div);
// return div;
// }
// // 创建控件
// var myZoomCtrltszh = new ZoomControltszh();
// // 添加到地图当中
// map.addControl(myZoomCtrltszh);
//==============================图上组会e==================================================
//=============================复位s====================================================
function ZoomControlfuwei() {
this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
this.defaultOffset = new BMap.Size(10, 430);
}
ZoomControlfuwei.prototype = new BMap.Control();
ZoomControlfuwei.prototype.initialize = function (map) {
var div = document.createElement("div");
div.appendChild(document.createTextNode("复位"));
div.style.cursor = "pointer";
div.style.border = "1px solid #DAA424";
div.style.backgroundColor = "#88A9E8";
div.style.width = "75px";
div.style.height = "22px";
div.style.lineHeight = "22px";
div.style.borderRadius = "4px";
div.style.fontSize = "13px";
div.style.color = "#FFF";
div.style.textAlign = "center";
div.onclick = function (e) {
if (xiaqubianjieClick) {
//辖区边界
map.clearOverlays(ply1);
map.clearOverlays(ply2);
}
if (dianweijuheClick) {
//点位聚合
markerClusterer.clearMarkers(markers);
}
if (dingweiClick) {
//定位
searchInfoWindow.close();
}
if (yingyanClick) {
//鹰眼
map.removeControl(mapType1); //移除2D图，混合图
map.removeControl(overView);
map.removeControl(overViewOpen);
}
if (celiangjuliClick) {
//距离
myDis.close();
}
if (celiangmianjiClick) {
//面积
map.centerAndZoom(new BMap.Point(102.639957, 37.935061), 8);
drawingManagermj.close();
// location.reload();
}
if (ziyuanhuizongClick) {
//资源汇总
self.isActive = "0";
// location.reload();
}
if (tucengClick) {
//图层
map.removeTileLayer(traffic);
map.removeOverlay(vectorMarker1);
map.removeOverlay(vectorMarker2);
map.removeOverlay(vectorMarker3);
map.removeOverlay(vectorMarker4);
}
if (dianweibiaozhuClick) {
//点位标注
self.isActive = "0";
map.centerAndZoom(new BMap.Point(102.639957, 37.935061), 8);
}
if (luxianguihuaClick) {
//路线规划
self.isActive = "0";
map.centerAndZoom(new BMap.Point(102.639957, 37.935061), 8);
// location.reload();
}
if (ditujietuClick) {
//地图截图
}
if (tushangzuhuClick) {
//图上组会
self.isActive = "0";
map.centerAndZoom(new BMap.Point(102.639957, 37.935061), 8);
location.reload();
}
};
map.getContainer().appendChild(div);
return div;
};
// 创建控件
var myZoomCtrlfuwei = new ZoomControlfuwei();
// 添加到地图当中
map.addControl(myZoomCtrlfuwei);
//==============================复位e==================================================
//=============================力量派遣s====================================================
var drawingManagerllbs = "";
function ZoomControlllbs() {
this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
this.defaultOffset = new BMap.Size(10, 130);
}
ZoomControlllbs.prototype = new BMap.Control();
ZoomControlllbs.prototype.initialize = function (map) {
var div = document.createElement("div");
div.appendChild(document.createTextNode("力量派遣"));
div.style.cursor = "pointer";
div.style.border = "1px solid #DAA424";
div.style.backgroundColor = "#88A9E8";
div.style.width = "75px";
div.style.height = "22px";
div.style.lineHeight = "22px";
div.style.borderRadius = "4px";
div.style.fontSize = "13px";
div.style.color = "#FFF";
div.style.textAlign = "center";
div.onclick = function (e) {
xiaqubianjieClick = false;
dianweijuheClick = false;
dingweiClick = false;
yingyanClick = false;
celiangjuliClick = false;
celiangmianjiClick = false;
ziyuanhuizongClick = true;
tucengClick = false;
dianweibiaozhuClick = false;
luxianguihuaClick = false;
ditujietuClick = false;
tushangzuhuClick = false;
// self.isActive = '5';
if (self.passZaiqing != null) {
self.isActive = "5";
} else {
self.$message({
type: "info",
message: "请先选择即时警情",
});
}
var styleOptions = {
strokeColor: "rgb(247, 168, 69)", //边线颜色。
fillColor: "rgb(247, 168, 69)", //填充颜色。当参数为空时，圆形将没有填充效果。
strokeWeight: 3, //边线的宽度，以像素为单位。
strokeOpacity: 0.8, //边线透明度，取值范围0 - 1。
fillOpacity: 0.5, //填充的透明度，取值范围0 - 1。
strokeStyle: "solid", //边线的样式，solid或dashed。
};
//实例化鼠标绘制工具
// drawingManagerllbs = new BMapLib.DrawingManager(map, {
// isOpen: false, //是否开启绘制模式
// enableDrawingTool: true, //是否显示工具栏
// drawingToolOptions: {
// anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
// offset: new BMap.Size(100, 5), //偏离值
// drawingModes:[
// BMAP_DRAWING_RECTANGLE,//矩形
// BMAP_DRAWING_CIRCLE, //画圆
// // BMAP_DRAWING_POLYLINE, //画线
// ]
// },
// circleOptions: styleOptions, //圆的样式
// // polylineOptions: styleOptions,//线的样式
// rectangleOptions: styleOptions //矩形的样式
// });
// drawingManagerllbs.open();
// var overlays = [];
// var overlaycomplete = function(e){ //绘图完成后的回调函数
// for(var i = 0; i < overlays.length; i++){
// map.removeOverlay(overlays[i]);
// }
// overlays.length = 0
// overlays.push(e.overlay);
// var path = e.overlay.getPath();//Array<Point> 返回多边型的点数组
// if(path.length == '41'){//圆
// self.fanwei.x1 = path[10].lng
// self.fanwei.x2 = path[30].lng
// self.fanwei.y1 = path[20].lat
// self.fanwei.y2 = path[0].lat
// }else if(path.length == '4'){//矩形
// self.fanwei.x1 = path[0].lng
// self.fanwei.x2 = path[1].lng
// self.fanwei.y1 = path[2].lat
// self.fanwei.y2 = path[1].lat
// }
// };
// //添加鼠标绘制工具监听事件，用于获取绘制结果
// drawingManagerllbs.addEventListener('overlaycomplete', overlaycomplete);
};
map.getContainer().appendChild(div);
return div;
};
// 创建控件
var myZoomControlllbs = new ZoomControlllbs();
// 添加到地图当中
map.addControl(myZoomControlllbs);
//==============================力量派遣e==================================================
setTimeout(function () {
getBoundary();
}, 1000);
},
};
</script>
<style lang="less" scoped>
@import "http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css";
@import "http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css";
.BMap_cpyCtrl {
display: none !important;
}
.anchorBL {
display: none !important;
}
.my {
width: 1920px;
height: 1080px;
transform: scale(1);
background-image: url(/static/img/bg.837e99ea.png);
background-size: 100% 100%;
box-shadow: 0 0 3px blue;
display: flex;
flex-direction: column;
position: fixed;
top: 0px;
left: 0px;
overflow: hidden;
transform-origin: left top;
z-index: 999;
}
#data-view {
width: 100%;
height: 100%;
background-color: #030409;
color: #fff;
#dv-full-screen-container {
background-image: url("./img/bg.png");
background-size: 100% 100%;
box-shadow: 0 0 3px blue;
display: flex;
flex-direction: column;
}
.main-content {
flex: 1;
display: flex;
flex-direction: column;
}
.block-left-right-content {
flex: 1;
display: flex;
margin-top: 20px;
}
.block-top-bottom-content {
flex: 1;
display: flex;
flex-direction: column;
box-sizing: border-box;
padding-right: 20px;
}
.block-top-content {
height: 55%;
display: flex;
flex-grow: 0;
box-sizing: border-box;
padding-bottom: 20px;
}
#luxianguihua {
width: 20%;
box-shadow: 0 0 3px blue;
display: flex;
flex-direction: column;
background-color: rgba(6, 30, 93, 0.5);
border-top: 2px solid rgba(1, 153, 209, 0.5);
box-sizing: border-box;
padding: 0px 30px;
height: 100%;
}
}
</style>
<style lang="scss" scoped>
.ac {
background-color: #343868;
}
.mydialog {
/deep/ .el-dialog {
position: relative;
margin: 0 auto 50px;
background: #fff;
// background: #f4fcff;
border-radius: 6px;
border: 3px solid #1890ff;
box-shadow: 2px 2px 5px #1890ff;
box-sizing: border-box;
width: 50%;
}
/deep/ .el-dialog__title {
font-size: 20px;
font-weight: bold;
}
}
///===========================div滚动条===========================//
/deep/ .routePlanList::-webkit-scrollbar {
/*滚动条整体样式*/
width: 2px; /*高宽分别对应横竖滚动条的尺寸*/
height: 1px;
}
/deep/.routePlanList::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px transparent;
background: transparent;
}
/deep/ .routePlanList::-webkit-scrollbar-track {
/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 5px transparent;
border-radius: 5px;
background: transparent;
}
//==================================================================//
</style>
1197
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
