Skip to content

S
SuperMan
Commit dfbacbb0 authored by youjie's avatar youjie
Browse files
Options

no message

parent 3f660a53
Hide whitespace changes
Inline Side-by-side
Showing with 233 additions and 206 deletions
src/components/newTravelmanager/TravelGroupControl/tripmap.vue
View file @ dfbacbb0
<template> <template>
<div class="tripmap-form marginT20" v-if="dataAll"> <div class="tripmap-form marginT20" v-if="dataAll">
<div class="row"> <div class="row">
<div v-for="(x, index) in TripMapList" ::key="x.Id" <div
class="row-aic" style="margin-right: 10px;"> v-for="(x, index) in TripMapList"
::key="x.Id"
class="row-aic"
style="margin-right: 10px;"
>
<el-select <el-select
class="w100" class="w100"
size="mini" size="mini"
placeholder="选择国家" placeholder="选择国家"
v-model="x.MId" v-model="x.MId"
@change="SearchCity(x.MId,x,index)" @change="SearchCity(x.MId, x, index)"
filterable filterable
> >
<el-option <el-option
...@@ -26,7 +30,7 @@ ...@@ -26,7 +30,7 @@
v-model="x.CityListIds" v-model="x.CityListIds"
multiple multiple
filterable filterable
@change="getCityListIds(x,index)" @change="getCityListIds(x, index)"
> >
<el-option <el-option
v-for="(item, i) in x.CityListAll" v-for="(item, i) in x.CityListAll"
...@@ -39,16 +43,35 @@ ...@@ -39,16 +43,35 @@
<el-color-picker <el-color-picker
style="vertical-align: middle;" style="vertical-align: middle;"
v-model="x.ColorStr" v-model="x.ColorStr"
@change="AssemblyData"
></el-color-picker> ></el-color-picker>
<div style="margin-left: 5px; font-size: 23px;cursor: pointer;"> <div style="margin-left: 5px; font-size: 23px;cursor: pointer;">
<i v-if="index==0" class="el-icon-circle-plus" style="color: #E95252;" <i
@click="alterCity(x,index,1)"></i> v-if="index == 0"
<i v-if="index!=0" class="el-icon-delete-solid" style="color: gray;" class="el-icon-circle-plus"
@click="alterCity(x,index,0)"></i> style="color: #E95252;"
@click="alterCity(x, index, 1)"
></i>
<i
v-if="index != 0"
class="el-icon-delete-solid"
style="color: gray;"
@click="alterCity(x, index, 0)"
></i>
</div> </div>
</div> </div>
<div
@click="getResultImg"
class="row-aic"
style="cursor: pointer;color: #E95252;"
>
<span>生成图片</span>
</div>
</div> </div>
<div class="relative marginT20" style="height: 500px;border: 1px solid #e6e6e6;"> <div
class="relative marginT20"
style="border: 1px solid #e6e6e6;height:500px"
>
<div id="trip_map" class="map"></div> <div id="trip_map" class="map"></div>
</div> </div>
</div> </div>
...@@ -59,10 +82,12 @@ import { Bezier } from "bezier-js"; ...@@ -59,10 +82,12 @@ import { Bezier } from "bezier-js";
import worldGeoJSON from "../../../utils/geojson.json"; import worldGeoJSON from "../../../utils/geojson.json";
mapboxgl.accessToken = mapboxgl.accessToken =
"pk.eyJ1IjoiYWxleDkwMTIiLCJhIjoiY2xtOGw4NHdkMGFndTNjcnFkeWZncGc2dyJ9.lVrAdPHE0Dg5zoWFidfj4Q"; "pk.eyJ1IjoiYWxleDkwMTIiLCJhIjoiY2xtOGw4NHdkMGFndTNjcnFkeWZncGc2dyJ9.lVrAdPHE0Dg5zoWFidfj4Q";
import html2Canvas from "html2canvas";
export default { export default {
props: ["dataAll","ConfigId"], props: ["dataAll", "ConfigId"],
data() { data() {
return { return {
imageUrl: "",
deviceMarkers: [], deviceMarkers: [],
loadingCity: false, loadingCity: false,
loading: false, loading: false,
...@@ -112,21 +137,20 @@ export default { ...@@ -112,21 +137,20 @@ export default {
{ name: "米哈斯", longitude: -4.637519, latitude: 36.595747 }, { name: "米哈斯", longitude: -4.637519, latitude: 36.595747 },
{ name: "格拉纳达", longitude: -3.599534, latitude: 37.1735 } { name: "格拉纳达", longitude: -3.599534, latitude: 37.1735 }
], ],
TripMapList: [] TripMapList: [],
listCity: []
}; };
}, },
watch: { watch: {
NationList:{ NationList: {
handler(val, oldVal) { handler(val, oldVal) {},
},
deep: true, deep: true,
immediate: false immediate: false
}, },
dataAll: { dataAll: {
handler(val, oldVal) { handler(val, oldVal) {
// console.log(val,'-------') // console.log(val,'-------')
if(this.NationList.length==0) this.getAddress(1); if (this.NationList.length == 0) this.getAddress(1);
// console.log(val.TripCountryList,'TripCountryList====',val.TripCitwlist,'----------') // console.log(val.TripCountryList,'TripCountryList====',val.TripCitwlist,'----------')
// let arrList = function(list){ // let arrList = function(list){
// list.forEach(x=>{ // list.forEach(x=>{
...@@ -135,109 +159,64 @@ export default { ...@@ -135,109 +159,64 @@ export default {
// x.CityListIds = [] // x.CityListIds = []
// }) // })
// } // }
if(val.TripMapList.length>0){ if (val.TripMapList.length == 0) this.SearchCity(2);
if (val.TripMapList.length > 0) {
this.TripMapList = JSON.parse(JSON.stringify(val.TripMapList)) this.TripMapList = JSON.parse(JSON.stringify(val.TripMapList));
// arrList(this.TripMapList) this.AssemblyData();
let listCity = []; } else {
this.countriesData = []; this.TripMapList = [];
this.pois = "";
this.TripMapList.forEach(x => {
let obj = { let obj = {
MName: x.MName,
ColorStr: x.ColorStr
};
this.countriesData.push(obj);
x.CityList.forEach(y => {
listCity.push(y.MName);
});
});
this.pois = listCity.join(",");
this.citys = [...new Set(this.pois.split(","))];
this.TripMapList.forEach((x)=>{
if(x.MId){
this.SearchCity(x.MId)
}
})
}
},
deep: true,
immediate: true
}
},
computed: {},
mounted() {
if(this.dataAll.TripMapList.length==0){
let obj = {
CityList: [], CityList: [],
CityListAll: [], CityListAll: this.CityListAll,
CityListIds: [], CityListIds: [4, 6],
NationList: this.NationList, NationList: this.NationList,
ColorStr: this.dataAll.TripColor?this.dataAll.TripColor:'#409eff', ColorStr: this.dataAll.TripColor
? this.dataAll.TripColor
: "#409eff",
ConfigId: this.ConfigId, ConfigId: this.ConfigId,
Id: 0, Id: 0,
MId: null, MId: 2,
MName: null, MName: "中国",
MType: 1, MType: 1,
MapLevel: 0, MapLevel: 0,
MapUrl:"", MapUrl: "",
ParentId: null, ParentId: 0,
PositionStr:{ PositionStr: {
Bottom: 0, Bottom: 0,
Left: 0, Left: 0,
Right: 0, Right: 0,
Top: 0, Top: 0
} }
} };
this.TripMapList.push(JSON.parse(JSON.stringify(obj)))
this.TripMapList.push(JSON.parse(JSON.stringify(obj)));
}
},
deep: true,
immediate: true
} }
this.initializeData()
}, },
methods: { computed: {},
// 更新数据 mounted() {
async AssemblyData(){ this.map = new mapboxgl.Map({
let listCity = []; container: "trip_map",
this.countriesData = []; style: "mapbox://styles/alex9012/clm92pvs1011j01qzexlh6g2b", // 'mapbox://styles/mapbox/light-v9','mapbox://styles/alex9012/clm92pvs1011j01qzexlh6g2b'
this.pois = ""; center: [2.177432, 41.382894],
this.TripMapList.forEach(x => { preserveDrawingBuffer: true
let obj = { });
MName: x.MName, this.map.on("load", async () => {
ColorStr: x.ColorStr console.log(this.TripMapList);
}; this.map.addSource("word-source", {
this.countriesData.push(obj); type: "geojson",
x.CityList.forEach(y => { data: worldGeoJSON
listCity.push(y.MName); });
});
});
this.pois = listCity.join(",");
this.citys = [...new Set(this.pois.split(","))];
this.TripMapList.forEach((x)=>{
if(x.MId){
this.SearchCity(x.MId)
}
})
this.countriesData.forEach((x, i) => {
if(this.map&&this.map.getLayer('world-layer-'+i)) {
this.map.removeLayer('world-layer-'+i)
}
})
let poilines = this.pois.split(",");
poilines.forEach((p, i) => {
if (i < poilines.length - 1) {
this.map.removeLayer('curve-layer-'+i)
this.map.removeSource('curve-source-'+i)
}
})
if (this.pois&&this.pois!=''&&this.citys&&this.citys.length>0 if (
&& this.countriesData &&this.countriesData.length > 0&&this.TripMapList.length==this.countriesData.length) { this.TripMapList &&
// this.map.addSource("word-source", { this.TripMapList.length > 0 &&
// type: "geojson", this.TripMapList[0].MName &&
// data: worldGeoJSON this.TripMapList[0].CityList.length > 0
// }); ) {
// 显示国家 // 显示国家
this.addCountryFillRange(); this.addCountryFillRange();
// 获取坐标信息 // 获取坐标信息
...@@ -247,69 +226,104 @@ export default { ...@@ -247,69 +226,104 @@ export default {
this.citiesData.forEach(city => { this.citiesData.forEach(city => {
bounds.extend([city.longitude, city.latitude]); bounds.extend([city.longitude, city.latitude]);
}); });
console.log(bounds);
this.map.fitBounds(bounds, { this.map.fitBounds(bounds, {
padding: 150 // 可选：在地图边界周围添加一些内边距 padding: 150 // 可选：在地图边界周围添加一些内边距
}); });
this.map.setCenter(bounds.getCenter()); this.map.setCenter(bounds.getCenter());
this.addMarker(); //标记 this.addMarker(); //标记
this.createLineHandler(); //连线 this.createLineHandler(); //连线
await this.addCountriesMaker(); //标记名字 await this.addCountriesMaker(); //标记名称
} }
}, });
// 渲染地图 //this.addDocumentEventListener();
initializeData(){
if (this.pois &&this.citys && // this.initializeData()
this.countriesData &&this.countriesData.length > 0) { },
this.map = new mapboxgl.Map({ methods: {
container: "trip_map", getResultImg() {
style: "mapbox://styles/alex9012/clm92pvs1011j01qzexlh6g2b", // 'mapbox://styles/mapbox/light-v9','mapbox://styles/alex9012/clm92pvs1011j01qzexlh6g2b' this.imageUrl = this.map.getCanvas().toDataURL("image/png");
center: [2.177432, 41.382894], let mapCanvas = document.querySelector(".mapboxgl-canvas");
zoom: 6 // mapCanvas.style.display = "none";
html2Canvas(document.getElementById('trip_map')).then(function(canvas) {
var image = document.createElement("a"); //image.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
image.href = canvas.toDataURL("image/png");
console.log(image.href,'=========')
image.download = "map.png";
image.click();
}); });
this.map.on("load", async () => { },
this.map.addSource("word-source", { // 更新数据
type: "geojson", async AssemblyData() {
data: worldGeoJSON let listCity = [];
this.listCity = [];
this.countriesData = [];
this.pois = "";
this.TripMapList.forEach(x => {
let obj = {
MName: x.MName,
MId: x.MId,
ColorStr: x.ColorStr
};
this.countriesData.push(obj);
x.CityList.forEach(y => {
listCity.push(y.MName);
this.listCity.push({
MName: y.MName,
MId: y.MId
});
}); });
});
this.pois = listCity.join(",");
this.citys = [...new Set(this.pois.split(","))];
this.TripMapList.forEach(x => {
if (x.MId) {
this.SearchCity(x.MId);
}
});
this.countriesData.forEach((x, i) => {
if (this.map && this.map.getLayer("world-layer-" + x.MId)) {
this.map.removeLayer("world-layer-" + x.MId);
}
});
let poilines = this.pois.split(",");
this.listCity.forEach((p, i) => {
if (this.map.getLayer("curve-layer-" + p.MId)) {
this.map.removeLayer("curve-layer-" + p.MId);
this.map.removeSource("curve-source-" + p.MId);
}
// if (i < poilines.length - 1) {
// }
});
if (
this.TripMapList &&
this.TripMapList.length > 0 &&
this.TripMapList[0].MName &&
this.TripMapList[0].CityList.length > 0
) {
// 显示国家 // 显示国家
this.addCountryFillRange(); this.addCountryFillRange();
// 获取坐标信息 // 获取坐标信息
await this.calcCitiesGeoInfoHandler(); await this.calcCitiesGeoInfoHandler();
//console.log(this.citiesData)
console.log(this.map);
// 可见范围 // 可见范围
const bounds = new mapboxgl.LngLatBounds(); const bounds = new mapboxgl.LngLatBounds();
this.citiesData.forEach(city => { this.citiesData.forEach(city => {
bounds.extend([city.longitude, city.latitude]); bounds.extend([city.longitude, city.latitude]);
}); });
this.map.fitBounds(bounds, { console.log(bounds);
padding: 150 // 可选：在地图边界周围添加一些内边距 this.map.fitBounds(bounds);
}); console.log(bounds,'========bounds')
this.map.setCenter(bounds.getCenter()); this.map.setCenter(bounds.getCenter());
this.addMarker(); //标记 this.addMarker(); //标记
this.createLineHandler(); //连线 this.createLineHandler(); //连线
await this.addCountriesMaker(); //标记名字 await this.addCountriesMaker(); //标记名字
});
//this.addDocumentEventListener();
} }
}, },
UpdateMap(){
// 显示国家
this.addCountryFillRange();
// 获取坐标信息
this.calcCitiesGeoInfoHandler();
// 可见范围
const bounds = new mapboxgl.LngLatBounds();
this.citiesData.forEach(city => {
bounds.extend([city.longitude, city.latitude]);
});
this.map.fitBounds(bounds, {
padding: 150 // 可选：在地图边界周围添加一些内边距
});
this.map.setCenter(bounds.getCenter());
this.addMarker(); //标记
this.createLineHandler(); //连线
this.addCountriesMaker(); //标记名字
},
async getAddress(Type) { async getAddress(Type) {
this.loading = true; this.loading = true;
await this.apipost( await this.apipost(
...@@ -319,19 +333,20 @@ export default { ...@@ -319,19 +333,20 @@ export default {
this.loading = false; this.loading = false;
if (Type == 1) { if (Type == 1) {
this.NationList = res.data.data; this.NationList = res.data.data;
this.NationList.forEach(x=>{ this.NationList.forEach(x => {
x.ID = Number(x.ID) x.ID = Number(x.ID);
}) });
this.TripMapList.length>0&&this.TripMapList.forEach(x=>{ this.TripMapList.length > 0 &&
x.NationList = res.data.data this.TripMapList.forEach(x => {
}) x.NationList = res.data.data;
this.$forceUpdate() });
this.$forceUpdate();
} }
}, },
err => {} err => {}
); );
}, },
alterCity(x,index,type){ alterCity(x, index, type) {
let obj = { let obj = {
CityList: [], CityList: [],
CityListAll: [], CityListAll: [],
...@@ -344,23 +359,24 @@ export default { ...@@ -344,23 +359,24 @@ export default {
MName: null, MName: null,
MType: 1, MType: 1,
MapLevel: 0, MapLevel: 0,
MapUrl:"", MapUrl: "",
ParentId: null, ParentId: null,
PositionStr:{ PositionStr: {
Bottom: 0, Bottom: 0,
Left: 0, Left: 0,
Right: 0, Right: 0,
Top: 0, Top: 0
} }
} };
if(type){ if (type) {
this.TripMapList.push(JSON.parse(JSON.stringify(obj))) this.TripMapList.push(JSON.parse(JSON.stringify(obj)));
}else{ } else {
this.TripMapList.splice(index,1) this.TripMapList.splice(index, 1);
this.AssemblyData()
} }
}, },
getCityListIds(x,index){ getCityListIds(x, index) {
x.CityList = [] x.CityList = [];
let obj = { let obj = {
CityList: [], CityList: [],
ColorStr: x.ColorStr, ColorStr: x.ColorStr,
...@@ -369,37 +385,38 @@ export default { ...@@ -369,37 +385,38 @@ export default {
MId: null, MId: null,
MName: null, MName: null,
MType: 2, MType: 2,
MapLevel:0, MapLevel: 0,
MapUrl:"", MapUrl: "",
ParentId: x.MId, ParentId: x.MId,
PositionStr:{ PositionStr: {
Bottom: 0, Bottom: 0,
Left: 0, Left: 0,
Right: 0, Right: 0,
Top: 0, Top: 0
} }
} };
x.CityListAll.forEach(item=>{ x.CityListAll.forEach(item => {
x.CityListIds.forEach(items=>{ x.CityListIds.forEach(items => {
if(item.ID==items){ if (item.ID == items) {
obj.MId = item.ID obj.MId = item.ID;
obj.MName = item.Name obj.MName = item.Name;
this.TripMapList[index].CityList.push(JSON.parse(JSON.stringify(obj))) this.TripMapList[index].CityList.push(
JSON.parse(JSON.stringify(obj))
);
} }
}) });
}) });
this.dataAll.TripMapList = JSON.parse(JSON.stringify(this.TripMapList)) this.dataAll.TripMapList = JSON.parse(JSON.stringify(this.TripMapList));
this.$forceUpdate() this.$forceUpdate();
this.AssemblyData() this.AssemblyData();
}, },
SearchCity(MId,x,index) { SearchCity(MId, x, index) {
if(x){ if (x) {
x.NationList.forEach(item=>{ x.NationList.forEach(item => {
if(item.ID==MId){ if (item.ID == MId) {
console.log(x.NationList[0],MId,'-----1111') this.TripMapList[index].MName = item.Name;
this.TripMapList[index].MName = item.Name
} }
}) });
} }
this.loadingCity = true; this.loadingCity = true;
...@@ -411,35 +428,35 @@ export default { ...@@ -411,35 +428,35 @@ export default {
res => { res => {
this.loadingCity = false; this.loadingCity = false;
this.CityList = res.data.data; this.CityList = res.data.data;
this.CityList.forEach(x=>{ this.CityList.forEach(x => {
x.ID = Number(x.ID) x.ID = Number(x.ID);
}) });
this.TripMapList.forEach(item=>{ this.TripMapList.forEach(item => {
if(item.MId==MId){ if (item.MId == MId) {
item.CityListIds = [] item.CityListIds = [];
item.CityListAll = JSON.parse(JSON.stringify(this.CityList)); item.CityListAll = JSON.parse(JSON.stringify(this.CityList));
item.CityList.map(items=>{ item.CityList.map(items => {
item.CityListIds.push(items.MId) item.CityListIds.push(items.MId);
}) });
} }
}) });
this.$forceUpdate() this.$forceUpdate();
}, },
err => {} err => {}
); );
}, },
addCountryFillRange() { addCountryFillRange() {
this.countriesData.forEach((x, i) => { this.countriesData.forEach((x, i) => {
if(x.MName=='中国'){ if (x.MName == "中国") {
x.MName = '中华人民共和国' x.MName = "中华人民共和国";
} }
this.map.addLayer({ this.map.addLayer({
id: "world-layer-" + i, id: "world-layer-" + x.MId,
type: "fill", type: "fill",
source: "word-source", source: "word-source",
filter: ["==", "NAME_ZH", x.MName] filter: ["==", "NAME_ZH", x.MName]
}); });
this.map.setPaintProperty("world-layer-" + i, "fill-color", [ this.map.setPaintProperty("world-layer-" + x.MId, "fill-color", [
"match", "match",
["get", "NAME_ZH"], ["get", "NAME_ZH"],
x.MName, x.MName,
...@@ -465,7 +482,10 @@ export default { ...@@ -465,7 +482,10 @@ export default {
// 10}'><span class='top'></span><span class='right'></span><span class='bottom'></span><span class='left'></span><div>`; // 10}'><span class='top'></span><span class='right'></span><span class='bottom'></span><span class='left'></span><div>`;
// html = `<div style='position:relative'><div>${item.name}</div>${html}</div>`; // html = `<div style='position:relative'><div>${item.name}</div>${html}</div>`;
el.innerHTML = item.name; el.innerHTML = item.name;
var marker = new mapboxgl.Marker(el, { offset: [0, -25], draggable: true }) var marker = new mapboxgl.Marker(el, {
offset: [0, -25],
draggable: true
})
.setLngLat([item.longitude, item.latitude]) .setLngLat([item.longitude, item.latitude])
.addTo(this.map); .addTo(this.map);
this.deviceMarkers.push(marker); this.deviceMarkers.push(marker);
...@@ -502,9 +522,9 @@ export default { ...@@ -502,9 +522,9 @@ export default {
}, },
createLineHandler() { createLineHandler() {
let poilines = this.pois.split(","); let poilines = this.pois.split(",");
poilines.forEach((p, i) => { this.listCity.forEach((p, i) => {
if (i < poilines.length - 1) { if (i < poilines.length - 1) {
let x = this.citiesData.find(x => x.name == p); let x = this.citiesData.find(x => x.name == p.MName);
let y = this.citiesData.find(x => x.name == poilines[i + 1]); let y = this.citiesData.find(x => x.name == poilines[i + 1]);
let controlPoint = this.calculateBezierControlPoint( let controlPoint = this.calculateBezierControlPoint(
[x.longitude, x.latitude], [x.longitude, x.latitude],
...@@ -523,14 +543,14 @@ export default { ...@@ -523,14 +543,14 @@ export default {
} }
] ]
}; };
this.map.addSource("curve-source-" + i, { this.map.addSource("curve-source-" + p.MId, {
type: "geojson", type: "geojson",
data: geojson data: geojson
}); });
this.map.addLayer({ this.map.addLayer({
id: "curve-layer-" + i, id: "curve-layer-" + p.MId,
type: "line", type: "line",
source: "curve-source-" + i, source: "curve-source-" + p.MId,
layout: { layout: {
"line-cap": "round", "line-cap": "round",
"line-join": "round" "line-join": "round"
...@@ -617,7 +637,7 @@ export default { ...@@ -617,7 +637,7 @@ export default {
await Promise.all( await Promise.all(
this.countriesData.map(async x => { this.countriesData.map(async x => {
let result = await this.getCountryCoordinates(x.MName); let result = await this.getCountryCoordinates(x.MName);
console.log(result); // console.log(result,'--------');
if (result && result.length == 2) { if (result && result.length == 2) {
let el = document.createElement("div"); let el = document.createElement("div");
el.style.fontSize = "30px"; el.style.fontSize = "30px";
...@@ -630,6 +650,8 @@ export default { ...@@ -630,6 +650,8 @@ export default {
}) })
.setLngLat(result) .setLngLat(result)
.addTo(this.map); .addTo(this.map);
const offset = marker.getOffset();
console.log(offset, "----");
} }
}) })
); );
...@@ -668,11 +690,16 @@ export default { ...@@ -668,11 +690,16 @@ export default {
padding: 20px; padding: 20px;
} }
#trip_map { #trip_map {
width: 100%;
/* height: 500px; */
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
position: fixed;
background: #FFF;
z-index: 5000;
} }
body { body {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment