<template>
<!-- 客流OD-->
<div class="layout-wrapper passengerflowOd-wrap">
<logo></logo>
<animate-b-g-image name="passengerflowOd-wrap"></animate-b-g-image>
<div class="header-wrapper"
style="z-index
: 200">
<img class="header-image"
:src="titleSrc" />
<select-model
:typeName="'客流OD'"></select-model>
</div>
<area-module class="left-wrap"
:nowIndex="nowIndex" @getAreaInfo="customAreaData" ref="searchChild"
@transferData="transferData"
:editingStatus="editingStatus">
</area-module>
<right-module class="right-wrap"
:nowIndex="nowIndex"
:isShowAllArea="showAllArea"
:searchParams="searchParams"
:rightMode="rightMode"
:liquidFillChartInfo="liquidFillChartInfo"
:odTableList="odTableList" @changeFlowEvent="changeFlowEvent"
:flag="flag" @getLineMap="getLineMap" @enlargeBtn="enlargeBtn">
</right-module>
<div class="od-line" v-show="showGraphicsMode && showCustomMode && !sliderDisabled">
<div>
OD线
</div>
<div class="od-slider">
<el-slider v-model="sliderOdLine" range
:marks="marks"
:max="legendList
.oDNumMax" @change="changeOdLine"
:disabled="sliderDisabled">
</el-slider>
</div>
</div>
<div class="check-map" v-show="showGraphicsMode && showCustomMode">
<ul>
<li v-for="(item, index) in options"
:key="index"
:class="[nowIndex == index ? 'checkType'
: '']"
@click="changeModule(item
.value)">
<img
:src="item
.icon" alt="" />
<span>{{ item
.label }}</span>
</li>
</ul>
</div>
<div class="legend-map" v-show="showGraphicsMode && showCustomMode">
<div class="item">
<div
:class="['base-color','color-'+ 0]"></div>
<span> {{legendList
.oDNumMax}}</span>
</div>
<div class="item">
<div
:class="['base-color','color-'+ 1]"></div>
<span> {{legendList
.oDNumMid}}</span>
</div>
<div class="item">
<div
:class="['base-color','color-'+ 2]"></div>
<span> {{legendList
.oDNumMin}}</span>
</div>
</div>
<!-- 站点线路地图 -->
<div id="container"
style="width
:100%;height
:100%" v-
loading="is
Loading" element-
loading-background="rgba(255, 255, 255, 0)"
element-
loading-text="加载中，请稍后
..." element-
loading-spinner="el-icon-
loading">
</div>
<!-- 站点搜索 -->
<div class="siteSearch" v-show="savaState">
<el-select v-model="searchKeys" placeholder="请输入站点名" suffix-icon="el-icon-search" class="search-input"
filterable remote clearable
:remote-method="remoteMethod" @change="checkValue" @clear="clearMarker">
<el-option v-for="(item, index) in searchSiteValues"
:key="index"
:label="item
.stationName + '('+ item
.roadName +')'"
:value="index">
</el-option>
</el-select>
</div>
<div class="areaName" v-show="savaState">
<el-form
:model="ruleForm"
:rules="rules" ref="ruleForm"
:inline="true">
<el-form-item prop="name">
<el-input placeholder="设定区域名称" clearable v-model="ruleForm
.name">
</el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">保存</el-button>
</el-form-item>
</el-form>
</div>
<InfoWindow v-show="showInfoWindow" ref="infoWindow"
:itemObj="infoWindowData"
:info-window="stationInfoWindow"
:infoTitle="infoTitle"
:expandStatus="false"></InfoWindow>
<el-dialog
:visible
.sync="dialogVisible"
:before-close="handleClose" id="DvelopmentTargets"
custom-class="my-dialog">
<table-list
:isSort="true"
:tableData="tableDataEnlargeBtn"
:colorCircle="true"
style="max-height
: 100%;padding
: 0 20px;" />
</el-dialog>
</div>
</template>
<script>
import API_PASSENGEROD from '@/api/api_passengerOD'
import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/default
.css'
import selectModel from "@/components/selectModel";
import "
./
../layout/layout
.scss";
import InfoWindow from "@/components/stationInfoWindows
.vue"
import areaModule from "
./areaModule";
import rightModule from "
./rightModule";
import {
AMapManager,
lazyAMapApiLoaderInstance
} from "vue-amap";
import tableList from "@/components/tableList";
let lineColor = null; // od线颜色
// 站点地图
let stationPathSimplif
ierIns = null;
let showStations = null;
let hideStations = null;
// 线路地图
let linePathSimplif
ierIns = null;
let showLine = null;
let hideLine= null;
// 选中站点od
let lineStationPathSimplif
ierIns = null;
let showStationLine = null;
let hideStationLine = null;
// 区域地图
let areaPathSimplif
ierIns = null;
let showAreaLine = null;
let hideAreaLine = null;
// 展示圆多边形
let circleCase = null;
let polygonCase = null;
let siteMarker = null; // 搜索站点
// 绘制编辑圆多边形
let circleEditor = null;
let polyEditor = null;
import AnimateBGImage from "@/components/AnimateBGImage";
import logo from '@/components/logo'
let layer1 = null
let layer2 = null
let layer3 = null
let markIcon1 = null
let markIcon2 = null
let markIcon3 = null
export default {
name
: "passengerFlowOd",
components
: {
selectModel,
VueSlider,
areaModule,
rightModule,
InfoWindow,
tableList,
AnimateBGImage,
logo
},
data() {
return {
max
: null,
mid
: null,
min
: null,
layerList
: [],
redIcon
:require('
../
../assets/red
.gif'),
yellowIcon
:require('
../
../assets/yellow
.gif'),
tableDataEnlargeBtn
:[],
dialogVisible
:false,
selectLineCase
:{
data
:[],
id
:''
},
showInfoWindow
: false,
stationInfoWindow
: null, // 信息框
infoTitle
:'',
radius
: '',
center
: [],
path
: [],
pathArea
: '',
mouseTool
: null,
ruleForm
: {
name
: '',
},
rules
: {
name
: [{
required
: true,
message
: '请输入区域名称',
trigger
: 'blur'
},
{
min
: 2,
max
: 20,
message
: '长度在 2 到 20 个字符',
trigger
: 'blur'
}
],
},
searchSiteValues
: [], // 模糊搜索数据
searchKeys
: '', // 搜索关键词
siteCenter
: [], // 搜索站点坐标
infoWindowData
: [{
overv
iewTitle
: '区域面积',
overv
iewValue
: '',
},
{
overv
iewTitle
: '流入数量',
overv
iewValue
: '',
},
{
overv
iewTitle
: '流出数量',
overv
iewValue
: '',
}
],
searchParams
: {}, //查询条件
searchId
: '',
odTableList
: [], //top10表格数据
titleSrc
: require("
../
../assets/images/common/bcImg
.png"),
sliderOdLine
: [null, null],
odLineData
: [],
legendList
: {
oDNumMin
: null,
oDNumMid
: null,
oDNumMax
: null, // OD最大
},
marks
: {},
options
: [{
value
: 0,
label
: "站点",
icon
: require("
../
../assets/images/layout/lines
.png"),
}, {
value
: 1,
label
: "线路",
icon
: require("
../
../assets/images/layout/site
.png"),
}, {
value
: 2,
label
: "区域",
icon
: require("
../
../assets/images/layout/vehicle
.png"),
},
],
showGraphicsMode
: true,
showCustomMode
: true,
savaState
: false,
nowIndex
: 0, //0 站点 1线路 2区域
checkModeIndex
: '',
// 自定义圆坐标
customCircleData
: {
radius
: '',
location
: [],
},
customPolygonData
: {
areaCoverage
: '', // 面积
location
: [],
}, // 自定义矩形坐标
liquidFillChartInfo
: {
chartId
: "coverAreaRateInfo",
chartName
: "流入/流出占比",
chartValue
: [0
.4, 0
.6],
},
showAllArea
: true,
rightMode
: true,
dotOptions
: [{
tooltip
: 'always'
}, {
tooltip
: 'always'
}],
is
Loading: false, // od线加载
exportParams
: {},
odLinePrams
: {
ODNumBefore
: '',
ODNumAfter
: '',
},
flag
: false, // 流入流出渲染
editingStatus
: true,
allAreaState
: false, // 全城od线
customState
: false, // 自定义od线
stationMapData
:[],
lineMapData
:[],
checkLineObj
:{
linePath
:[],
lineStationInfo
:[],
lineName
:'',
passengerNum
:'',
stationNum
:"",
timeImbalanceFactor
:"",
},
checkStationOd
:[],
map
:null,
sliderDisabled
:false,
stationMarkerArr
:[],
}
},
methods
: {
/**
* @Description
: 清空地图信息 飞线图 站点
* @author konghaitao
* @date 2023-2-16
*/
clearMap(){
if(layer1 ){
layer1
.setMap(null);
layer2
.setMap(null);
layer3
.setMap(null);
}
if(markIcon1){
markIcon1
.setMap(null);
markIcon2
.setMap(null);
}
},
//放大功能
enlargeBtn(data) {
console
.log(data,'dataaa')
$("
.my-dialog")
.css({
margin
: "0 auto ",
width
: "80%",
'max-height'
:data
.tableList
.length <= 10 ? '50%'
:"90%",
padding
: "1%",
top
: data
.tableList
.length <= 10 ? '20%'
:'5%'
});
this
.tableDataEnlargeBtn = data
this
.dialogVisible = true;
},
//关闭
handleClose(done) {
$("
.el-dialog__wrapper")
.css({
"z-index"
: "-11100",
});
this
.$nextTick(() => {
done();
});
},
remoteMethod(query) {
let that = this;
if (query !== "") {
setTimeout(() => {
that
.getSearchStation(query);
}, 500);
}
},
getSearchStation(query) {
API_PASSENGEROD
.getStationInfo({
stationName
: query,
})
.then((response) => {
if (response
.code == 0) {
this
.searchSiteValues = response
.value;
} else {
console
.log(response
.message);
}
})
.catch((error) => {
console
.log(error)
});
},
// 站点搜索
checkValue(val) {
var that = this;
if (this
.searchKeys !== "") {
this
.siteCenter = [that
.searchSiteValues[val]
.longitude, that
.searchSiteValues[val]
.latitude]
this
.$nextTick(() => {
that
.drawSiteMap()
})
}
},
drawSiteMap() {
var that = this;
siteMarker && this
.map
.remove(siteMarker)
siteMarker = new AMap
.Marker({
icon
: "//a
.amap
.com/jsapi_demos/static/demo-center/icons/poi-marker-default
.png",
position
: that
.siteCenter,
offset
: new AMap
.Pixel(-13, -30)
});
siteMarker
.setMap(that
.map);
this
.map
.setFitV
iew([siteMarker])
},
// 清除覆盖
clearMarker() {
siteMarker && this
.map
.remove(siteMarker)
},
// 更改模块
changeModule(value) {
this
.odTableList = []
this
.nowIndex = value
},
getDay(day) {
var today = new Date();
var targetday_milliseconds = today
.getTime() + 1000 * 60 * 60 * 24 * day;
today
.setTime(targetday_milliseconds); //注意，这行是关键代码
var tYear = today
.getFullYear();
var tMonth = today
.getMonth();
var tDate = today
.getDate();
tMonth = this
.doHandleMonth(tMonth + 1);
tDate = this
.doHandleMonth(tDate);
return tYear + tMonth + tDate;
},
doHandleMonth(month) {
var m = month;
if (month
.toString()
.length == 1) {
m = "0" + month;
}
return m;
},
/**滑动od线 */
changeOdLine(val) {
this
.sliderOdLine = val;
switch(this
.nowIndex) {
case 0
:
if(this
.searchParams
.platformIdOff == '' && this
.searchParams
.platformIdOn == '') {
this
.getStationMap(this
.searchParams,false,0);
} else {
this
.getStationMap(this
.searchParams,false,1);
}
// false 滑动od线时不重置起始
break
case 1
:
if(this
.searchParams
.lineId == '') {
this
.defaultLineOD(this
.searchParams,false)
} else {
this
.getLineStationPassengersOD(this
.searchParams,false,1)
}
break
case 2
:
this
.getStationPathOfAreaInfo( this
.searchParams, false)
break
}
},
transferData(data) {
this
.map && this
.map
.clearMap();
this
.searchParams = data;
this
.customState = false;
this
.allAreaState = false;
this
.sliderOdLine = [null, null];
console
.log('bbbbbbb')
console
.log('cccc',new Loca
.LinkLayer)
this
.getInfo(data)
},
//获取当前模块所有信息
getInfo(data){
switch (this
.nowIndex) {
case 0
:
this
.sliderDisabled = false;
this
.sliderOdLine = [null, null];
// 隐藏 线路 区域地图数据
linePathSimplif
ierIns && hideLine();
lineStationPathSimplif
ierIns && hideStationLine();
this
.map && this
.map
.clearMap();
if(this
.stationMarkerArr
.length > 0) {
this
.stationMarkerArr
.map((item,index)=>{
this
.map
.remove(item);
})
}
lineStationPathSimplif
ierIns && hideStationLine();
areaPathSimplif
ierIns && hideAreaLine();
// 清除线路
if(data
.platformIdOff == '' && data
.platformIdOn == ''){
this
.showAllArea = true;
this
.getRoadOD(data);
this
.getStationMap(data,true,0); // //未选择站点图
}else {
this
.showAllArea = false;
//查询表格信息及站点坐标
this
.getStationOD()
this
.getStationMap(data,true,1); // 1为选中站图
}
break;
case 1
:
//线路
// 隐藏站点地图
this
.sliderOdLine = [null, null];
stationPathSimplif
ierIns && hideStations();
linePathSimplif
ierIns && hideLine();
lineStationPathSimplif
ierIns && hideStationLine();
this
.map && this
.map
.clearMap();
if(this
.stationMarkerArr
.length > 0) {
this
.stationMarkerArr
.map((item,index)=>{
this
.map
.remove(item);
})
};
lineStationPathSimplif
ierIns && hideStationLine();
areaPathSimplif
ierIns && hideAreaLine();
if(data
.lineId == '') {
this
.showAllArea = true;
this
.sliderDisabled = false;
this
.getLineOD() //线路top10
this
.defaultLineOD(data,true); // 默认线路
}else {
//查询单个线路信息
this
.showAllArea = false;
this
.sliderDisabled = true;
this
.getLineSingelTable();
this
.checkLineOD(data);
}
break;
case 2
:
// 隐藏站点线路地图
this
.sliderDisabled = false;
this
.sliderOdLine = [null, null];
linePathSimplif
ierIns && hideLine();
stationPathSimplif
ierIns && hideStations();
linePathSimplif
ierIns && hideLine();
this
.map && this
.map
.clearMap();
if(this
.stationMarkerArr
.length > 0) {
this
.stationMarkerArr
.map((item,index)=>{
this
.map
.remove(item);
})
}; // 清除站点
// 清除站点od线
lineStationPathSimplif
ierIns && hideStationLine();
this
.customAreaData(data
.id) // 区域图+ 流入流出占比
this
.getStationOfAreaInfo(data
.id, true) // 自定义区域表格
console
.log(data,'33333')
this
.getStationPathOfAreaInfo(data, true) // 自定义区域Od线
// }
break;
}
},
//查询单个线路信息
getLineSingelTable(){
let params = this
.searchParams
if(!params
.lineId){
return
}
params
.top = 10
API_PASSENGEROD
.getRoadSectionPassenger(params)
.then(response => {
if(response
.value
.length){
this
.showAllArea = false
this
.odTableList = response
.value
console
.log( this
.odTableList ,'查询单个线路信息')
}else {
this
.odTableList = []
}
})
.catch(err =>{
this
.$message
.error(err);
})
},
//查询线路top10
getLineOD(){
let params = this
.searchParams
params
.byLine = true
params
.top = 10
API_PASSENGEROD
.getRegionalTravelOD(params)
.then(response=>{
if(response
.value
.length){
this
.showAllArea = true
this
.odTableList = response
.value
} else {
this
.odTableList = []
}
})
.catch(err =>{
this
.$message
.error(err);
})
},
//获取站点表格数据及坐标
getStationOD(flag){
// if(flag){
// this
.searchParams
.platformIdOff = this
.searchParams
.stationPointId
// this
.searchParams
.platformIdOn = null
// } else {
// this
.searchParams
.platformIdOn = this
.searchParams
.stationPointId
// this
.searchParams
.platformIdOff = null
// }
API_PASSENGEROD
.getStationOD( this
.searchParams)
.then(response => {
console
.log(response,'表格数据')
if(response
.value
.length){
this
.showAllArea = false
this
.odTableList = response
.value
} else {
this
.odTableList = []
}
})
.catch(err =>{
this
.$message
.error(err);
})
},
getLineMap(data) {
var that = this;
if( data
.id === that
.selectLineCase
.id){
that
.map
.remove( that
.selectLineCase
.data);
that
.selectLineCase = {
data
:[],
id
:'',
}
} else {
that
.demo(data)
}
},
demo(data){
var that = this;
that
.map
.remove(that
.selectLineCase
.data);
that
.selectLineCase = {
data
:[],
id
:'',
}
let newRouteLine = new AMap
.Polyline({
path
: data
.stationLocation,
strokeColor
: "#a9db35",
isOutline
: false,
geodesic
: true, // 大地线
strokeOpacity
: 1,
strokeWeight
: 4,
stroke
Style: "solid",
strokeDasharray
: [10, 5],
lineJoin
: "round",
lineCap
: "round",
borderWeight
: 2,
outlineColor
: "transparent",
});
that
.selectLineCase = {
data
:newRouteLine,
id
:data
.id
}
newRouteLine
.setMap(that
.map);
},
/* initMapData(data) {
var that = this;
this
.odLineData = [];
this
.is
Loading = true;
let params = data;
params
.ODNumBefore = this
.sliderOdLine[0];
params
.ODNumAfter = this
.sliderOdLine[1];
API_PASSENGEROD
.getODNum3(params)
.then((response) => {
if (response
.code === 0) {
if (this
.allAreaState) {
let data = response
.value
.stationPathDto
.splice(0, 100);
if (data
.length > 0) {
data
.map((item, index) => {
that
.odLineData
.push({
oDNum
: item
.oDNum,
path
: [
[item
.startLongitude, item
.startLatitude],
[item
.endLongitude, item
.endLatitude]
],
startStationName
: item
.startStationName,
endStationName
: item
.endStationName,
})
})
this
.is
Loading = false;
} else {
this
.is
Loading = false;
}
} else {
this
.legendList
.oDNumMin = response
.value
.oDNumMin;
this
.legendList
.oDNumMid = response
.value
.oDNumMid;
this
.legendList
.oDNumMax = response
.value
.oDNumMax;
let keyData = [0, this
.legendList
.oDNumMin, this
.legendList
.oDNumMid, this
.legendList
.oDNumMax];
let valData = [String(0), String(this
.legendList
.oDNumMin), String(this
.legendList
.oDNumMid), String(
this
.legendList
.oDNumMax)]
let obj = {};
for (let i = 0; i < valData
.length; i++) {
const key = keyData[i];
obj[key] = valData[i]
}
this
.marks = obj;
this
.sliderOdLine = [0, this
.legendList
.oDNumMax]
let data = response
.value
.stationPathDto
.splice(0, 100);
if (data
.length > 0) {
data
.map((item, index) => {
that
.odLineData
.push({
oDNum
: item
.oDNum,
path
: [
[item
.startLongitude, item
.startLatitude],
[item
.endLongitude, item
.endLatitude]
],
startStationName
: item
.startStationName,
endStationName
: item
.endStationName,
})
})
this
.is
Loading = false;
} else {
this
.is
Loading = false;
}
}
} else {
this
.is
Loading = false;
console
.log(response
.message);
}
})
.catch((error) => {
this
.is
Loading = false;
this
.$message
.error(error);
});
},*/
//查询 自定义区域数据（地图及流入流出占比）
customAreaData(id) {
var that = this;
let params = this
.searchParams;
params
.id = id;
this
.customCircleData
.location = []; // 圆区域
this
.customPolygonData
.location = []; // 多边行区域
if (id !== '') {
that
.flag = false;
API_PASSENGEROD
.getAreaInfo(params)
.then((response) => {
if (response
.code == 0) {
// 圆
if (response
.value
.areaType == 0) {
this
.customCircleData
.radius = response
.value
.radius;
this
.customCircleData
.location = [response
.value
.stationLocationDtoList[0]
.lng, response
.value
.stationLocationDtoList[0]
.lat
];
this
.circleMarker(this
.customCircleData);
// 绘制圆
} else if (response
.value
.areaType == 1) {
// 矩形
this
.customPolygonData
.areaCoverage = response
.value
.areaCoverage;
let data = response
.value
.stationLocationDtoList;
data
.map((item, index) => {
this
.customPolygonData
.location
.push(
[item
.lng, item
.lat]
)
})
// 绘制矩形
this
.polygonMarker(this
.customPolygonData);
};
this
.liquidFillChartInfo = {
chartId
: "coverAreaRateInfo",
chartName
: "流入/流出占比",
chartValue
: [],
chartTitle
: ['流入率', '流出率']
}
if (response
.value
.inflowProportion == null || response
.value
.outflowProportion == null) {
this
.liquidFillChartInfo
.chartValue
.push(0)
this
.liquidFillChartInfo
.chartValue
.push(0)
} else {
this
.liquidFillChartInfo
.chartValue
.push(response
.value
.inflowProportion)
this
.liquidFillChartInfo
.chartValue
.push(response
.value
.outflowProportion)
}
this
.infoWindowData = [{
overv
iewTitle
: '区域面积',
overv
iewValue
: response
.value
.areaCoverage,
},
{
overv
iewTitle
: '流入数量',
overv
iewValue
: response
.value
.inflowPassengers,
},
{
overv
iewTitle
: '流出数量',
overv
iewValue
: response
.value
.outflowPassengers,
}
];
this
.$nextTick(() => {
that
.flag = true;
});
} else {
this
.$message({
message
: response
.message,
type
: 'warning'
});
}
})
.catch((error) => {
console
.log(error)
})
} else {
this
.customCircleData
.location = [];
this
.customPolygonData
.location = [];
}
},
circleMarker(val) {
var that = this;
// 先清除之前的图形
circleCase && this
.map
.remove(circleCase)
polygonCase && this
.map
.remove(polygonCase)
circleCase = new AMap
.Circle({
center
: val
.location,
radius
: val
.radius, //半径
borderWeight
: 3,
strokeColor
: "#FF33FF",
strokeOpacity
: 1,
strokeWeight
: 6,
strokeOpacity
: 0
.2,
fillOpacity
: 0
.4,
stroke
Style: 'dashed',
strokeDasharray
: [10, 10],
// 线样式还支持 'dashed'
fillColor
: '#1791fc',
zIndex
: 50,
})
circleCase
.setMap(this
.map)
that
.map
.setCenter(val
.location)
// 缩放地图到合适的视野级别
// this
.map
.setFitV
iew([circleCase])
circleCase
.on("click", function (e) {
that
.setInfoWindows(e
.lnglat);
});
},
polygonMarker(val) {
var that = this;
circleCase && this
.map
.remove(circleCase)
polygonCase && this
.map
.remove(polygonCase)
polygonCase = new AMap
.Polygon({
path
: val
.location,
strokeColor
: "#FF33FF",
strokeWeight
: 6,
strokeOpacity
: 0
.2,
fillOpacity
: 0
.4,
fillColor
: '#1791fc',
zIndex
: 50,
})
this
.map
.add(polygonCase);
polygonCase
.on("click", function (e) {
that
.setInfoWindows(e
.lnglat);
});
// 缩放地图到合适的视野级别
that
.map
.setCenter(val
.location)
// this
.map
.setFitV
iew([polygonCase])
},
setInfoWindows(e) {
var that = this;
this
.showInfoWindow = true;
const infoWindow = new AMap
.InfoWindow({
isCustom
: true,
anchor
: "bottom-center",
content
: this
.$refs['infoWindow']
.$el,
offset
: new AMap
.Pixel(0, -10),
autoMove
: true,
closeWhenClickMap
: true,
});
this
.stationInfoWindow = infoWindow;
this
.infoTitle = '基础指标';
// 信息窗口打开
infoWindow
.open(that
.map, e);
},
// 保存后 查询自定义区域地图+ OD线+ 右侧表格+ 图表
seachCustomArea(id, name) {
this
.editingStatus = true;
this
.showGraphicsMode = true;
this
.showCustomMode = true;
this
.showAllArea = false;
this
.savaState = false;
this
.rightMode = true;
this
.customAreaData(id) // 区域图+ 流入流出占比
this
.searchParams
.id = id;
this
.getStationPathOfAreaInfo(this
.searchParams, true) // 自定义区域Od线
this
.getStationOfAreaInfo(id, true) // 自定义区域表格
this
.$refs
.searchChild
.$emit('childMethod', id, name) // 左侧自定义区域id及名称，保存后改变新增区域状态
},
//选择新增区域类型
checkMode(val) {
this
.map
.clearMap();
this
.clearMap();
this
.ruleForm
.name = '';
this
.searchKeys = '';
// this
.checkModeIndex = data
.label;
if (val
.label == '图形模式') {
if (val
.isSelect) {
this
.showGraphicsMode = false;
this
.savaState = true;
this
.rightMode = false;
areaPathSimplif
ierIns && hideAreaLine();
this
.mouseTool && this
.mouseTool
.close(true);
circleEditor && circleEditor
.close();
this
.drawCircleMap()
} else {
this
.showGraphicsMode = true;
this
.showCustomMode = true;
this
.savaState = false;
this
.rightMode = true;
areaPathSimplif
ierIns && showAreaLine();
this
.mouseTool && this
.mouseTool
.close(true);
}
} else if (val
.label == '自定义模式') {
if (val
.isSelect) { // 选中
this
.showCustomMode = false;
this
.savaState = true;
this
.rightMode = false;
areaPathSimplif
ierIns && hideAreaLine();
this
.mouseTool && this
.mouseTool
.close(true);
polyEditor && polyEditor
.close();
this
.drawPolygonMap()
} else {
this
.showGraphicsMode = true;
this
.showCustomMode = true;
this
.savaState = false;
this
.rightMode = true;
areaPathSimplif
ierIns && showAreaLine();
this
.mouseTool && this
.mouseTool
.close(true);
}
}
},
// 编辑圆
drawCircleMap() {
var that = this;
this
.mouseTool = new AMap
.MouseTool(this
.map);
this
.mouseTool
.circle({
strokeColor
: "#FF33FF",
strokeOpacity
: 1,
strokeWeight
: 6,
strokeOpacity
: 0
.2,
fillColor
: "#1791fc",
fillOpacity
: 0
.4,
stroke
Style: "solid",
});
this
.mouseTool
.on("draw", function (event) {
that
.radius = event
.obj
.De
.radius
.toFixed(0);
let centerLng = event
.obj
.De
.center
.lng;
let centerLat = event
.obj
.De
.center
.lat;
let position = [centerLng, centerLat];
that
.center = [{
lat
: centerLat,
lng
: centerLng
}]
that
.map
.clearMap() // 先拿到绘制好的半径圆心再清除进入编辑
var circle = new AMap
.Circle({
center
: position,
radius
: that
.radius, //半径
borderWeight
: 3,
strokeColor
: "#FF33FF",
strokeOpacity
: 1,
strokeWeight
: 6,
strokeOpacity
: 0
.2,
fillOpacity
: 0
.4,
stroke
Style: "dashed",
strokeDasharray
: [10, 10],
fillColor
: "#1791fc",
zIndex
: 50,
});
circle
.setMap(that
.map);
that
.map
.setFitV
iew([circle]);
circleEditor = new AMap
.CircleEditor(that
.map, circle);
circleEditor
.open();
circleEditor
.on("move", function (event) {});
circleEditor
.on("adjust", function (event) {});
circleEditor
.on("end", function (event) {
that
.radius = event
.target
.w
.radius
.toFixed(0);
let centerLng = event
.target
.w
.center
.lng;
let centerLat = event
.target
.w
.center
.lat;
that
.center = [{
lat
: centerLat,
lng
: centerLng
}]
});
});
},
// 编辑矩形
drawPolygonMap() {
var that = this;
this
.mouseTool = new AMap
.MouseTool(this
.map);
this
.mouseTool
.polygon({
strokeColor
: "#FF33FF",
strokeOpacity
: 1,
strokeWeight
: 6,
strokeOpacity
: 0
.2,
fillColor
: "#1791fc",
fillOpacity
: 0
.4,
stroke
Style: "solid",
});
this
.mouseTool
.on("draw", function (event) {
that
.path = event
.obj
.w
.path;
that
.map
.clearMap();
var polygon = new AMap
.Polygon({
path
: that
.path,
strokeColor
: "#FF33FF",
strokeWeight
: 6,
strokeOpacity
: 0
.2,
fillOpacity
: 0
.4,
fillColor
: '#1791fc',
zIndex
: 50,
})
that
.pathArea = polygon
.getArea(); // 编辑前的面积
that
.map
.add(polygon)
that
.map
.setFitV
iew([polygon]);
polyEditor = new AMap
.PolyEditor(that
.map, polygon);
polyEditor
.open();
polyEditor
.on('addnode', function (event) {})
polyEditor
.on('adjust', function (event) {})
polyEditor
.on('removenode', function (event) {})
polyEditor
.on('end', function (event) {
that
.path = event
.target
.w
.path;
// 编辑后面积
that
.pathArea = Math
.round(AMap
.GeometryUtil
.ringArea(event
.target
.w
.path));
})
});
},
// 保存
onSubmit() {
var that = this;
this
.$refs
.ruleForm
.validate((valid) => {
if (valid) {
if (!that
.showGraphicsMode) {
// 圆
that
.circleOdLine()
} else if (!that
.showCustomMode) {
// 多边形
that
.polygonOdLine()
}
} else {
console
.log('error submit!!');
return false;
}
});
},
// 图形模式保存
circleOdLine() {
var that = this;
let params = {
areaName
: this
.ruleForm
.name,
areaType
: 0, // 区域类型
radius
: this
.radius,
location
: this
.center,
}
API_PASSENGEROD
.saveAreaInfo(params)
.then((response) => {
if (response
.code == 0) {
this
.map
.clearMap();
let id = response
.value;
this
.mouseTool
.close();
circleEditor && circleEditor
.close();
this
.seachCustomArea(id, this
.ruleForm
.name)
} else {
this
.$message({
message
: response
.message,
type
: 'warning'
});
}
})
.catch((error) => {
this
.$message({
message
: error,
type
: 'warning'
});
})
},
// 自定义模式保存
polygonOdLine() {
let location = [];
this
.path
.map((item, index) => {
location
.push({
lat
: item
.lat,
lng
: item
.lng
})
})
let params = {
areaName
: this
.ruleForm
.name,
areaType
: 1, // 区域类型
location
: location,
areaCoverage
: this
.pathArea,
}
API_PASSENGEROD
.saveAreaInfo(params)
.then((response) => {
if (response
.code == 0) {
this
.map
.clearMap();
let id = response
.value;
this
.mouseTool
.close();
polyEditor && polyEditor
.close();
this
.seachCustomArea( id, this
.ruleForm
.name);
} else {
this
.$message({
message
: response
.message,
type
: 'warning'
});
}
})
.catch((error) => {
this
.$message({
message
: error,
type
: 'warning'
});
})
},
//右侧全城区域top10表格
getRoadOD(data) {
let params = {
startTime
: data
.startTime,
endTime
: data
.endTime,
peakSection
: data
.peakSection,
isWeekday
: data
.isWeekday,
top
: 10,
}
API_PASSENGEROD
.getRegionalTravelOD(params)
.then(res => {
if (res
.code == 0 && res
.value
.length != 0) {
this
.odTableList = res
.value
} else {
this
.odTableList = [];
this
.$message
.error('未查询到 线路OD Top10 数据')
}
})
},
// 站点od
getStationMap(data,status,isStationId){
this
.is
Loading = true;
let params = {};
params
.startTime = data
.startTime;
params
.endTime = data
.endTime;
params
.byLine =false;
params
.top = 100;
params
.ODNumBefore =this
.sliderOdLine[0];
params
.ODNumAfter =this
.sliderOdLine[1];
if(isStationId == 0) {
params
.platformIdOn ='';
params
.platformIdOn ='';
params
.peakSection ='';
params
.isWeekday= '';
} else {
params
.platformIdOn=data
.platformIdOn;
params
.platformIdOff=data
.platformIdOff;
params
.peakSection=data
.peakSection;
params
.isWeekday=data
.isWeekday;
}
this
.stationMapData = [];
API_PASSENGEROD
.getODNum3(params)
.then(res => {
if(res
.code == 0) {
this
.legendList
.oDNumMin = res
.value
.oDNumMin;
this
.legendList
.oDNumMid = res
.value
.oDNumMid;
this
.legendList
.oDNumMax = res
.value
.oDNumMax;
let keyData = [0, this
.legendList
.oDNumMin, this
.legendList
.oDNumMid, this
.legendList
.oDNumMax];
let valData = [String(0), String(this
.legendList
.oDNumMin), String(this
.legendList
.oDNumMid), String(
this
.legendList
.oDNumMax)]
let obj = {};
for (let i = 0; i < valData
.length; i++) {
const key = keyData[i];
obj[key] = valData[i]
}
this
.marks = obj;
if(status){
this
.sliderOdLine = [0, this
.legendList
.oDNumMax]
}
this
.stationMapData = res
.value
this
.drawStationMap();
} else {
this
.is
Loading = false;
console
.log(res
.message)
}
})
.catch((error)=>{
this
.is
Loading = false;
console
.log(error
.msg)
})
},
//绘制飞线图
drawStationMap() {
var that = this;
if(stationPathSimplif
ierIns !== null){
showStations();
} else {
AMapUI
.loadUI(
["misc/PathSimplif
ier", "misc/PointSimplif
ier"],
(PathSimplif
ier, PointSimplif
ier) => {
if (!PathSimplif
ier
.supportCanvas) {
alert("当前环境
不支持 Canvas！");
return;
}
// od线
let oDMaxList = this
.stationMapData
.oDMaxList
let oDMidList = this
.stationMapData
.oDMidList
let oDMinList = this
.stationMapData
.oDMinList
let red = this
.stationMapData
.red
let yellow = this
.stationMapData
.yellow
let arr = [oDMaxList,oDMidList,oDMinList]
let iconList = [red,yellow]
that
.renderLayerMark(arr,iconList)
});
}
},
// 默认线路
defaultLineOD(data,status){
lineStationPathSimplif
ierIns && hideStationLine();
this
.is
Loading = true;
let params = {
startTime
: data
.startTime,
endTime
: data
.endTime,
ODNumBefore
:this
.sliderOdLine[0],
ODNumAfter
:this
.sliderOdLine[1],
byLine
:true,
top
:100,
}
this
.lineMapData = [];
API_PASSENGEROD
.getODNum3(params)
.then(res => {
if(res
.code == 0) {
this
.legendList
.oDNumMin = res
.value
.oDNumMin;
this
.legendList
.oDNumMid = res
.value
.oDNumMid;
this
.legendList
.oDNumMax = res
.value
.oDNumMax;
let keyData = [0, this
.legendList
.oDNumMin, this
.legendList
.oDNumMid, this
.legendList
.oDNumMax];
let valData = [String(0), String(this
.legendList
.oDNumMin), String(this
.legendList
.oDNumMid), String(
this
.legendList
.oDNumMax)]
let obj = {};
for (let i = 0; i < valData
.length; i++) {
const key = keyData[i];
obj[key] = valData[i]
}
this
.marks = obj;
if(status){
this
.sliderOdLine = [0, this
.legendList
.oDNumMax]
}
this
.sliderOdLine = res
.value
this
.drawLineMap();
} else {
this
.is
Loading = false;
console
.log(res
.message)
}
})
.catch((error)=>{
this
.is
Loading = false;
console
.log(error
.msg)
})
},
drawLineMap() {
var that = this;
if(linePathSimplif
ierIns !== null) {
showLine();
} else {
AMapUI
.loadUI(
["misc/PathSimplif
ier", "misc/PointSimplif
ier"],
(PathSimplif
ier, PointSimplif
ier) => {
if (!PathSimplif
ier
.supportCanvas) {
alert("当前环境
不支持 Canvas！");
return;
}
let oDMaxList = this
.sliderOdLine
.oDMaxList
let oDMidList = this
.sliderOdLine
.oDMidList
let oDMinList = this
.sliderOdLine
.oDMinList
let red = this
.sliderOdLine
.red
let yellow = this
.sliderOdLine
.yellow
let arr = [oDMaxList,oDMidList,oDMinList]
let iconList = [red,yellow]
that
.renderLayerMark(arr,iconList)
});
}
},
// 选中线路
checkLineOD(data){
this
.sliderDisabled = true;
// 先清除之前线路
if(this
.stationMarkerArr
.length > 0) {
this
.stationMarkerArr
.map((item,index)=>{
this
.map
.remove(item);
})
}
this
.map
.clearMap();
this
.stationMarkerArr = [];
this
.checkLineObj
.lineStationInfo = [];
let params = {
lineId
:data
.lineId,
direction
:data
.direction ,
startTime
: data
.startTime,
endTime
: data
.endTime,
peakSection
:data
.peakSection,
isWeekday
:data
.isWeekday,
}
API_PASSENGEROD
.getLinePassengerODBaseInfo(params)
.then(res => {
if(res
.code == 0) {
console
.log(layer1,'layer1')
if(layer1){
layer1
.setMap(null);
layer2
.setMap(null);
layer3
.setMap(null);
}
if(markIcon1){
markIcon1
.setMap(null);
markIcon2
.setMap(null);
}
let data = res
.value;
this
.checkLineObj
.linePath = JSON
.parse(data
.linePath);
data
.lineStationInfo
.map((item,index)=>{
let obj = {};
obj
.center = [item
.longitude,item
.latitude];
obj
.name = item
.stationName;
obj
.stationId = item
.stationId;
this
.checkLineObj
.lineStationInfo
.push(obj);
})
this
.checkLineObj
.lineName = data
.lineName;
this
.checkLineObj
.passengerNum = data
.passengerNum;
this
.checkLineObj
.stationNum = data
.stationNum;
this
.checkLineObj
.timeImbalanceFactor = data
.timeImbalanceFactor;
this
.$nextTick(()=>{
this
.getcheckLineMap(this
.checkLineObj
.linePath,this
.checkLineObj
.lineStationInfo);
})
} else {
console
.log(res
.message)
}
})
.catch((error)=>{
console
.log(error
.msg)
})
},
getcheckLineMap(path,stations){
var that = this;
// 站点
let icon
Style = new AMap
.Icon({
size
: new AMap
.Size(15, 15),
image
: require("@/assets/images/layout/selected-vehicle
.png"),
imageSize
: new AMap
.Size(15, 15),
});
this
.stationMarkerArr = [];
stations
.forEach((marker) => {
var stationMarker= new AMap
.Marker({
icon
: icon
Style,
map
: this
.map,
offset
: new AMap
.Pixel(-8, -8),
position
: [marker
.center[0], marker
.center[1]],
});
stationMarker
.setLabel({
offset
: new AMap
.Pixel(5, 20), //设置文本标注偏移量
content
: marker
.name,
direction
: "right", //设置文本标注方位
});
that
.stationMarkerArr
.push(stationMarker);
// 点击显示站点od
stationMarker
.on("click", () => {
this
.searchParams
.stationId = marker
.stationId;
this
.getLineStationPassengersOD(this
.searchParams,true,0)
});
});
// 线路
// 定义线的风格
var polyline = new AMap
.Polyline({
path
: path,
isOutline
: true,
outlineColor
: "#49C3FC",
borderWeight
: 1,
strokeColor
: "#49C3FC",
strokeOpacity
: 1,
strokeWeight
: 2,
stroke
Style: "solid",
strokeDasharray
: [10, 5],
lineJoin
: "round",
lineCap
: "round",
zIndex
: 10,
});
polyline
.setMap(this
.map); // 线路
// 路线的起始点
var startMarker = new AMap
.Marker({
position
: path[0],
icon
: "https
://webapi
.amap
.com/theme/v1
.3/markers/n/start
.png",
map
: this
.map,
});
var endMarker = new AMap
.Marker({
position
: path[path
.length - 1],
icon
: "https
://webapi
.amap
.com/theme/v1
.3/markers/n/end
.png",
map
: this
.map,
});
startMarker
.setMap(this
.map);
endMarker
.setMap(this
.map);
// 缩放地图到合适的视野级别
this
.map
.setFitV
iew([polyline, startMarker, endMarker]);
},
// 线路站点基本信息
getLineStationPassengersOD(val,status,initStatus){ // 首次点击无od量
this
.is
Loading = true;
this
.sliderDisabled = false;
let params = {};
params
.lineId = val
.lineId;
params
.direction = val
.direction;
params
.stationId = val
.stationId;
params
.startTime = val
.startTime;
params
.endTime = val
.endTime;
params
.peakSection = val
.peakSection;
params
.isWeekday = val
.isWeekday;
if(initStatus == 0){
params
.ODNumBefore = '';
params
.ODNumAfter = '';
} else {
params
.ODNumBefore =this
.sliderOdLine[0];
params
.ODNumAfter = this
.sliderOdLine[1];
}
this
.checkStationOd = [];
API_PASSENGEROD
.getLineStationPassengersOD2(params)
.then(res => {
if(res
.code == 0) {
this
.legendList
.oDNumMin = res
.value
.oDNumMin;
this
.legendList
.oDNumMid = res
.value
.oDNumMid;
this
.legendList
.oDNumMax = res
.value
.oDNumMax;
let keyData = [0, this
.legendList
.oDNumMin, this
.legendList
.oDNumMid, this
.legendList
.oDNumMax];
let valData = [String(0), String(this
.legendList
.oDNumMin), String(this
.legendList
.oDNumMid), String(
this
.legendList
.oDNumMax)]
let obj = {};
for (let i = 0; i < valData
.length; i++) {
const key = keyData[i];
obj[key] = valData[i]
}
this
.marks = obj;
if(status){
this
.sliderOdLine = [0, this
.legendList
.oDNumMax]
}
this
.checkStationOd = res
.value
this
.$nextTick(()=>{
this
.checkStationOdMap();
})
this
.is
Loading = false;
} else {
console
.log(res
.message);
this
.is
Loading = false;
}
})
.catch((error)=>{
console
.log(error
.msg);
this
.is
Loading = false;
})
},
// 选择线路站点
checkStationOdMap(){
var that = this;
if(lineStationPathSimplif
ierIns !== null) {
showStationLine()
} else {
AMapUI
.loadUI(
["misc/PathSimplif
ier", "misc/PointSimplif
ier"],
(PathSimplif
ier, PointSimplif
ier) => {
if (!PathSimplif
ier
.supportCanvas) {
alert("当前环境
不支持 Canvas！");
return;
}
let oDMaxList = this
.checkStationOd
.oDMaxList
let oDMidList = this
.checkStationOd
.oDMidList
let oDMinList = this
.checkStationOd
.oDMinList
let red = this
.checkStationOd
.red
let yellow = this
.checkStationOd
.yellow
let arr = [oDMaxList,oDMidList,oDMinList]
let iconList = [red,yellow]
that
.renderLayerMark(arr,iconList)
});
}
},
/**
* @Description
: 创建飞线图及高亮站点
* @author konghaitao
* @date 2023-2-20
* @params arr 飞线图数组 iconList 图标数组
*/
renderLayerMark(arr,iconList){
//倒叙创建覆盖
let that = this
let colors = [
"#FF0000", "#FFC402", "#4E79E9",
];
let icons = [this
.redIcon,this
.yellowIcon]
that
.clearMap()
layer3 = new Loca
.LinkLayer({
map
: that
.map,
fitV
iew
: false,
});
layer3
.setData(arr[2], {
lnglat
: 'lnglat'
});
layer3
.setOptions({
style: {
// 曲率 [-1, 1] 区间
curveness
: function(data) {
if(data
.value
.dis < 300){
return 0
.005;
} else {
return 0
.001;
}
},
borderWidth
: 1
.5,
width
: 1,
opacity
: 0
.8,
color
: colors[2]
}
});
layer2 = new Loca
.LinkLayer({
map
: that
.map,
fitV
iew
: false,
});
layer2
.setData(arr[1], {
lnglat
: 'lnglat'
});
layer2
.setOptions({
style: {
// 曲率 [-1, 1] 区间
curveness
: function(data) {
if(data
.value
.dis < 300){
return 0
.005;
} else {
return 0
.001;
}
},
width
: 1,
opacity
: 0
.8,
color
: colors[1]
}
});
layer1 = new Loca
.LinkLayer({
map
: that
.map,
fitV
iew
: false,
});
layer1
.setData(arr[0], {
lnglat
: 'lnglat'
});
layer1
.setOptions({
style: {
// 曲率 [-1, 1] 区间
curveness
: function(data) {
if(data
.value
.dis < 300){
return 0
.005;
} else {
return 0
.001;
}
},
width
: 1,
opacity
: 0
.8,
color
: colors[0]
}
});
layer1
.render();
layer2
.render();
layer3
.render();
if(iconList){
markIcon2 = new Loca
.IconLayer({
map
: that
.map,
fitV
iew
: true,
});
markIcon2
.setData(iconList[1], {
lnglat
: 'center'
});
markIcon2
.setOptions({
source
: function (res) {
return icons[1];
},
style: {
size
: 28,
}
});
markIcon2
.render();
markIcon1 = new Loca
.IconLayer({
map
: that
.map,
fitV
iew
: true,
});
markIcon1
.setData(iconList[0], {
lnglat
: 'center'
});
markIcon1
.setOptions({
source
: function (res) {
return icons[0];
},
style: {
size
: 28,
}
});
markIcon1
.render();
}
that
.$nextTick(()=>{
that
.is
Loading = false;
})
},
changeFlowEvent(data) {
// let params = this
.searchParams;
switch (this
.nowIndex) {
case 0
:
this
.getStationOD()
break
case 1
:
break
case 2
:
this
.getStationOfAreaInfo(this
.searchId, data);
this
.getStationPathOfAreaInfo(this
.searchId, data) // 自定义区域Od线
break
}
},
getStationOfAreaInfo(id, data) {
let params = this
.searchParams;
params
.id = id;
params
.flowChoose = data;
params
.top = 1000;
this
.searchId = id;
API_PASSENGEROD
.getStationOfAreaInfo(params)
.then((response) => {
if (response
.code === 0) {
this
.odTableList = response
.value
} else {
console
.log(response
.message);
}
})
.catch((error) => {
this
.$message
.error(error);
});
},
getStationPathOfAreaInfo(data, status) {
console
.log(data
.id,'aaaa')
var that = this;
this
.odLineData = [];
this
.is
Loading = true;
let params = {
id
:data
.id,
startTime
:data
.startTime,
endTime
:data
.endTime,
peakSection
:data
.peakSection,
isWeekday
:data
.isWeekday,
flowChoose
:data
.flowChoose,
ODNumBefore
: this
.sliderOdLine[0],
ODNumAfter
:this
.sliderOdLine[1],
}
API_PASSENGEROD
.getStationPathOfAreaInfo2(params)
.then((response) => {
if (response
.code === 0) {
this
.legendList
.oDNumMin = response
.value
.oDNumMin;
this
.legendList
.oDNumMid = response
.value
.oDNumMid;
this
.legendList
.oDNumMax = response
.value
.oDNumMax;
let keyData = [0, this
.legendList
.oDNumMin, this
.legendList
.oDNumMid, this
.legendList
.oDNumMax];
let valData = [String(0), String(this
.legendList
.oDNumMin), String(this
.legendList
.oDNumMid), String(
this
.legendList
.oDNumMax)]
let obj = {};
for (let i = 0; i < valData
.length; i++) {
const key = keyData[i];
obj[key] = valData[i]
}
this
.marks = obj;
if(status) {
this
.sliderOdLine = [0, this
.legendList
.oDNumMax]
}
that
.odLineData = response
.value
this
.areaOdLineMap();
} else {
this
.is
Loading = false;
console
.log(response
.message);
}
})
.catch((error) => {
this
.is
Loading = false;
this
.$message
.error(error);
});
},
// 区域od线
areaOdLineMap(){
var that = this;
if(areaPathSimplif
ierIns !== null){
showAreaLine();
} else {
AMapUI
.load(['ui/misc/PathSimplif
ier', 'lib/$'], function (PathSimplif
ier, $) {
if (!PathSimplif
ier
.supportCanvas) {
alert('当前环境
不支持 Canvas！');
return;
}
let oDMaxList = that
.odLineData
.oDMaxList
let oDMidList = that
.odLineData
.oDMidList
let oDMinList = that
.odLineData
.oDMinList
let arr = [oDMaxList,oDMidList,oDMinList]
that
.renderLayerMark(arr)
});
}
},
// 初始化地图
initMap() {
lazyAMapApiLoaderInstance
.load()
.then(() => {
this
.map = new AMap
.Map(
document.getElementById("container"), {
map
Style: "amap
://
styles/9824f612cff8dc63104cff89ddfd1a93",
expandZoomRange
: true,
zoom
: 13,
zooms
: [3, 21],
resizeEnable
: false,
center
: [117
.38, 32
.92],
keyboardEnable
: false,
zoomEnable
: true,
dragEnable
: true,
animateEnable
: true,
v
iewMode
: '3D',
pitch
: 30,
});
});
},
},
mounted() {
this
.$bus
.$on('checkMode', (data) => {
this
.checkMode(data);
if(data
.type == 1){
//type为1 新增区域模块
this
.editingStatus = !data
.isSelect;
}
})
console
.log('aaaaaaaaaaaa')
this
.initMap();
},
created() {
},
beforeDestroy() {
this
.$bus
.$off("checkMode");
this
.map = null;
stationPathSimplif
ierIns = null;
linePathSimplif
ierIns = null;
lineStationPathSimplif
ierIns = null;
areaPathSimplif
ierIns = null;
this
.clearMap()
},
}
</script>
<
style lang="scss" scoped>
// PX 转 rem
@function px2Rem($px, $base-font-size
: 19
.2px) {
@if (unitless($px)) {
//有无单位
@return ($px / 19
.2) * 1rem;
}
@else if (unit($px)==em) {
@return $px;
}
@return ($px / $base-font-size) * 1rem;
}
.passengerflowOd-wrap {
.left-wrap {
.modeList {
float
: left;
position
: relative;
}
.mode {
width
: px2Rem(150px);
height
: px2Rem(40px);
text-align
: center;
line-height
: px2Rem(40px);
background-color
: #fff;
margin-right
: px2Rem(10px);
}
.mask {
position
: absolute;
left
: 0px;
top
: 0px;
width
: px2Rem(150px);
height
: px2Rem(40px);
border
: 2px solid #2894ec;
}
}
// 图例
.legend-map {
position
: absolute;
bottom
: px2Rem(55px);
right
: 28%;
width
: px2Rem(80px);
height
: px2Rem(100px);
display: flex;
justify-content
: space-between;
flex-direction
: column;
color
: #fff;
background
: #001539;
box-shadow
: 0px 0px 8px 2px rgba(16, 108, 222, 0
.8);
border-radius
: 4px;
opacity
: 0
.8;
z-index
: 100;
.item {
height
: px2Rem(30px);
display: flex;
flex-direction
: row;
// justify-content
: start;
justify-content
: space-around;
align-items
: center;
font-size
: px2Rem(14px);
margin
: 0 15px 0px;
.base-color {
width
: px2Rem(15px);
height
: px2Rem(6px);
border-radius
: 2px;
}
.color-0 {
background
: #FF0000;
}
.color-1 {
background
: #FFC402;
}
.color-2 {
background
: #4E79E9;
}
}
}
.od-line {
position
: absolute;
bottom
: px2Rem(55px);
left
: 28%;
z-index
: 100;
font-size
: px2Rem(18px);
color
: #fff;
.od-slider {
margin-top
: px2Rem(10px);
padding
: px2Rem(7px) px2Rem(15px);
width
: px2Rem(250px);
height
: px2Rem(60px);
background
: #001539;
box-shadow
: 0px 0px 8px 2px rgba(16, 108, 222, 0
.8);
border-radius
: 4px;
z-index
: 100;
}
}
.siteSearch {
position
: absolute;
top
: px2Rem(100px);
right
: 28%;
z-index
: 100;
}
.areaName {
position
: absolute;
bottom
: px2Rem(55px);
right
: 28%;
z-index
: 100;
}
}
</
style>
<
style lang="scss">
// PX 转 rem
@function px2Rem($px, $base-font-size
: 19
.2px) {
@if (unitless($px)) {
//有无单位
@return ($px / 19
.2) * 1rem;
}
@else if (unit($px)==em) {
@return $px;
}
@return ($px / $base-font-size) * 1rem;
}
// 站点名样式
.amap-marker-label {
position
: absolute;
border
: none;
background-color
: transparent;
white-space
: nowrap;
cursor
: pointer;
padding
: 3px;
font-size
: 9px;
font-family
: AlibabaPuHuiTiR;
color
: #ffffff;
// l
}
</
style>
分析当前代码，首次切换模块打印new Loca
.LinKLayer报错，强制刷新后Loca功能才可使用，排查下原因
本文介绍了在开发过程中遇到的IE浏览器与火狐浏览器兼容性问题，通过使用document.getElementById(loading).style.display=none解决方法，实现了IE和火狐浏览器的兼容性。主要内容包括不同浏览器对CSS样式的不同解析，以及如何通过JavaScript代码确保样式在各种浏览器环境下都能正确显示。
扫一扫
936
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
