<template>
|
<div class="mapcontain">
|
<!--<div id="maptalk"></div> -->
|
<div id="centerDiv"
|
class="mapcontainer">
|
<mars-map :url="configUrl"
|
@onload="onMapload" />
|
</div>
|
<div class="search">
|
<el-autocomplete class="search-box absolute"
|
v-model="inputValue"
|
:fetch-suggestions="querySearch"
|
placeholder="请输入您要搜索的内容..."
|
:trigger-on-focus="true"
|
@select="handleSelect"
|
:debounce="0"
|
popper-class="search-select-option"></el-autocomplete>
|
<span @click="searchValue"><i class="el-icon-search"> 搜索</i></span>
|
</div>
|
<div class="tool">
|
<div class="item"
|
@click="selectImg(0, 'click')">
|
<img :class="{ imgClass:isImgClass===0 }"
|
:src="bar[0].img_class_url" />
|
<div :class="{ not_text_div: bar[0].text_div, text_div: !bar[0].text_div }">
|
分公司
|
</div>
|
</div>
|
<div class="item"
|
@click="selectImg(1, 'click')">
|
<img :class="{ imgClass:isImgClass===1 }"
|
:src="bar[1].img_class_url" />
|
<div :class="{ not_text_div: bar[1].text_div, text_div: !bar[1].text_div }">
|
场站
|
</div>
|
</div>
|
<div class="item"
|
@click="selectImg(2, 'click')">
|
<img :class="{ imgClass:isImgClass===2 }"
|
:src="bar[2].img_class_url" />
|
<div :class="{ not_text_div: bar[2].text_div, text_div: !bar[2].text_div }">
|
线路
|
</div>
|
</div>
|
<div class="item"
|
@click="selectImg(3, 'click')">
|
<img :class="{ imgClass:isImgClass===3 }"
|
:src="bar[3].img_class_url" />
|
<div :class="{ not_text_div: bar[3].text_div, text_div: !bar[3].text_div }">
|
站点
|
</div>
|
</div>
|
<div class="item"
|
@click="selectImg(4, 'click')">
|
<img :class="{ imgClass:isImgClass===4 }"
|
:src="bar[4].img_class_url" />
|
<div :class="{ not_text_div: bar[4].text_div, text_div: !bar[4].text_div }">
|
车辆
|
</div>
|
</div>
|
</div>
|
<div class="info-box">
|
<fengongsiinfo v-show="isActivatefengongsi"
|
@closediv="closediv"></fengongsiinfo>
|
<changzhaninfo v-show="isActivatechangzhan"
|
@closediv="closediv"></changzhaninfo>
|
<xianluinfo v-show="isActivatexianlu"
|
@closediv="closediv"
|
:radio="radio"></xianluinfo>
|
<zhandianinfo v-show="isActivatezhandian"
|
@closediv="closediv"></zhandianinfo>
|
<chelianginfo v-show="isActivatecheliang"
|
@closediv="closediv"></chelianginfo>
|
<zhandiancircleinfo v-show="isActivatezhandiancircle"
|
@closediv="closediv"></zhandiancircleinfo>
|
<cheliangcircleinfo v-show="isActivatecheliangcircle"
|
@closediv="closediv"></cheliangcircleinfo>
|
</div>
|
<seltool v-show="isActivatetool"></seltool>
|
<seltoolcl v-show="isActivatetoolcl"></seltoolcl>
|
<maptool v-show="isActivateSearch"></maptool>
|
<div class="switchone"
|
v-show="this.isImgClass == 2">
|
<el-radio-group v-model="radio"
|
size="medium"
|
class="radiogroup"
|
@change="agreeChange">
|
<el-radio-button label="上行"></el-radio-button>
|
<el-radio-button label="下行"></el-radio-button>
|
</el-radio-group>
|
</div>
|
</div>
|
</template>
|
<script>
|
import MarsMap from '../../components/mars/map.vue'
|
import * as maptalks from "maptalks";
|
import mapboxgl from "mapbox-gl";
|
import "maptalks/dist/maptalks.css";
|
import { MapboxglLayer } from "maptalks.mapboxgl";
|
import fengongsiinfo from "./fengongsiinfo.vue";
|
import changzhaninfo from "./changzhaninfo.vue";
|
import chelianginfo from "./chelianginfo.vue";
|
import zhandianinfo from "./zhandianinfo.vue";
|
import xianluinfo from "./xianluinfo.vue";
|
import cheliangcircleinfo from "./cheliangcircleinfo.vue";
|
import zhandiancircleinfo from "./zhandiancircleinfo.vue";
|
import maptool from "./maptool.vue";
|
import seltool from "./seltool.vue";
|
import seltoolcl from "./seltoolcl.vue";
|
|
import img_fengongsi_n_url from "../../assets/mapv2/icon_fengongsi.png";
|
import img_changzhan_n_url from "../../assets/mapv2/icon_changzhan.png";
|
import img_xianlu_n_url from "../../assets/mapv2/icon_xianlu.png";
|
import img_zhandian_n_url from "../../assets/mapv2/icon_zhandian.png";
|
import img_cheliang_n_url from "../../assets/mapv2/icon_cheliang.png";
|
import img_zhandian_m_url from '../../assets/mapv2/icon_zhandian_m.png';
|
import img_cheliang_m_url from '../../assets/mapv2/icon_cheliang_m.png';
|
import img_bg_n_url from '../../assets/mapv2/bg_normal.png';
|
|
import img_fengongsi_s_url from "../../assets/mapv2/icon_fengongsi_s.png";
|
import img_changzhan_s_url from "../../assets/mapv2/icon_changzhan_s.png";
|
import img_xianlu_s_url from "../../assets/mapv2/icon_xianlu_s.png";
|
import img_zhandian_s_url from "../../assets/mapv2/icon_zhandian_s.png";
|
import img_cheliang_s_url from "../../assets/mapv2/icon_cheliang_s.png";
|
import img_cheliang_ss_url from "../../assets/mapv2/icon_cheliang_ss.png";
|
// import bus_model from '../../assets/model/bus3.gltf'
|
import img_bg_s_url from '../../assets/mapv2/bg_s.png';
|
import fgsmarkers from '../../assets/json/fgsmarkers.json';
|
import czmarkers from '../../assets/json/czmarkers.json';
|
import zdmarkers from '../../assets/json/zdmarkers.json';
|
import clmarkers from '../../assets/json/clmarkers.json';
|
import xianlumap from '../../assets/json/xianlumap.json';
|
|
|
|
export default {
|
name: "maptalk",
|
components: { fengongsiinfo, maptool, seltool, seltoolcl, changzhaninfo, xianluinfo, chelianginfo, cheliangcircleinfo, zhandianinfo, zhandiancircleinfo, MarsMap },
|
data () {
|
const basePathUrl = window.basePathUrl || ''
|
return {
|
inputValue: "",
|
inputId: "",
|
eventtype: "",
|
isImgClass: 0,
|
radio: '上行',
|
bar: [
|
{
|
img_class_url: img_fengongsi_n_url,
|
text_div: true,
|
},
|
{
|
img_class_url: img_changzhan_n_url,
|
text_div: true,
|
},
|
{
|
img_class_url: img_xianlu_n_url,
|
text_div: true,
|
},
|
{
|
img_class_url: img_zhandian_n_url,
|
text_div: true,
|
},
|
{
|
img_class_url: img_cheliang_n_url,
|
text_div: true,
|
},
|
],
|
isActivatetool: false,
|
isActivatetoolcl: false,
|
isActivateSearch: false,
|
isActivatecheliang: false,
|
isActivatezhandian: false,
|
isActivatechangzhan: false,
|
isActivatexianlu: false,
|
isActivatefengongsi: false,
|
isActivatezhandiancircle: false,
|
isActivatecheliangcircle: false,
|
configUrl: basePathUrl + 'config/config.json',
|
};
|
},
|
mounted () {
|
//this.initMap();
|
},
|
methods: {
|
// 地图构造完成回调
|
onMapload (map) {
|
// 以下为演示代码
|
let that = this;
|
|
// 创建entity图层
|
const graphicLayer = new this.mars3d.layer.GraphicLayer()
|
map.addLayer(graphicLayer)
|
|
// 2.在layer上绑定监听事件
|
graphicLayer.on(this.mars3d.EventType.click, function (event) {
|
console.log('监听layer，单击了矢量对象', event)
|
console.log(event.graphic.attr)
|
that.hoverDiv(0, event.graphic.attr.companyId)
|
})
|
// 聊城边界
|
const maskLayer = new this.mars3d.layer.GeoJsonLayer({
|
id: 300,
|
url: "/data/liaocheng.geojson",
|
mask: true,
|
symbol: {
|
styleOptions: {
|
fill: true,
|
color: "#111111",
|
opacity: 0.9,
|
outline: false,
|
outlineColor: "#39E09B",
|
outlineWidth: 8,
|
outlineOpacity: 0.8,
|
arcType: Cesium.ArcType.GEODESIC,
|
clampToGround: true,
|
},
|
},
|
show: true,
|
flyTo: false
|
});
|
// 边界墙
|
const graphic = new this.mars3d.graphic.WallEntity({
|
positions: this.liaocheng_boundary,
|
style: {
|
diffHeight: 1500,
|
material: this.mars3d.MaterialUtil.createMaterialProperty(this.mars3d.MaterialType.LineFlow, {
|
image: "img/textures/fence.png",
|
color: "#bdf700",
|
repeat: new Cesium.Cartesian2(5, 1),
|
axisY: true, // 方向，true时上下，false左右
|
speed: 15
|
})
|
}
|
})
|
graphicLayer.addGraphic(graphic)
|
|
map.addLayer(maskLayer);
|
|
|
// 加一些演示数据
|
|
/*
|
this.addFenggongsi(graphicLayer)
|
*/
|
this.selectImg(0, "click");
|
},
|
initMap () {
|
let mapview = utils.initMap("maptalk");
|
this.selectImg(0, "click");
|
},
|
selectImg (type, str) {
|
this.isImgClass = type
|
for (let i = 0; i < this.bar.length; i++) {
|
if (!this.bar[i].text_div) {
|
this.bar[i].text_div = true;
|
if (i === 0) {
|
this.bar[i].img_class_url = img_fengongsi_n_url;
|
} else if (i === 1) {
|
this.bar[i].img_class_url = img_changzhan_n_url;
|
} else if (i === 2) {
|
this.bar[i].img_class_url = img_xianlu_n_url;
|
} else if (i === 3) {
|
this.bar[i].img_class_url = img_zhandian_n_url;
|
} else if (i === 4) {
|
this.bar[i].img_class_url = img_cheliang_n_url;
|
}
|
}
|
}
|
//this.hideAllLayer();
|
this.inputValue = "";
|
this.inputId = "";
|
if (window.drawTool) { window.drawTool.disable(); }
|
switch (type) {
|
case 0:
|
window.marsmap._layerCache.zhandian_layer && window.marsmap._layerCache.zhandian_layer.remove()
|
window.marsmap._layerCache.changzhan_layer && window.marsmap._layerCache.changzhan_layer.remove()
|
window.marsmap._layerCache.cheliang_layer && window.marsmap._layerCache.cheliang_layer.remove()
|
this.initfgsLayer();
|
this.isActivatetool = false
|
this.isActivatetoolcl = false
|
this.isActivateSearch = false
|
this.$store.commit("SET_MapMenu", "分公司")
|
this.$store.commit("SET_SelAttr", { visa: false })
|
this.bar[type].img_class_url = img_fengongsi_s_url;
|
this.bar[type].text_div = false;
|
break;
|
case 1:
|
window.marsmap._layerCache.zhandian_layer && window.marsmap._layerCache.zhandian_layer.remove()
|
window.marsmap._layerCache.fengongsi_layer && window.marsmap._layerCache.fengongsi_layer.remove()
|
window.marsmap._layerCache.cheliang_layer && window.marsmap._layerCache.cheliang_layer.remove()
|
this.initczLayer();
|
this.$store.commit("SET_MapMenu", "场站")
|
this.$store.commit("SET_SelAttr", { visa: false })
|
this.isActivatetool = true;
|
this.isActivatetoolcl = false
|
this.isActivateSearch = false
|
this.bar[type].img_class_url = img_changzhan_s_url;
|
this.bar[type].text_div = false;
|
break;
|
case 2:
|
window.marsmap._layerCache.fengongsi_layer && window.marsmap._layerCache.fengongsi_layer.remove()
|
window.marsmap._layerCache.changzhan_layer && window.marsmap._layerCache.changzhan_layer.remove()
|
window.marsmap._layerCache.cheliang_layer && window.marsmap._layerCache.cheliang_layer.remove()
|
window.marsmap._layerCache.zhandian_layer && window.marsmap._layerCache.zhandian_layer.remove()
|
this.isActivatetool = false
|
this.isActivatetoolcl = false
|
this.isActivateSearch = false
|
this.$store.commit("SET_MapMenu", "线路")
|
this.$store.commit("SET_SelAttr", { visa: false })
|
this.bar[type].img_class_url = img_xianlu_s_url;
|
this.bar[type].text_div = false;
|
this.initxlLayer();
|
break;
|
case 3:
|
window.marsmap._layerCache.fengongsi_layer && window.marsmap._layerCache.fengongsi_layer.remove()
|
window.marsmap._layerCache.changzhan_layer && window.marsmap._layerCache.changzhan_layer.remove()
|
window.marsmap._layerCache.cheliang_layer && window.marsmap._layerCache.cheliang_layer.remove()
|
this.initzdLayer();
|
this.isActivatetool = false
|
this.isActivatetoolcl = false
|
this.isActivateSearch = true
|
this.$store.commit("SET_MapMenu", "站点")
|
this.$store.commit("SET_SelAttr", { visa: false })
|
this.$store.commit("SET_Maptool", false)
|
this.bar[type].img_class_url = img_zhandian_s_url;
|
this.bar[type].text_div = false;
|
break;
|
case 4:
|
window.marsmap._layerCache.fengongsi_layer && window.marsmap._layerCache.fengongsi_layer.remove()
|
window.marsmap._layerCache.changzhan_layer && window.marsmap._layerCache.changzhan_layer.remove()
|
window.marsmap._layerCache.zhandian_layer && window.marsmap._layerCache.zhandian_layer.remove()
|
this.initclLayer();
|
this.isActivatetool = false
|
this.isActivatetoolcl = true
|
this.isActivateSearch = true
|
this.$store.commit("SET_MapMenu", "车辆")
|
this.$store.commit("SET_SelAttr", { visa: false })
|
this.$store.commit("SET_Maptool", false)
|
this.bar[type].img_class_url = img_cheliang_s_url;
|
this.bar[type].text_div = false;
|
break;
|
default:
|
break;
|
}
|
this.eventtype = str;
|
},
|
handleSelect (item) { // 参数
|
if (item.id) {
|
this.inputValue = item.value;
|
this.inputId = item.id;
|
}
|
|
},
|
querySearch (queryString, cb) {
|
let results = [];
|
let resultsfilter = []
|
if (this.$store.state.mapMenu == "分公司") {
|
this.$axios.get(this.$Interface.mapResource.getFenGongSiDataAll, {
|
params: { companyName: queryString }
|
}).then((res) => {
|
results = res.data;
|
results.map(item => {
|
if (queryString == "") {
|
resultsfilter.push({
|
"companyId": item.companyId,
|
"companyName": item.companyName,
|
"value": item.companyName,
|
"id": item.companyId
|
})
|
} else {
|
if (item.companyName.toUpperCase().match(queryString.toUpperCase())) {
|
resultsfilter.push({
|
"companyId": item.companyId,
|
"companyName": item.companyName,
|
"value": item.companyName,
|
"id": item.companyId
|
})
|
}
|
}
|
})
|
});
|
} else if (this.$store.state.mapMenu == "场站") {
|
this.$axios.get(this.$Interface.mapResource.getChangZhanAllData, {
|
params: { stationName: queryString }
|
}).then((res) => {
|
results = res.data;
|
results.map(item => {
|
if (queryString == "") {
|
resultsfilter.push({
|
"stationId": item.stationId,
|
"stationName": item.stationName,
|
"value": item.stationName,
|
"id": item.stationId
|
})
|
} else {
|
if (item.stationName.toUpperCase().match(queryString.toUpperCase())) {
|
resultsfilter.push({
|
"stationId": item.stationId,
|
"stationName": item.stationName,
|
"value": item.stationName,
|
"id": item.stationId
|
})
|
}
|
}
|
})
|
});
|
} else if (this.$store.state.mapMenu == "线路") {
|
this.$axios.get(this.$Interface.mapResource.getXianLuAllByName, {
|
params: { lineName: queryString },
|
}).then((res) => {
|
results = res.data;
|
results.map(item => {
|
if (queryString == "") {
|
resultsfilter.push({
|
"lineId": item.lineId,
|
"lineName": item.lineName,
|
"value": item.lineName,
|
"id": item.lineId
|
})
|
} else {
|
if (item.lineName.toUpperCase().match(queryString.toUpperCase())) {
|
resultsfilter.push({
|
"lineId": item.lineId,
|
"lineName": item.lineName,
|
"value": item.lineName,
|
"id": item.lineId
|
})
|
}
|
}
|
})
|
});
|
} else if (this.$store.state.mapMenu == "站点") {
|
this.$axios.get(this.$Interface.mapResource.getZhandianDataAll, {
|
params: { stationName: queryString }
|
}).then((res) => {
|
results = res.data;
|
results.map(item => {
|
if (queryString == "") {
|
resultsfilter.push({
|
"stationId": item.stationId,
|
"stationName": item.stationName,
|
"value": item.stationName,
|
"id": item.stationId
|
})
|
} else {
|
if (item.stationName.toUpperCase().match(queryString.toUpperCase())) {
|
resultsfilter.push({
|
"stationId": item.stationId,
|
"stationName": item.stationName,
|
"value": item.stationName,
|
"id": item.stationId
|
})
|
}
|
}
|
})
|
});
|
} else if (this.$store.state.mapMenu == "车辆") {
|
this.$axios.get(this.$Interface.mapResource.getCheLiangDateAll, {
|
params: { plateNum: queryString },
|
}).then((res) => {
|
results = res.data;
|
results.map(item => {
|
if (queryString == "") {
|
resultsfilter.push({
|
"plateid": item.plateNum,
|
"plateNum": item.plateNum,
|
"value": item.plateNum,
|
"id": item.plateNum
|
})
|
} else {
|
if (item.plateNum.toUpperCase().match(queryString.toUpperCase())) {
|
resultsfilter.push({
|
"plateid": item.plateNum,
|
"plateNum": item.plateNum,
|
"value": item.plateNum,
|
"id": item.plateNum
|
})
|
}
|
}
|
})
|
});
|
}
|
cb(resultsfilter);
|
},
|
searchValue () {
|
if (this.inputId) {
|
if (this.$store.state.mapMenu == "分公司") {
|
// method 1
|
/*
|
let graphics = (window.marsmap.getLayerById("fengongsi_layer")).getGraphics()
|
graphics.forEach(g =>{
|
if(g.attr.companyId == this.inputId ){
|
this.$store.commit("SET_SelAttr", { visa: true, type: "fengongsi", id: g.attr.companyId, value: g.attr.companyName })
|
g.flyTo({radius: 2000,duration: 1 })
|
}
|
})
|
*/
|
//method 2
|
let graphic = (window.marsmap.getLayerById("fengongsi_layer")).getGraphicByAttr("companyId", this.inputId)
|
if (graphic) {
|
this.$store.commit("SET_SelAttr", { visa: true, type: "fengongsi", id: graphic.attr.companyId, value: graphic.attr.companyName })
|
graphic.flyTo({ radius: 2000, duration: 1 })
|
}
|
|
}
|
|
|
if (this.$store.state.mapMenu == "线路") {
|
this.$store.commit("SET_LineName", this.inputId)
|
} else {
|
this.$store.commit("SET_LineName", 'K11路')
|
}
|
}
|
},
|
|
hideAllLayer () {
|
utils.hideAllLayer();
|
},
|
// 分公司按钮
|
initfgsLayer () {
|
|
|
let that = this
|
const fengongsi_layer = new this.mars3d.layer.GraphicLayer({ id: 'fengongsi_layer' })
|
// 2.在layer上绑定监听事件
|
fengongsi_layer.on(this.mars3d.EventType.click, function (event) {
|
console.log('监听layer，单击了矢量对象', event)
|
console.log(event.graphic.attr)
|
that.$store.commit("SET_SelAttr", { visa: true, type: "fengongsi", id: event.graphic.attr.companyId, value: event.graphic.attr.companyName })
|
event.graphic.flyTo({ radius: 2000, duration: 1 })
|
|
})
|
const fengongsi_area_layer = new this.mars3d.layer.GraphicLayer({ id: 'fengongsi_area_layer' })
|
window.marsmap.addLayer(fengongsi_layer)
|
window.marsmap.addLayer(fengongsi_area_layer)
|
this.$axios.get(this.$Interface.mapResource.getFenGongSiAll, {}).then((res) => {
|
if (res.code === 0) {
|
console.log(res.data);
|
for (let i = 0; i < res.data.length; i++) {
|
const graphic = new this.mars3d.graphic.DivGraphic({
|
position: [res.data[i].longitude, res.data[i].latitude, 1000],
|
style: {
|
html: `<div class="marsBlueGradientPnl"><div>` + res.data[i].companyName + `</div></div>`,
|
offsetY: -60,
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 400000), // 按视距距离显示
|
// 高亮时的样式
|
highlight: {
|
type: this.mars3d.EventType.click,
|
className: "marsBlueGradientPnl-highlight"
|
}
|
},
|
attr: res.data[i]
|
})
|
fengongsi_layer.addGraphic(graphic)
|
}
|
}
|
});
|
},
|
// 站点按钮
|
initzdLayer () {
|
let that = this
|
const zhandian_layer = new this.mars3d.layer.GraphicLayer({ id: 'zhandian_layer' })
|
// 2.在layer上绑定监听事件
|
zhandian_layer.on(this.mars3d.EventType.click, function (event) {
|
console.log('监听layer，单击了矢量对象', event)
|
console.log(event.graphic.attr)
|
that.$store.commit("SET_SelAttr", { visa: true, type: "zhandian", id: event.graphic.attr.stationId, value: event.graphic.attr.stationName })
|
event.graphic.flyTo({ radius: 2000, duration: 1 })
|
|
})
|
const zhandian_area_layer = new this.mars3d.layer.GraphicLayer({ id: 'zhandian_area_layer' })
|
window.marsmap.addLayer(zhandian_layer)
|
window.marsmap.addLayer(zhandian_area_layer)
|
|
this.$axios.get(this.$Interface.mapResource.getZhandianDataAll, {}).then((res) => {
|
if (res.code === 0) {
|
console.log(res.data);
|
for (let i = 0; i < res.data.length; i++) {
|
let positionses = [res.data[i].longitude, res.data[i].latitude, 0]
|
const graphic = new this.mars3d.graphic.BillboardPrimitive({
|
position: positionses,
|
style: {
|
image: img_zhandian_m_url,
|
scale: 0.3,
|
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 400000), // 按视距距离显示
|
// 高亮时的样式
|
highlight: {
|
type: this.mars3d.EventType.click,
|
className: "marsBlueGradientPnl-highlight"
|
}
|
},
|
attr: res.data[i]
|
})
|
zhandian_layer.addGraphic(graphic)
|
}
|
}
|
});
|
},
|
|
// 场站图层
|
initczLayer () {
|
let that = this
|
const changzhan_layer = new this.mars3d.layer.GraphicLayer({ id: 'changzhan_layer' })
|
// 2.在layer上绑定监听事件
|
changzhan_layer.on(this.mars3d.EventType.click, function (event) {
|
console.log('监听layer，单击了矢量对象', event)
|
console.log(event.graphic.attr)
|
that.$store.commit("SET_SelAttr", { visa: true, type: "changzhan", id: event.graphic.attr.stationId, value: event.graphic.attr.stationName })
|
event.graphic.flyTo({ radius: 2000, duration: 1 })
|
|
})
|
const changzhan_area_layer = new this.mars3d.layer.GraphicLayer({ id: 'changzhan_area_layer' })
|
window.marsmap.addLayer(changzhan_layer)
|
window.marsmap.addLayer(changzhan_area_layer)
|
|
this.$axios.get(this.$Interface.mapResource.getChangZhanAllData, {}).then((res) => {
|
console.log(res, "changzhan")
|
if (res.code === 0) {
|
console.log(res.data);
|
for (let i = 0; i < res.data.length; i++) {
|
let positionses = [res.data[i].longitude, res.data[i].latitude, 0]
|
const graphic = new this.mars3d.graphic.BillboardPrimitive({
|
position: positionses,
|
style: {
|
image: img_zhandian_m_url,
|
scale: 0.3,
|
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 400000), // 按视距距离显示
|
// 高亮时的样式
|
highlight: {
|
type: this.mars3d.EventType.click,
|
className: "marsBlueGradientPnl-highlight"
|
}
|
},
|
attr: res.data[i]
|
})
|
changzhan_layer.addGraphic(graphic)
|
}
|
}
|
});
|
},
|
// 路线
|
initxlLayer (id = "411", type = "1") {
|
let that = this
|
const luxian_layer = new this.mars3d.layer.GraphicLayer({ id: 'luxian_layer' })
|
// 2.在layer上绑定监听事件
|
luxian_layer.on(this.mars3d.EventType.click, function (event) {
|
console.log('监听layer，单击了矢量对象', event)
|
console.log(event.graphic.attr)
|
that.$store.commit("SET_SelAttr", { visa: true, type: "luxian", id: event.graphic.attr.stationId, value: event.graphic.attr.stationName })
|
event.graphic.flyTo({ radius: 2000, duration: 1 })
|
|
})
|
const luxian_area_layer = new this.mars3d.layer.GraphicLayer({ id: 'luxian_area_layer' })
|
window.marsmap.addLayer(luxian_layer)
|
window.marsmap.addLayer(luxian_area_layer)
|
|
this.$axios.get(this.$Interface.mapResource.getXianLuDataByLineID, {
|
params: { lineId: id, flag: type },
|
}).then((res) => {
|
console.log(res.data.stationList, "luxian")
|
if (res.code === 0) {
|
console.log(res.data);
|
for (let i = 0; i < res.data.stationList.length; i++) {
|
console.log("dingwei", res.data.stationList[i].longitude, res.data.stationList[i].latitude)
|
const graphic = new this.mars3d.graphic.PointEntity({
|
position: [res.data.stationList[i].longitude, res.data.stationList[i].latitude, 0],
|
style: {
|
color: "#ff0000",
|
pixelSize: 10,
|
outlineColor: "#ffffff",
|
outlineWidth: 2,
|
label: {
|
text: res.data.stationList[i].stationName,
|
}
|
},
|
attr: res.data[i]
|
})
|
luxian_layer.addGraphic(graphic)
|
}
|
}
|
});
|
// utils.loadGeometryById("411", "1");
|
console.log("eee")
|
},
|
|
// 车辆图层
|
initclLayer () {
|
let that = this
|
const cheliang_layer = new this.mars3d.layer.GraphicLayer({ id: 'cheliang_layer' })
|
// 2.在layer上绑定监听事件
|
cheliang_layer.on(this.mars3d.EventType.click, function (event) {
|
console.log('监听layer，单击了矢量对象', event)
|
console.log(event.graphic.attr)
|
that.$store.commit("SET_SelAttr", { visa: true, type: "cheliang", id: event.graphic.attr.stationId, value: event.graphic.attr.stationName })
|
event.graphic.flyTo({ radius: 2000, duration: 1 })
|
|
})
|
const cheliang_area_layer = new this.mars3d.layer.GraphicLayer({ id: 'cheliang_area_layer' })
|
window.marsmap.addLayer(cheliang_layer)
|
window.marsmap.addLayer(cheliang_area_layer)
|
|
this.$axios.get(this.$Interface.mapResource.getChangZhanAllData, {}).then((res) => {
|
console.log(res, "cheliang")
|
if (res.code === 0) {
|
console.log(res.data);
|
for (let i = 0; i < res.data.length; i++) {
|
let positionses = [res.data[i].longitude, res.data[i].latitude, 0]
|
const graphic = new this.mars3d.graphic.ModelEntity({
|
position: positionses,
|
style: {
|
url: "//data.mars3d.cn/gltf/mars/car/bus3.gltf",
|
scale: 0.1,
|
minimumPixelSize: 20,
|
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 400000), // 按视距距离显示
|
// 高亮时的样式
|
highlight: {
|
type: this.mars3d.EventType.click,
|
className: "marsBlueGradientPnl-highlight"
|
}
|
},
|
attr: res.data[i]
|
})
|
cheliang_layer.addGraphic(graphic)
|
}
|
}
|
});
|
},
|
closediv (str) {
|
if (str === "zhandian") {
|
this.isActivatezhandian = false
|
} else if (str === "fengongsi") {
|
this.isActivatefengongsi = false
|
} else if (str === "changzhan") {
|
this.isActivatechangzhan = false
|
} else if (str === "xianlu") {
|
this.isActivatexianlu = false
|
} else if (str === "zhandian") {
|
this.isActivatezhandian = false
|
} else if (str === "cheliang") {
|
this.isActivatecheliang = false
|
} else if (str === "cheliangcircle") {
|
this.isActivatecheliangcircle = false
|
this.$store.commit('SET_Maptool', false);
|
let layer = window.map.getLayer("chelianglayer");
|
layer.forEach(function (g) {
|
g.updateSymbol([{ 'markerFile': img_cheliang_m_url }, { 'markerFile': img_bg_s_url }]);
|
});
|
// if(window.map && window.map.isLoaded()){
|
// let layer = window.map.getLayer("toollayer");
|
// let toollayer = window.map.getLayer("CustomTool_layer");
|
// if(layer){layer.clear()}
|
// if(toollayer){toollayer.clear()}
|
// utils.initcheliangLayer()
|
// }
|
} else if (str === "zhandiancircle") {
|
this.isActivatezhandiancircle = false
|
this.$store.commit('SET_Maptool', false);
|
let layer = window.map.getLayer("zhandianlayer");
|
layer.forEach(function (g) {
|
g.updateSymbol([{ 'markerFile': img_zhandian_m_url }, { 'markerFile': img_bg_s_url }]);
|
});
|
// this.$store.commit("SET_SelAttr", {visa:true,type: "zhandiancircle",value:""})
|
// if(window.map && window.map.isLoaded()){
|
// let layer = window.map.getLayer("toollayer");
|
// let toollayer = window.map.getLayer("CustomTool_layer");
|
// if(layer){layer.clear()}
|
// if(toollayer){toollayer.clear()}
|
// utils.initzhandianLayer()
|
// }
|
}
|
},
|
agreeChange () {
|
let type = this.radio == "上行" ? "1" : this.radio == "下行" ? "2" : ""
|
let lineid = this.inputId == "" ? "411" : this.inputId
|
utils.loadGeometryById(lineid, type);
|
}
|
},
|
watch: {
|
"$store.state.selAttr": function (newVal, oldVal) {
|
this.isActivatefengongsi = false
|
this.isActivatechangzhan = false
|
this.isActivatezhandian = false
|
this.isActivatecheliang = false
|
this.isActivatexianlu = false
|
this.isActivatezhandiancircle = false
|
this.isActivatecheliangcircle = false
|
if (newVal.visa && newVal.type == "fengongsi") {
|
this.isActivatefengongsi = true
|
} else if (newVal.visa && newVal.type == "changzhan") {
|
this.isActivatechangzhan = true
|
} else if (newVal.visa && newVal.type == "xianlu") {
|
this.isActivatexianlu = true
|
} else if (newVal.visa && newVal.type == "zhandian" && !this.$store.state.maptool) {
|
this.isActivatezhandian = true
|
} else if (newVal.visa && newVal.type == "cheliang" && !this.$store.state.maptool) {
|
this.isActivatecheliang = true
|
} else if (newVal.visa && newVal.type == "cheliangcircle") {
|
this.isActivatecheliangcircle = true
|
} else if (newVal.visa && newVal.type == "zhandiancircle") {
|
this.isActivatezhandiancircle = true
|
}
|
}
|
|
}
|
};
|
</script>
|
<style lang="less">
|
@import "../../assets/css/demo.css";
|
.mapcontain {
|
overflow: hidden;
|
#maptalk {
|
width: 100vw;
|
height: calc(100vh - 60px);
|
}
|
.mapcontainer {
|
width: 100vw;
|
height: calc(100vh - 60px);
|
overflow: hidden;
|
}
|
.search {
|
display: flex;
|
position: absolute;
|
top: 100px;
|
left: 50px;
|
width: 412px;
|
z-index: 5;
|
opacity: 0.8;
|
input {
|
border: none;
|
outline: none;
|
width: 100%;
|
height: 36px;
|
padding-left: 13px;
|
padding-right: 46px;
|
background: #06203f;
|
border: 1px solid rgba(17, 133, 226, 0.4);
|
border-radius: 2px;
|
color: #fff;
|
}
|
span {
|
top: 6px;
|
right: 20px;
|
border: none;
|
outline: none;
|
width: 78px;
|
text-align: center;
|
line-height: 24px;
|
opacity: 1;
|
// background: #2749bd;
|
border-left: 1px solid rgba(255, 255, 255, 0.3);
|
cursor: pointer;
|
position: absolute;
|
i {
|
color: #ffffff;
|
}
|
}
|
.search-box {
|
width: 100%;
|
max-height: 536px;
|
overflow-y: scroll;
|
.item-search {
|
cursor: pointer;
|
height: 30px;
|
line-height: 30px;
|
padding-left: 30px;
|
}
|
.item-search:hover {
|
background: #eee;
|
}
|
}
|
.search-box::-webkit-scrollbar {
|
display: none;
|
}
|
}
|
.tool {
|
display: flex;
|
position: absolute;
|
top: 150px;
|
left: 50px;
|
width: 230px;
|
height: 400px;
|
z-index: 2;
|
flex-flow: row wrap;
|
justify-content: left;
|
align-items: center;
|
.imgClass {
|
animation: transformImg 2s linear infinite;
|
}
|
@keyframes transformImg {
|
0% {
|
opacity: 0.3;
|
}
|
5% {
|
opacity: 0.5;
|
}
|
100% {
|
opacity: 1;
|
}
|
}
|
.item {
|
display: flex;
|
justify-content: left;
|
align-items: center;
|
height: 80px;
|
width: 300px;
|
line-height: 80px;
|
padding-left: 15px;
|
.not_text_div {
|
margin-left: 10px;
|
line-height: 32px;
|
width: 102px;
|
text-align: center;
|
color: #ffffff;
|
display: inline-block;
|
background: url("../../assets/mapv2/bg_normal.png");
|
}
|
.text_div {
|
margin-left: 10px;
|
line-height: 32px;
|
width: 102px;
|
text-align: center;
|
color: #ffffff;
|
display: inline-block;
|
background: url("../../assets/mapv2/bg_normal_s.png");
|
}
|
}
|
}
|
|
.info-box {
|
position: absolute;
|
right: 50px;
|
z-index: 1;
|
top: 130px;
|
}
|
.switchone {
|
display: flex;
|
position: absolute;
|
top: 100px;
|
left: 468px;
|
// width: 412px;
|
z-index: 5;
|
opacity: 0.8;
|
.el-radio-button--medium:first-child .el-radio-button__inner {
|
border-radius: 4px 0px 0px 4px;
|
}
|
.el-radio-button--medium:last-child .el-radio-button__inner {
|
border-radius: 0px 4px 4px 0px;
|
}
|
.el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
color: #ffffff;
|
background-color: #409eff;
|
border-color: #409eff;
|
-webkit-box-shadow: -1px 0 0 0 #409eff;
|
box-shadow: -1px 0 0 0 #409eff;
|
}
|
.el-radio-button__inner {
|
white-space: nowrap;
|
background: #06203f;
|
border: 1px solid rgba(17, 133, 226, 0.4);
|
font-weight: 500;
|
border-left: 0;
|
color: #ffffff;
|
-webkit-appearance: none;
|
text-align: center;
|
-webkit-box-sizing: border-box;
|
box-sizing: border-box;
|
outline: 0;
|
margin: 0;
|
position: relative;
|
cursor: pointer;
|
-webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
padding: 10px 20px;
|
font-size: 14px;
|
}
|
}
|
}
|
.maptalks-attribution {
|
display: none;
|
}
|
.search-select-option {
|
opacity: 0.9;
|
background: linear-gradient(180deg, #06203f, #08141c);
|
border: 1px solid #2a488a;
|
}
|
.el-autocomplete-suggestion__wrap {
|
max-height: 584px;
|
padding: 10px 0;
|
-webkit-box-sizing: border-box;
|
box-sizing: border-box;
|
}
|
.el-autocomplete-suggestion li.highlighted,
|
.el-autocomplete-suggestion li:hover {
|
background: rgba(255, 255, 255, 0.06);
|
// border: 1px solid red;
|
}
|
</style>
|
