import * as maptalks from 'maptalks';
|
import mapboxgl from "mapbox-gl";
|
// import * as turf from '@turf/turf';
|
import customTool from './customTool';
|
import 'maptalks/dist/maptalks.css';
|
import { MapboxglLayer } from "maptalks.mapboxgl";
|
import store from '../store';
|
import axios from './axiosHttp';
|
import interfaces from './interface';
|
import { message } from 'ant-design-vue';
|
import Common from '../unit/common';
|
import img_fengongsi_m_url from '../assets/mapv2/icon_fengongsi_m.png';
|
import img_fengongsi_mm_url from '../assets/mapv2/icon_fengongsi_mm.png';
|
import img_changzhan_m_url from '../assets/mapv2/icon_changzhan_m.png';
|
import img_changzhan_mm_url from '../assets/mapv2/icon_changzhan_mm.png';
|
import img_zhandian_m_url from '../assets/mapv2/icon_zhandian_m.png';
|
import img_zhandian_mm_url from '../assets/mapv2/icon_zhandian_mm.png';
|
import img_cheliang_m_url from '../assets/mapv2/icon_cheliang_m.png';
|
import img_cheliang_mm_url from '../assets/mapv2/icon_cheliang_mm.png';
|
import img_cheliang_n_url from '../assets/mapv2/icon_cheliang_n.png';
|
import img_cheliang_s_url from '../assets/mapv2/icon_cheliang_ss.png';
|
import img_bg_s_url from '../assets/mapv2/bg_s.png';
|
import img_bg_m_url from '../assets/mapv2/bg_m.png';
|
import img_bg_m2_url from '../assets/map/xuanlusytle.png';
|
import img_qidian_url from '../assets/mapv2/icon_qidian.png';
|
import img_zhongdian_url from '../assets/mapv2/icon_zhongdian.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 xianluline from '../assets/json/xianluline.json';
|
let fgsMarkers = []
|
let czMarkers = []
|
let zdMarkers = []
|
let clMarkers = []
|
const initMap = (id) => {
|
// let arcUrl = 'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer';
|
// maptalks.SpatialReference.loadArcgis(arcUrl + '?f=pjson', function (err, conf) {
|
// if (err) {
|
// throw new Error(err);
|
// }
|
// window.map = new maptalks.Map(id, {
|
// center: [113.576892,22.271644],
|
// zoom: 10,
|
// minZoom: 1,
|
// maxZoom : 20,
|
// baseLayer: new maptalks.TileLayer('base', {
|
// // 'tileSystem' : conf.tileSystem,
|
// // 'tileSize' : conf.tileSize, // [512, 512]
|
// 'urlTemplate' : '//map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
|
// })
|
// });
|
mapboxgl.accessToken = "pk.eyJ1Ijoiam9saW5lZHUiLCJhIjoiY2txb2ZuY2lvMDM5aDJ3bzFnaWlxa2I3MSJ9.-qa5dZYXif7kWJUgOlBz-g";
|
window.map = new maptalks.Map(id, {
|
center: [115.980367,36.456013],
|
zoom: 4,
|
maxZoom: 20,
|
baseLayer: new maptalks.TileLayer("tile", {
|
urlTemplate: "http://t{s}.tianditu.gov.cn/vec_c/wmts?tk=6565500a44e87d94d26131d1288c8ecb&x={x}&y={y}&l={z}",
|
subdomains:[0,1,2,3,4,5,6,7]
|
}).on("layerload", function () {
|
}),
|
/*
|
baseLayer: new MapboxglLayer("tile", {
|
glOptions: {
|
'style': 'mapbox://styles/jolinedu/ckxiss0v2k3m714lghbdlqpku'
|
},
|
}).on("layerload", function () {
|
}),
|
*/
|
|
});
|
new maptalks.VectorLayer('fengongsilayer', null, { zIndex: 2 }).addTo(window.map);
|
new maptalks.VectorLayer('changzhanlayer', null, { zIndex: 2 }).addTo(window.map);
|
new maptalks.VectorLayer('xianlulayer', null, { zIndex: 1 }).addTo(window.map);
|
new maptalks.VectorLayer('zhandianlayer', null, { zIndex: 2 }).addTo(window.map);
|
new maptalks.VectorLayer('chelianglayer', null, { zIndex: 2 }).addTo(window.map);
|
new maptalks.VectorLayer('templayer', null, { zIndex: 0 }).addTo(window.map);
|
new maptalks.VectorLayer('toollayer', null, { zIndex: 3 }).addTo(window.map);
|
if (window.map.isLoaded()) {
|
window.map.animateTo({
|
zoom: 13,
|
center: [115.980367,36.456013],
|
pitch: 30
|
}, {
|
duration: 5000,
|
easing: 'out'
|
}, function (frame) {
|
if (frame.state.playState === 'finished') {
|
initfgsLayer()
|
}
|
});
|
}
|
// })
|
}
|
const hideAllLayer = () => {
|
if (window.map && window.map.isLoaded()) {
|
let layer = window.map.getLayer("fengongsilayer");
|
if (!layer.isEmpty()) { layer.clear() }
|
layer = window.map.getLayer("changzhanlayer");
|
if (!layer.isEmpty()) { layer.clear() }
|
layer = window.map.getLayer("xianlulayer");
|
if (!layer.isEmpty()) { layer.clear() }
|
layer = window.map.getLayer("zhandianlayer");
|
if (!layer.isEmpty()) { layer.clear() }
|
layer = window.map.getLayer("chelianglayer");
|
if (!layer.isEmpty()) { layer.clear() }
|
layer = window.map.getLayer("templayer");
|
if (!layer.isEmpty()) { layer.clear() }
|
layer = window.map.getLayer("toollayer");
|
if (!layer.isEmpty()) { layer.clear() }
|
layer = window.map.getLayer("CustomTool_layer");
|
if (layer) { layer.clear() }
|
if (window.amap) {
|
layer = window.amap.getLayer("afengongsilayer");
|
if (!layer.isEmpty()) { layer.clear() }
|
layer = window.amap.getLayer("atemplayer");
|
if (!layer.isEmpty()) { layer.clear() }
|
}
|
}
|
}
|
// const initfgsLayer = () => {
|
// if(window.map && window.map.isLoaded()){
|
// let layer = window.map.getLayer("fengongsilayer");
|
// if(layer.isEmpty()){
|
// //测试数据
|
// fgsMarkers = [];
|
// //循环获取测试数据经纬度和名称，添加到标注属性
|
// for (var i = 0; i < fgsmarkers.datas.length; i++) {
|
// var x = fgsmarkers.datas[i].longitude
|
// var y = fgsmarkers.datas[i].latitude
|
// fgsMarkers.push(new maptalks.Marker([x, y], { //标注添加到集合
|
// 'id' : Common.uuid()+''+i,
|
// // 'id' : fgsmarkers.datas[i].companyId,
|
// 'editable': true,
|
// 'properties' : {
|
// 'id' : fgsmarkers.datas[i].companyId,
|
// 'name' : fgsmarkers.datas[i].companyName,
|
// },
|
// 'symbol' : [
|
// {
|
// 'markerFile' : img_fengongsi_m_url,
|
// 'markerWidth' : 60,
|
// 'markerHeight' : 80
|
// },
|
// {
|
// 'markerFile' : img_bg_s_url,
|
// 'markerDy': -75,
|
// },
|
// {
|
// 'textFaceName' : 'sans-serif',
|
// 'textName' : fgsmarkers.datas[i].companyName,
|
// 'textSize' : 14,
|
// 'textFill': '#ffffff',
|
// 'textDy': -90,
|
// 'textHorizontalAlignment': 'top', //left middle right
|
// 'textVerticalAlignment': 'middle' //top middle bottom
|
// }
|
// ]
|
// }))
|
// }
|
// layer.addGeometry(fgsMarkers);
|
// window.map.on('click', function (e) {
|
// layer.forEach(function (g) {
|
// g.updateSymbol([{'markerFile': img_fengongsi_m_url},{'markerFile': img_bg_s_url}]);
|
// });
|
// window.map.identify({
|
// 'coordinate' : e.coordinate,
|
// 'layers' : [layer]
|
// },
|
// function (geos) {
|
// if (geos.length === 0) {
|
// return;
|
// } else {
|
// // if(geos.length ===1 ){
|
// store.commit("SET_SelAttr", {visa:true,type: "fengongsi",id: geos[0].properties.id,value:geos[0].properties.name})
|
// geos[0].updateSymbol([{'markerFile': img_fengongsi_mm_url},{'markerFile': img_bg_m_url}]);
|
// loadtempLayer(geos[0].properties)
|
// window.map.animateTo({
|
// zoom : 14,
|
// center : geos[0]._coordinates.add(0.015, 0.000)
|
// }, {
|
// duration : 500,
|
// easing : 'out'
|
// })
|
// }
|
// }
|
// );
|
// });
|
// } else {
|
// layer.show()
|
// }
|
// }
|
// }
|
// 真实接口
|
const initfgsLayer = () => {
|
let datas = []
|
let layer = window.map.getLayer("fengongsilayer");
|
if (fgsMarkers && fgsMarkers.length < 1) {
|
axios.get(interfaces.mapResource.getFenGongSiAll, {}).then((res) => {
|
if (res.code === 0) {
|
datas = res.data
|
if (window.map && window.map.isLoaded()) {
|
//循环获取测试数据经纬度和名称，添加到标注属性
|
if (layer.isEmpty()) {
|
for (var i = 0; i < datas.length; i++) {
|
var x = datas[i].longitude
|
var y = datas[i].latitude
|
fgsMarkers.push(new maptalks.Marker([x, y], { //标注添加到集合
|
'id': Common.uuid() + '' + i,
|
// 'id' : fgsmarkers.datas[i].companyId,
|
'editable': true,
|
'properties': {
|
'id': datas[i].companyId,
|
'name': datas[i].companyName,
|
},
|
'symbol': [
|
{
|
'markerFile': img_fengongsi_m_url,
|
'markerWidth': 72,
|
'markerHeight': 122
|
},
|
{
|
'markerFile': img_bg_s_url,
|
'markerDy': -120,
|
},
|
{
|
'textFaceName': 'sans-serif',
|
'textName': datas[i].companyName,
|
'textSize': 14,
|
'textFill': '#ffffff',
|
'textDy': -140,
|
'textHorizontalAlignment': 'top', //left middle right
|
'textVerticalAlignment': 'middle' //top middle bottom
|
}
|
]
|
}))
|
}
|
layer.addGeometry(fgsMarkers);
|
} else {
|
layer.show()
|
}
|
}
|
} else {
|
message.warning('您当前网络不稳定,未获取到数据!')
|
}
|
})
|
} else {
|
if (layer.isEmpty()) {
|
layer.addGeometry(fgsMarkers);
|
} else {
|
layer.show()
|
}
|
}
|
window.map.on('click', function (e) {
|
layer.forEach(function (g) {
|
g.updateSymbol([{ 'markerFile': img_fengongsi_m_url }, { 'markerFile': img_bg_s_url }]);
|
});
|
window.map.identify({
|
'coordinate': e.coordinate,
|
'layers': [layer]
|
},
|
function (geos) {
|
if (geos.length === 0) {
|
return;
|
} else {
|
store.commit("SET_SelAttr", { visa: true, type: "fengongsi", id: geos[0].properties.id, value: geos[0].properties.name })
|
geos[0].updateSymbol([{ 'markerFile': img_fengongsi_mm_url }, { 'markerFile': img_bg_m_url }]);
|
loadtempLayer(geos[0].properties)
|
window.map.animateTo({
|
zoom: 14,
|
center: geos[0]._coordinates.add(0.015, 0.000)
|
}, {
|
duration: 500,
|
easing: 'out'
|
})
|
return
|
}
|
}
|
);
|
});
|
}
|
|
// const initzhandianLayer = () => {
|
// if(window.map && window.map.isLoaded()){
|
// let layer = window.map.getLayer("zhandianlayer");
|
// if(layer.isEmpty()){
|
// zdMarkers = [];
|
// for (var i = 0; i < zdmarkers.datas.length; i++) {
|
// var x = zdmarkers.datas[i].longitude
|
// var y = zdmarkers.datas[i].latitude
|
// zdMarkers.push(new maptalks.Marker([x, y], { //标注添加到集合
|
// 'id' : Common.uuid()+''+i,
|
// // 'id' : zdmarkers.datas[i].stationId,
|
// 'editable': true,
|
// 'properties' : {
|
// 'id': zdmarkers.datas[i].stationId,
|
// 'name' : zdmarkers.datas[i].stationName,
|
// 'type':zdmarkers.datas[i].stationTypeName,
|
// },
|
// 'symbol' : [
|
// {
|
// 'markerFile' : img_zhandian_m_url,
|
// 'markerWidth' : { stops: [[4, 12], [14, 12], [16, 60]] },
|
// 'markerHeight' : { stops: [[4, 16], [14, 16], [16, 80]] },
|
// },
|
// {
|
// 'markerFile' : img_bg_s_url,
|
// 'markerDy': -75,
|
// 'markerWidth' : { stops: [[4, 0], [16, 0], [17, 102]] },
|
// 'markerHeight' : { stops: [[4, 0], [16, 0], [17, 32]] },
|
// },
|
// {
|
// 'textFaceName' : 'sans-serif',
|
// 'textName' : zdmarkers.datas[i].stationName,
|
// 'textSize' : { stops: [[4, 0], [16, 0], [17, 14]] },
|
// 'textFill': '#ffffff',
|
// 'textDy': -90,
|
// 'textHorizontalAlignment': 'top', //left middle right
|
// 'textVerticalAlignment': 'middle' //top middle bottom
|
// }
|
// ]
|
// }))
|
// }
|
// layer.addGeometry(zdMarkers);
|
// window.map.on('click', function (e) {
|
// layer.forEach(function (g) {
|
// g.updateSymbol([{'markerFile': img_zhandian_m_url},{'markerFile': img_bg_s_url}]);
|
// });
|
// window.map.identify({
|
// 'coordinate' : e.coordinate,
|
// 'layers' : [layer]
|
// },
|
// function (geos) {
|
// if (geos.length === 0) {
|
// return;
|
// } else {
|
// store.commit("SET_SelAttr", {visa:true,type: "zhandian",id:geos[0].properties.id, value:geos[0].properties.name})
|
// geos[0].updateSymbol([{'markerFile': img_zhandian_mm_url},{'markerFile': img_bg_m_url}]);
|
// // loadtempLayer(geos[0].properties)
|
// // window.map.animateTo({
|
// // zoom : 14,
|
// // center : geos[0]._coordinates.add(0.015, 0.000)
|
// // }, {
|
// // duration : 500,
|
// // easing : 'out'
|
// // })
|
// }
|
// }
|
// );
|
// });
|
// } else {
|
// layer.show()
|
// }
|
// }
|
// }
|
// 站点走的真实接口查询
|
const initzhandianLayer = () => {
|
let datas = []
|
let layer = window.map.getLayer("zhandianlayer");
|
let layertool = window.map.getLayer("CustomTool_layer");
|
if (layertool) {
|
layertool.clear()
|
}
|
if (zdMarkers && zdMarkers.length < 1) {
|
axios.get(interfaces.mapResource.getZhandianDataAll, {}).then((res) => {
|
if (res.code === 0) {
|
datas = res.data
|
if (window.map && window.map.isLoaded()) {
|
if (layer.isEmpty()) {
|
zdMarkers = []; //标注集合
|
//循环获取测试数据经纬度和名称，添加到标注属性
|
for (var i = 0; i < datas.length; i++) {
|
var x = datas[i].longitude
|
var y = datas[i].latitude
|
zdMarkers.push(new maptalks.Marker([x, y], { //标注添加到集合
|
'id': Common.uuid() + i,
|
'editable': true,
|
'properties': {
|
'id': datas[i].stationId,
|
'name': datas[i].stationName,
|
'type': datas[i].stationTypeName
|
},
|
'symbol': [
|
{
|
'markerFile': img_zhandian_m_url,
|
'markerWidth': { stops: [[4, 12], [14, 12], [16, 72]] },
|
'markerHeight': { stops: [[4, 16], [14, 16], [16, 122]] },
|
},
|
{
|
'markerFile': img_bg_s_url,
|
'markerDy': -120,
|
'markerWidth': { stops: [[4, 0], [16, 0], [17, 130]] },
|
'markerHeight': { stops: [[4, 0], [16, 0], [17, 34]] },
|
},
|
{
|
'textFaceName': 'sans-serif',
|
'textName': datas[i].stationName,
|
'textSize': { stops: [[4, 0], [16, 0], [17, 14]] },
|
'textFill': '#ffffff',
|
'textDy': { stops: [[10, 0], [16, -120], [17, -140]] },
|
'textHorizontalAlignment': 'top', //left middle right
|
'textVerticalAlignment': 'middle' //top middle bottom
|
}
|
]
|
}))
|
}
|
layer.addGeometry(zdMarkers);
|
}
|
} else {
|
layer.show()
|
}
|
} else {
|
message.warning('您当前网络不稳定,未获取到数据!')
|
}
|
})
|
} else {
|
if (layer.isEmpty()) {
|
layer.addGeometry(zdMarkers);
|
} else {
|
layer.forEach(function (g) {
|
g.updateSymbol([{ 'markerFile': img_zhandian_m_url }, { 'markerFile': img_bg_s_url }]);
|
});
|
layer.show()
|
}
|
}
|
window.map.animateTo({
|
zoom: 13,
|
center: [115.980367,36.456013]
|
});
|
window.map.on('click', function (e) {
|
if (!store.state.maptool) {
|
layer.forEach(function (g) {
|
g.updateSymbol([{ 'markerFile': img_zhandian_m_url }, { 'markerFile': img_bg_s_url }]);
|
});
|
window.map.identify({
|
'coordinate': e.coordinate,
|
'layers': [layer]
|
},
|
function (geos) {
|
if (geos.length === 0) {
|
return;
|
} else {
|
store.commit("SET_SelAttr", { visa: true, type: "zhandian", id: geos[0].properties.id, value: geos[0].properties.name })
|
geos[0].updateSymbol([{ 'markerFile': img_zhandian_mm_url }, { 'markerFile': img_bg_m_url }]);
|
// loadtempLayer(geos[0].properties)
|
// window.map.animateTo({
|
// zoom : 14,
|
// center : geos[0]._coordinates.add(0.015, 0.000)
|
// }, {
|
// duration : 500,
|
// easing : 'out'
|
// })
|
return
|
}
|
}
|
);
|
} else {
|
window.map.identify({
|
'coordinate': e.coordinate,
|
'layers': [layer]
|
},
|
function (geos) {
|
if (geos.length === 0) {
|
return;
|
} else {
|
let str = store.state.selAttr.value
|
if (str != "") {
|
if (str.indexOf(geos[0].properties.id) < 0) {
|
str = str + "," + geos[0].properties.id
|
}
|
} else {
|
str = geos[0].properties.id
|
}
|
store.commit("SET_SelAttr", { visa: true, type: "zhandiancircle", value: str })
|
geos[0].updateSymbol([{ 'markerFile': img_zhandian_mm_url }, { 'markerFile': img_bg_m_url }]);
|
return;
|
}
|
}
|
);
|
}
|
// }
|
// } else {
|
// message.warning('您当前网络不稳定,未获取到数据!')
|
// }
|
});
|
}
|
|
const initchangzhanLayer = () => {
|
let datas = []
|
let layer = window.map.getLayer("changzhanlayer");
|
if (czMarkers && czMarkers.length < 1) {
|
axios.get(interfaces.mapResource.getChangZhanAllData, {}).then((res) => {
|
if (res.code === 0) {
|
datas = res.data
|
if (window.map && window.map.isLoaded()) {
|
if (layer.isEmpty()) {
|
czMarkers = []; //标注集合
|
//循环获取测试数据经纬度和名称，添加到标注属性
|
for (let i = 0; i < datas.length; i++) {
|
let x = datas[i].longitude
|
let y = datas[i].latitude
|
czMarkers.push(new maptalks.Marker([x, y], { //标注添加到集合
|
'id': Common.uuid() + '' + i,
|
'editable': true,
|
'properties': {
|
'id': datas[i].stationId,
|
'name': datas[i].stationName,
|
'type': datas[i].stationType
|
},
|
'symbol': [
|
{
|
'markerFile': img_changzhan_m_url,
|
'markerWidth': 72,
|
'markerHeight': 122
|
},
|
{
|
'markerFile': img_bg_m_url,
|
'markerDy': -120,
|
'markerOpacity': 0
|
},
|
{
|
'textFaceName': 'sans-serif',
|
'textName': datas[i].stationName,
|
'textSize': 0,
|
'textFill': '#ffffff',
|
'textDy': -140,
|
'textHorizontalAlignment': 'top', //left middle right
|
'textVerticalAlignment': 'middle' //top middle bottom
|
}
|
]
|
}))
|
}
|
layer.addGeometry(czMarkers);
|
} else {
|
layer.show()
|
}
|
}
|
} else {
|
message.warning('您当前网络不稳定,未获取到数据!')
|
}
|
})
|
} else {
|
if (layer.isEmpty()) {
|
layer.addGeometry(czMarkers);
|
} else {
|
layer.show()
|
}
|
}
|
window.map.on('click', function (e) {
|
layer.forEach(function (g) {
|
g.updateSymbol([{ 'markerFile': img_changzhan_m_url }, { 'markerOpacity': 0 }, { 'textSize': 0 }]);
|
});
|
window.map.identify({
|
'coordinate': e.coordinate,
|
'layers': [layer]
|
},
|
function (geos) {
|
if (geos.length === 0) {
|
return;
|
} else {
|
store.commit("SET_SelAttr", { visa: true, type: "changzhan", id: geos[0].properties.id, value: geos[0].properties.name })
|
geos[0].updateSymbol([{ 'markerFile': img_changzhan_mm_url }, { 'markerOpacity': 1 }, { 'textSize': 14 }]);
|
return;
|
}
|
}
|
);
|
});
|
}
|
// 场站走后台接口方法
|
// const initchangzhanLayer = () => {
|
// if(window.map && window.map.isLoaded()){
|
// let layer = window.map.getLayer("changzhanlayer");
|
// if(layer.isEmpty()){
|
// //测试数据
|
// czMarkers = [];
|
// //循环获取测试数据经纬度和名称，添加到标注属性
|
// for (var i = 0; i < czmarkers.datas.length; i++) {
|
// var x = czmarkers.datas[i].longitude
|
// var y = czmarkers.datas[i].latitude
|
// czMarkers.push(new maptalks.Marker([x, y], { //标注添加到集合
|
// 'id' : Common.uuid()+''+i,
|
// 'editable': true,
|
// 'properties' : {
|
// 'id' : czmarkers.datas[i].stationId,
|
// 'name' : czmarkers.datas[i].stationName,
|
// 'type' : czmarkers.datas[i].stationType
|
// },
|
// 'symbol' : [
|
// {
|
// 'markerFile' : img_changzhan_m_url,
|
// 'markerWidth' : 60,
|
// 'markerHeight' : 80
|
// },
|
// {
|
// 'markerFile' : img_bg_s_url,
|
// 'markerDy': -75,
|
// },
|
// {
|
// 'textFaceName' : 'sans-serif',
|
// 'textName' : czmarkers.datas[i].stationName,
|
// 'textSize' : 14,
|
// 'textFill': '#ffffff',
|
// 'textDy': -90,
|
// 'textHorizontalAlignment': 'top', //left middle right
|
// 'textVerticalAlignment': 'middle' //top middle bottom
|
// }
|
// ]
|
// }))
|
// }
|
// layer.addGeometry(czMarkers);
|
// window.map.on('click', function (e) {
|
// layer.forEach(function (g) {
|
// g.updateSymbol([{'markerFile': img_changzhan_m_url},{'markerFile': img_bg_s_url}]);
|
// });
|
// window.map.identify({
|
// 'coordinate' : e.coordinate,
|
// 'layers' : [layer]
|
// },
|
// function (geos) {
|
// if (geos.length === 0) {
|
// return;
|
// } else {
|
// store.commit("SET_SelAttr", {visa:true,type: "changzhan",id:geos[0].properties.id, value:geos[0].properties.name})
|
// geos[0].updateSymbol([{'markerFile': img_changzhan_mm_url},{'markerFile': img_bg_m_url}]);
|
// window.map.animateTo({
|
// zoom : 14,
|
// center : geos[0]._coordinates.add(0.015, 0.000)
|
// }, {
|
// duration : 500,
|
// easing : 'out'
|
// })
|
// }
|
// }
|
// );
|
// });
|
// } else {
|
// layer.show()
|
// }
|
// }
|
// }
|
|
const queryChangZhanAttrByType = (value) => {
|
let layer = window.map.getLayer("changzhanlayer");
|
if (!layer.isEmpty()) {
|
layer.filter(function (marker) {
|
let attr = marker.getProperties()
|
if (value.indexOf(attr.type) > -1) {
|
marker.show()
|
} else {
|
marker.hide()
|
}
|
})
|
}
|
}
|
// 已经不再使用的方法
|
const initxianluLayer = () => {
|
if (window.map && window.map.isLoaded()) {
|
let layer = window.map.getLayer("xianlulayer");
|
let layertemp = window.map.getLayer("templayer");
|
layer.clear()
|
layertemp.clear()
|
var lines = new maptalks.LineString([
|
[113.568662, 22.306878],
|
[113.559393, 22.304972],
|
[113.554243, 22.277335],
|
[113.559049, 22.270981],
|
[113.565916, 22.259225],
|
[113.569006, 22.247469]], {
|
'id': Math.random() * 1000,
|
'editable': true,
|
'properties': {
|
'name': 'ceshidian',
|
},
|
symbol: {
|
'lineDasharray': [0, 0],
|
'linePatternFile': img_bg_m2_url,
|
'linePatternDx': 0,
|
'lineCap': 'round',
|
'lineJoin': 'bevel',
|
'lineWidth': 5
|
}
|
})
|
layer.addGeometry(lines);
|
lines.animate({
|
symbol: {
|
linePatternDx: 20
|
}
|
}, {
|
repeat: true
|
});
|
// 给线的起点和终点添加点样式
|
{
|
let markerbegin = new maptalks.Marker(lines.getFirstCoordinate(), { //标注添加到集合
|
'id': 'beginid',
|
'properties': {
|
'name': '线路起点',
|
},
|
'symbol': [
|
{
|
'markerFile': img_qidian_url,
|
'markerWidth': 248,
|
'markerHeight': 132,
|
'markerDy': 33
|
}
|
]
|
})
|
layertemp.addGeometry(markerbegin);
|
let markerend = new maptalks.Marker(lines.getLastCoordinate(), { //标注添加到集合
|
'id': 'endid',
|
'properties': {
|
'name': '线路终点',
|
},
|
'symbol': [
|
{
|
'markerFile': img_zhongdian_url,
|
'markerWidth': 182,
|
'markerHeight': 97,
|
'markerDy': 24
|
}
|
]
|
})
|
layertemp.addGeometry(markerend);
|
|
window.map.on('click', function (e) {
|
window.map.identify({
|
'coordinate': e.coordinate,
|
'layers': [layer]
|
},
|
function (geos) {
|
if (geos.length === 0) {
|
return;
|
} else {
|
store.commit("SET_SelAttr", { visa: true, type: "xianlu", id: geos[0]._id, value: geos[0].properties.name })
|
}
|
}
|
);
|
window.map.identify({
|
'coordinate': e.coordinate,
|
'layers': [layertemp]
|
},
|
function (geos) {
|
if (geos.length === 0) {
|
return;
|
} else {
|
store.commit("SET_SelAttr", { visa: true, type: "zhandian", id: geos[0]._id, value: geos[0].properties.name })
|
}
|
}
|
);
|
});
|
}
|
}
|
}
|
|
const initxianluLayerTrue = (attr) => {
|
let xianlumarker = []
|
let lines = []
|
if (window.map && window.map.isLoaded()) {
|
let layer = window.map.getLayer("xianlulayer");
|
let layertemp = window.map.getLayer("templayer");
|
layer.clear()
|
layertemp.clear()
|
for (let index = 0; index < attr.lineTypeMapList.length; index++) {
|
const element = attr.lineTypeMapList[index];
|
let line = new maptalks.LineString(element.linePointList, {
|
'id': Common.uuid(),
|
'editable': true,
|
'properties': {
|
'id': attr.lineId,
|
'name': attr.lineName,
|
'routeNature': attr.routeNature,
|
'routeNatureName': attr.routeNatureName,
|
},
|
symbol: {
|
'lineDasharray': [0, 0],
|
'linePatternFile': img_bg_m2_url,
|
'linePatternDx': 0,
|
'lineCap': 'round',
|
'lineJoin': 'bevel',
|
'lineWidth': 5
|
}
|
})
|
// line.animate({
|
// symbol: {
|
// linePatternDx: 20
|
// }
|
// }, {
|
// repeat: true
|
// });
|
lines.push(line)
|
}
|
layer.addGeometry(lines);
|
// 添加路线上的所有站点
|
{
|
for (var i = 0; i < attr.stationList.length; i++) {
|
var x = attr.stationList[i].longitude
|
var y = attr.stationList[i].latitude
|
// if (i == 0) {
|
// xianlumarker.push(new maptalks.Marker([x, y], { //标注添加到集合
|
// 'id': Common.uuid() + '' + i,
|
// 'editable': true,
|
// 'properties': {
|
// 'id': attr.stationList[i].stationId,
|
// 'name': attr.stationList[i].stationName,
|
// 'type': attr.stationList[i].stationTypeName,
|
// 'flag': false
|
// },
|
// 'symbol': [
|
// {
|
// 'markerFile': img_qidian_url,
|
// 'markerWidth': 248,
|
// 'markerHeight': 132,
|
// 'markerDy': 33
|
// },
|
// {
|
// 'textFaceName': 'sans-serif',
|
// 'textName': attr.stationList[i].stationName,
|
// 'textFill': '#ffffff',
|
// 'textDy': -65,
|
// 'textDx': 30,
|
// 'textHorizontalAlignment': 'right', //left middle right
|
// 'textVerticalAlignment': 'top' //top middle bottom
|
// }
|
// ]
|
// }))
|
// } else if (i == attr.stationList.length - 1) {
|
// xianlumarker.push(new maptalks.Marker([x, y], { //标注添加到集合
|
// 'id': Common.uuid() + '' + i,
|
// 'editable': true,
|
// 'properties': {
|
// 'id': attr.stationList[i].stationId,
|
// 'name': attr.stationList[i].stationName,
|
// 'type': attr.stationList[i].stationTypeName,
|
// 'flag': false
|
// },
|
// 'symbol': [
|
// {
|
// 'markerFile': img_zhongdian_url,
|
// 'markerWidth': 182,
|
// 'markerHeight': 97,
|
// 'markerDy': 24
|
// },
|
// {
|
// 'textFaceName': 'sans-serif',
|
// 'textName': attr.stationList[i].stationName,
|
// 'textFill': '#ffffff',
|
// 'textDy': -65,
|
// 'textDx': 30,
|
// 'textHorizontalAlignment': 'right', //left middle right
|
// 'textVerticalAlignment': 'top' //top middle bottom
|
// }
|
// ]
|
// }))
|
// } else {
|
// xianlumarker.push(new maptalks.Marker([x, y], { //标注添加到集合
|
// 'id': Common.uuid() + '' + i,
|
// 'editable': true,
|
// 'properties': {
|
// 'id': attr.stationList[i].stationId,
|
// 'name': attr.stationList[i].stationName,
|
// 'type': attr.stationList[i].stationTypeName,
|
// 'flag': true
|
// },
|
// 'symbol': [
|
// {
|
// 'markerFile': img_zhandian_m_url,
|
// 'markerWidth': 60,
|
// 'markerHeight': 80
|
// },
|
// {
|
// 'markerFile': img_bg_s_url,
|
// 'markerDy': -75,
|
// },
|
// {
|
// 'textFaceName': 'sans-serif',
|
// 'textName': attr.stationList[i].stationName,
|
// 'textSize': 14,
|
// 'textFill': '#ffffff',
|
// 'textDy': -90,
|
// 'textHorizontalAlignment': 'top', //left middle right
|
// 'textVerticalAlignment': 'middle' //top middle bottom
|
// }
|
// ]
|
// }))
|
// }
|
xianlumarker.push(new maptalks.Marker([x, y], { //标注添加到集合
|
'id': Common.uuid() + '' + i,
|
'editable': true,
|
'properties': {
|
'id': attr.stationList[i].stationId,
|
'name': attr.stationList[i].stationName,
|
'type': attr.stationList[i].stationTypeName,
|
'flag': false
|
},
|
'symbol': [
|
{
|
'markerType': 'ellipse',
|
'markerFill': 'rgb(135,196,240)',
|
'markerFillOpacity': 1,
|
'markerLineColor': '#34495e',
|
'markerLineWidth': 1,
|
'markerLineOpacity': 0.8,
|
'markerLineDasharray': [],
|
'markerWidth': 10,
|
'markerHeight': 10,
|
'markerDx': 0,
|
'markerDy': 0,
|
'markerOpacity': 0.8
|
},
|
{
|
'textFaceName': 'sans-serif',
|
'textName': attr.stationList[i].stationName,
|
'textFill': '#ffffff',
|
'textDy': -10,
|
'textDx': 15,
|
'textHorizontalAlignment': 'middle', //left middle right
|
'textVerticalAlignment': 'top' //top middle bottom
|
}
|
]
|
}))
|
}
|
layertemp.addGeometry(xianlumarker);
|
}
|
layer.setZIndex(1)
|
layertemp.setZIndex(2)
|
// 给线和点添加点击事件
|
{
|
window.map.animateTo({
|
zoom: map.getFitZoom(lines[0].getExtent()) - 1,
|
center: lines[0].getExtent().getCenter()
|
}, {
|
duration: 500,
|
easing: 'out'
|
})
|
window.map.on('click', function (e) {
|
window.map.identify({
|
'coordinate': e.coordinate,
|
'layers': [layer]
|
},
|
function (geos) {
|
if (geos.length === 0) {
|
return;
|
} else {
|
store.commit("SET_SelAttr", { visa: true, type: "xianlu", id: geos[0].properties.id, value: geos[0].properties.name })
|
return;
|
}
|
}
|
);
|
window.map.identify({
|
'coordinate': e.coordinate,
|
'layers': [layertemp]
|
},
|
function (geos) {
|
// layertemp.forEach(function (g) {
|
// if (g.properties.flag) {
|
// g.updateSymbol([{ 'markerFile': img_zhandian_m_url }, { 'markerFile': img_bg_s_url }]);
|
// }
|
// });
|
if (geos.length === 0) {
|
return;
|
} else {
|
store.commit("SET_SelAttr", { visa: true, type: "zhandian", id: geos[0].properties.id, value: geos[0].properties.name })
|
if (geos[0].properties.flag) {
|
// geos[0].updateSymbol([{ 'markerFile': img_zhandian_mm_url }, { 'markerFile': img_bg_m_url }]);
|
return;
|
}
|
}
|
}
|
);
|
});
|
}
|
}
|
}
|
const loadCheLiangByLine = (id) => {
|
let layer = window.map.getLayer("chelianglayer");
|
layer.clear()
|
axios.get(interfaces.mapResource.getLineRunVehicle, {
|
params: { lineName: id },
|
}).then((res) => {
|
if (res.code === 0) {
|
// console.log("==================",res.data)
|
let datas = res.data
|
let clmarkerline = []
|
for (let i = 0; i < datas.length; i++) {
|
let x = datas[i].longitude
|
let y = datas[i].latitude
|
clmarkerline.push(new maptalks.Marker([x, y], { //标注添加到集合
|
'id': Common.uuid() + i,
|
'editable': true,
|
'properties': {
|
'id': datas[i].plateNum,
|
'name': datas[i].plateNum,
|
'companyName': datas[i].companyName
|
},
|
'symbol': [
|
{
|
'markerFile': img_cheliang_n_url,
|
// 'markerWidth': { stops: [[4, 20], [14, 20], [16, 54]] },
|
// 'markerHeight': { stops: [[4, 20], [14, 20], [16, 54]] },
|
'markerWidth': 30,
|
'markerHeight': 30,
|
}
|
// {
|
// 'textFaceName': 'sans-serif',
|
// 'textName': datas[i].plateNum,
|
// // 'textSize': { stops: [[10, 0], [16, 0], [17, 14]] },
|
// 'textSize': 12,
|
// // 'textDy': -45,
|
// 'textDy': -20,
|
// 'textFill': '#ffffff',
|
// 'textHorizontalAlignment': 'middle', //left middle right
|
// 'textVerticalAlignment': 'top' //top middle bottom
|
// }
|
]
|
}))
|
}
|
layer.addGeometry(clmarkerline);
|
window.map.on('click', function (e) {
|
if (store.state.mapMenu == "线路") {
|
layer.forEach(function (g) {
|
g.updateSymbol([{ 'markerFile': img_cheliang_n_url }]);
|
});
|
window.map.identify({
|
'coordinate': e.coordinate,
|
'layers': [layer]
|
},
|
function (geos) {
|
if (geos.length === 0) {
|
return;
|
} else {
|
store.commit("SET_SelAttr", { visa: true, type: "cheliang", id: geos[0].properties.id, value: geos[0].properties.name })
|
// geos[0].updateSymbol([{ 'markerFile': img_cheliang_s_url }]);
|
return;
|
}
|
}
|
);
|
}
|
})
|
} else {
|
message.warning('您当前网络不稳定,未获取到数据!')
|
}
|
});
|
}
|
// 车辆静态数据
|
// const initcheliangLayer = () => {
|
// if(window.map && window.map.isLoaded()){
|
// let layer = window.map.getLayer("chelianglayer");
|
// if(layer.isEmpty()){
|
// //测试数据
|
// clMarkers = [];
|
// //循环获取测试数据经纬度和名称，添加到标注属性
|
// for (var i = 0; i < clmarkers.datas.length; i++) {
|
// var x = clmarkers.datas[i].LON
|
// var y = clmarkers.datas[i].LAT
|
// clMarkers.push(new maptalks.Marker([x, y], { //标注添加到集合
|
// 'id' : clmarkers.datas[i].id,
|
// 'editable': true,
|
// 'properties' : {
|
// 'name' : clmarkers.datas[i].NAME,
|
// 'company' : clmarkers.datas[i].company,
|
// },
|
// 'symbol' : [
|
// {
|
// 'markerFile' : img_cheliang_m_url,
|
// 'markerWidth' : 60,
|
// 'markerHeight' : 80
|
// },
|
// {
|
// 'markerFile' : img_bg_s_url,
|
// 'markerDy': -75,
|
// },
|
// {
|
// 'textFaceName' : 'sans-serif',
|
// 'textName' : clmarkers.datas[i].NAME,
|
// 'textSize' : 14,
|
// 'textFill': '#ffffff',
|
// 'textDy': -90,
|
// 'textHorizontalAlignment': 'top', //left middle right
|
// 'textVerticalAlignment': 'middle' //top middle bottom
|
// }
|
// ]
|
// }))
|
// }
|
// layer.addGeometry(clMarkers);
|
// window.map.on('click', function (e) {
|
// layer.forEach(function (g) {
|
// g.updateSymbol([{'markerFile': img_cheliang_m_url},{'markerFile': img_bg_s_url}]);
|
// });
|
// window.map.identify({
|
// 'coordinate' : e.coordinate,
|
// 'layers' : [layer]
|
// },
|
// function (geos) {
|
// if (geos.length === 0) {
|
// return;
|
// } else {
|
// store.commit("SET_SelAttr", {visa:true,type: "cheliang",value:geos[0].properties.name})
|
// geos[0].updateSymbol([{'markerFile': img_cheliang_mm_url},{'markerFile': img_bg_m_url}]);
|
// window.map.animateTo({
|
// zoom : 14,
|
// center : geos[0]._coordinates.add(0.015, 0.000)
|
// }, {
|
// duration : 500,
|
// easing : 'out'
|
// })
|
// }
|
// }
|
// );
|
// });
|
// } else {
|
// layer.show()
|
// }
|
// }
|
// }
|
// 接口获取车辆动态数据
|
const initcheliangLayer = () => {
|
if (window.map && window.map.isLoaded()) {
|
let layer = window.map.getLayer("chelianglayer");
|
let toollayer = window.map.getLayer("CustomTool_layer");
|
if (toollayer) { toollayer.clear() }
|
let datas = [];
|
if (clMarkers && clMarkers.length < 1) {
|
axios.get(interfaces.mapResource.getCheLiangDateAll, {}).then((res) => {
|
if (res.code === 0) {
|
datas = res.data
|
if (layer.isEmpty()) {
|
//测试数据
|
clMarkers = [];
|
//循环获取测试数据经纬度和名称，添加到标注属性
|
for (var i = 0; i < datas.length; i++) {
|
var x = datas[i].longitude
|
var y = datas[i].latitude
|
clMarkers.push(new maptalks.Marker([x, y], { //标注添加到集合
|
'id': Common.uuid() + i,
|
'editable': true,
|
'properties': {
|
'id': datas[i].plateNum,
|
'name': datas[i].plateNum,
|
'companyName': datas[i].companyName
|
},
|
'symbol': [
|
{
|
'markerFile': img_cheliang_m_url,
|
'markerWidth': { stops: [[10, 12], [14, 12], [16, 72]] },
|
'markerHeight': { stops: [[10, 16], [14, 16], [16, 122]] },
|
},
|
{
|
'markerFile': img_bg_s_url,
|
'markerDy': -120,
|
'markerWidth': { stops: [[4, 0], [16, 0], [17, 130]] },
|
'markerHeight': { stops: [[4, 0], [16, 0], [17, 34]] },
|
},
|
{
|
'textFaceName': 'sans-serif',
|
'textName': datas[i].plateNum,
|
'textSize': { stops: [[10, 0], [16, 0], [17, 14]] },
|
'textFill': '#ffffff',
|
'textDy': { stops: [[10, 0], [16, -120], [17, -140]] },
|
'textHorizontalAlignment': 'top', //left middle right
|
'textVerticalAlignment': 'middle' //top middle bottom
|
}
|
]
|
}))
|
}
|
layer.addGeometry(clMarkers);
|
}
|
} else {
|
message.warning('您当前网络不稳定,未获取到数据!')
|
}
|
})
|
} else {
|
if (layer.isEmpty()) {
|
layer.addGeometry(clMarkers);
|
} else {
|
layer.forEach(function (g) {
|
g.updateSymbol([{ 'markerFile': img_cheliang_m_url }, { 'markerFile': img_bg_s_url }]);
|
});
|
layer.show()
|
}
|
}
|
window.map.animateTo({
|
zoom: 11,
|
center: [115.980367,36.456013]
|
});
|
window.map.on('click', function (e) {
|
if (!store.state.maptool) {
|
layer.forEach(function (g) {
|
g.updateSymbol([{ 'markerFile': img_cheliang_m_url }, { 'markerFile': img_bg_s_url }]);
|
});
|
window.map.identify({
|
'coordinate': e.coordinate,
|
'layers': [layer]
|
},
|
function (geos) {
|
if (geos.length === 0) {
|
return;
|
} else {
|
store.commit("SET_SelAttr", { visa: true, type: "cheliang", id: geos[0].properties.id, value: geos[0].properties.name })
|
geos[0].updateSymbol([{ 'markerFile': img_cheliang_mm_url }, { 'markerFile': img_bg_m_url }]);
|
return;
|
}
|
}
|
);
|
} else {
|
window.map.identify({
|
'coordinate': e.coordinate,
|
'layers': [layer]
|
},
|
function (geos) {
|
if (geos.length === 0) {
|
return;
|
} else {
|
let str = store.state.selAttr.value
|
if (str != "") {
|
if (str.indexOf(geos[0].properties.id) < 0) {
|
str = str + "," + geos[0].properties.id
|
}
|
} else {
|
str = geos[0].properties.id
|
}
|
store.commit("SET_SelAttr", { visa: true, type: "cheliangcircle", value: str })
|
geos[0].updateSymbol([{ 'markerFile': img_cheliang_mm_url }, { 'markerFile': img_bg_m_url }]);
|
return;
|
}
|
}
|
);
|
}
|
})
|
}
|
}
|
|
const queryCheLiangAttrByType = (value) => {
|
let layer = window.map.getLayer("chelianglayer");
|
if (!layer.isEmpty()) {
|
layer.filter(function (marker) {
|
let attr = marker.getProperties()
|
if (value.indexOf(attr.companyName) > -1) {
|
marker.show()
|
} else {
|
marker.hide()
|
}
|
})
|
}
|
}
|
|
const loadGeometryById = (id,type) => {
|
let obj = {};
|
if (window.map && window.map.isLoaded()) {
|
if (store.state.mapMenu == "分公司") {
|
let layer = window.marsmap.getLayerById("fengongsi_layer");
|
console.log(layer)
|
} else if (store.state.mapMenu == "场站") {
|
let layer = window.map.getLayer("changzhanlayer");
|
if (!layer.isEmpty()) {
|
layer.forEach(function (g) {
|
g.updateSymbol([{ 'markerFile': img_changzhan_m_url }, { 'markerFile': img_bg_s_url }]);
|
});
|
// obj = layer.getGeometryById(id)
|
obj = layer.getGeometries(function (marker) {
|
let attr = marker.getProperties()
|
if (id == attr.id) {
|
marker.updateSymbol([{ 'markerFile': img_changzhan_mm_url }, { 'markerFile': img_bg_s_url }]);
|
window.map.animateTo({
|
zoom: 16,
|
center: marker._coordinates.add(0.000, 0.000)
|
}, {
|
duration: 500,
|
easing: 'out'
|
})
|
}
|
})
|
}
|
} else if (store.state.mapMenu == "线路") {
|
let layer = window.map.getLayer("xianlulayer");
|
layer.clear()
|
axios.get(interfaces.mapResource.getXianLuDataByLineID, {
|
params: { lineId: id,flag:type },
|
})
|
.then((res) => {
|
if (res.code === 0) {
|
initxianluLayerTrue(res.data)
|
// 查询线路上的车辆
|
loadCheLiangByLine(res.data.lineName)
|
} else {
|
message.warning('您当前网络不稳定,未获取到数据!')
|
}
|
});
|
} else if (store.state.mapMenu == "站点") {
|
let layer = window.map.getLayer("zhandianlayer");
|
if (!layer.isEmpty()) {
|
layer.forEach(function (g) {
|
g.updateSymbol([{ 'markerFile': img_zhandian_m_url }, { 'markerFile': img_bg_s_url }]);
|
});
|
obj = layer.getGeometries(function (marker) {
|
let attr = marker.getProperties()
|
if (id == attr.id) {
|
marker.updateSymbol([{ 'markerFile': img_zhandian_mm_url }, { 'markerFile': img_bg_s_url }]);
|
window.map.animateTo({
|
zoom: 17,
|
center: marker._coordinates.add(0.000, 0.000)
|
}, {
|
duration: 500,
|
easing: 'out'
|
})
|
}
|
})
|
}
|
} else if (store.state.mapMenu == "车辆") {
|
let layer = window.map.getLayer("chelianglayer");
|
if (!layer.isEmpty()) {
|
layer.forEach(function (g) {
|
g.updateSymbol([{ 'markerFile': img_cheliang_m_url }, { 'markerFile': img_bg_s_url }]);
|
});
|
obj = layer.getGeometries(function (marker) {
|
let attr = marker.getProperties()
|
if (id == attr.id) {
|
marker.updateSymbol([{ 'markerFile': img_cheliang_mm_url }, { 'markerFile': img_bg_s_url }]);
|
window.map.animateTo({
|
zoom: 17,
|
center: marker._coordinates.add(0.000, 0.000)
|
}, {
|
duration: 500,
|
easing: 'out'
|
})
|
}
|
})
|
}
|
}
|
}
|
}
|
|
const initToolLayer = () => {
|
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() }
|
if (store.state.maptool) {
|
window.drawTool = new maptalks.DrawTool({
|
mode: 'Point'
|
}).addTo(window.map).disable();
|
window.drawTool.setSymbol({
|
lineColor: "#09b1ff",
|
lineWidth: 2,
|
lineDasharray: [5, 3],
|
polygonFill: "rgb(9,177,255)",
|
polygonOpacity: 0.15,
|
})
|
window.drawTool.on('drawend', function (param) {
|
let flag = layer.addGeometry(param.geometry).onLoad();
|
if (flag) {
|
loadPointContainPolygon(param.geometry)
|
}
|
store.commit("SET_Maptool", false)
|
window.drawTool.disable();
|
});
|
window.drawTool.setMode("Ellipse").enable();
|
} else {
|
layer.clear();
|
}
|
}
|
}
|
|
const loadtempLayer = (attr) => {
|
let layer = window.map.getLayer("templayer");
|
let polygons = [];
|
if (!layer.isEmpty()) {
|
layer.clear();
|
}
|
axios.get(interfaces.mapResource.getFenGongSiExtentById, {
|
params: { companyId: attr.id },
|
})
|
.then((res) => {
|
if (res.code === 0) {
|
for (let index = 0; index < res.data.length; index++) {
|
let element = res.data[index];
|
polygons.push(new maptalks.Polygon(element, {
|
visible: true,
|
editable: true,
|
cursor: "pointer",
|
shadowBlur: 0,
|
shadowColor: "black",
|
draggable: false,
|
dragShadow: false, // display a shadow during dragging
|
drawOnAxis: null, // force dragging stick on a axis, can be: x, y
|
symbol: {
|
lineColor: "#09b1ff",
|
lineWidth: 2,
|
lineDasharray: [5, 3],
|
polygonFill: "rgb(9,177,255)",
|
polygonOpacity: 0.15,
|
},
|
}));
|
}
|
layer.addGeometry(polygons);
|
} else {
|
message.warning('您当前网络不稳定,未获取到数据!')
|
}
|
});
|
}
|
|
const loadPointContainPolygon = (geometry) => {
|
let datas = []
|
let tempPoints = ""
|
let tool = new customTool().addTo(map);
|
if (store.state.mapMenu === "站点") {
|
let points = window.map.getLayer("zhandianlayer");
|
datas = zdMarkers;
|
points.clear()
|
for (let i = 0; i < datas.length; i++) {
|
let eee = window.map.coordinateToContainerPoint(datas[i]._coordinates);
|
//g.containsPoint的参数不是coordinate(经纬度坐标),而是containerPoint (相对地图左上角的像素坐标)
|
if (geometry.containsPoint(eee)) {
|
// points.addGeometry(datas[i]);
|
tool.setMarkersLayer(datas[i])
|
tempPoints = tempPoints + "," + datas[i].properties.id
|
}
|
}
|
let pointnum = tempPoints.split(",").length - 1
|
if (pointnum > 50) {
|
message.warning('选择站点不能大于50!')
|
} else {
|
store.commit("SET_SelAttr", { visa: true, type: "zhandiancircle", value: tempPoints })
|
}
|
} else if (store.state.mapMenu === "车辆") {
|
let points = window.map.getLayer("chelianglayer");
|
datas = clMarkers;
|
points.clear()
|
for (let i = 0; i < datas.length; i++) {
|
let eee = window.map.coordinateToContainerPoint(datas[i]._coordinates);
|
//g.containsPoint的参数不是coordinate(经纬度坐标),而是containerPoint (相对地图左上角的像素坐标)
|
if (geometry.containsPoint(eee)) {
|
// points.addGeometry(datas[i]);
|
if (datas[i].options.visible) {
|
tool.setMarkersLayer(datas[i])
|
tempPoints = tempPoints + "," + datas[i].properties.id
|
}
|
}
|
}
|
let pointnum = tempPoints.split(",").length - 1
|
if (pointnum > 50) {
|
message.warning('选择车辆不能大于50!')
|
} else {
|
store.commit("SET_SelAttr", { visa: true, type: "cheliangcircle", value: tempPoints })
|
}
|
}
|
|
|
}
|
|
const loadLineNetworkByName = (id, name, flag) => {
|
let layerter = window.map.getLayer("templayer");
|
let layertemp = window.map.getLayer("zhandianlayer");
|
let layer = window.map.getLayer("xianlulayer");
|
layerter.clear()
|
layer.clear()
|
// layertemp.clear()
|
let lines = []
|
if (flag) {
|
if (!layertemp.isEmpty()) {
|
layertemp.filter(function (marker) {
|
let attr = marker.getProperties()
|
if (id == attr.id) {
|
marker.show()
|
marker.updateSymbol([{ 'markerFile': img_zhandian_mm_url }, { 'markerFile': img_bg_s_url }]);
|
} else {
|
marker.hide()
|
}
|
})
|
}
|
axios.get(interfaces.mapResource.getZhandianNetWorkById, {
|
params: { stationId: id },
|
}).then((res) => {
|
if (res.code === 0) {
|
res.data.forEach(element => {
|
lines.push(new maptalks.LineString(element.linePointList, {
|
'id': element.lineId,
|
'editable': false,
|
'properties': {
|
'name': element.lineName,
|
'routeNature': element.routeNature,
|
'routeNatureName': element.routeNatureName,
|
},
|
symbol: {
|
'lineDasharray': [0, 0],
|
'linePatternFile': img_bg_m2_url,
|
'linePatternDx': 0,
|
'lineCap': 'round',
|
'lineJoin': 'bevel',
|
'lineWidth': 5
|
}
|
}))
|
});
|
|
layer.addGeometry(lines);
|
} else {
|
message.warning('您当前网络不稳定,未获取到数据!')
|
}
|
});
|
} else {
|
if (!layertemp.isEmpty()) {
|
layertemp.filter(function (marker) {
|
let markerid = marker.getId()
|
if (id == markerid) {
|
marker.updateSymbol([{ 'markerFile': img_zhandian_m_url }, { 'markerFile': img_bg_s_url }]);
|
}
|
marker.show()
|
})
|
}
|
}
|
}
|
export default {
|
initMap,
|
hideAllLayer,
|
initfgsLayer,
|
initToolLayer,
|
initxianluLayer,
|
loadGeometryById,
|
initcheliangLayer,
|
initzhandianLayer,
|
initchangzhanLayer,
|
loadLineNetworkByName,
|
queryCheLiangAttrByType,
|
queryChangZhanAttrByType,
|
}
|
