Commit 5be296c4 authored by youjie's avatar youjie

no message

parent 683000f4
...@@ -67,7 +67,8 @@ ...@@ -67,7 +67,8 @@
<span class="MapImgButtom CancelMapImg" @click="Cancel">取消</span> <span class="MapImgButtom CancelMapImg" @click="Cancel">取消</span>
</div> </div>
<div style="margin-left: 20px;"> <div style="margin-left: 20px;">
<span class="MapImgButtom setMapImg" @click="setLoading=true,getResultImg">生成图片</span> <!-- setLoading=true, -->
<span class="MapImgButtom setMapImg" @click="getResultImg">生成图片</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -119,8 +120,18 @@ export default { ...@@ -119,8 +120,18 @@ export default {
}; };
}, },
watch: { watch: {
NationList: { citiesData: {
handler(val, oldVal) {}, handler(val, oldVal) {
this.TripMapList.forEach(x => {
x.CityList.forEach(y=>{
this.citiesData.forEach(z=>{
if(y.MName==z.name&&y.PositionStr.Left){
z.PositionStr = JSON.parse(JSON.stringify(y.PositionStr))
}
})
})
})
},
deep: true, deep: true,
immediate: false immediate: false
}, },
...@@ -159,6 +170,7 @@ export default { ...@@ -159,6 +170,7 @@ export default {
this.TripMapList.push(JSON.parse(JSON.stringify(obj))); this.TripMapList.push(JSON.parse(JSON.stringify(obj)));
} }
console.log(this.TripMapList,'----TripMapList')
}, },
deep: true, deep: true,
immediate: true immediate: true
...@@ -190,13 +202,13 @@ export default { ...@@ -190,13 +202,13 @@ export default {
this.TripMapList[0].MName && this.TripMapList[0].MName &&
this.TripMapList[0].CityList.length > 0 this.TripMapList[0].CityList.length > 0
) { ) {
this.drawMap() this.drawMap(1)
} }
}); });
//this.addDocumentEventListener();
}, },
// 绘制地图 // 绘制地图
async drawMap(){ async drawMap(type){
console.log(type,'1初始化---- 2数据更新')
// 显示国家 // 显示国家
this.addCountryFillRange(); this.addCountryFillRange();
...@@ -212,6 +224,21 @@ export default { ...@@ -212,6 +224,21 @@ export default {
this.addMarker(); //标记 this.addMarker(); //标记
this.createLineHandler(); //连线 this.createLineHandler(); //连线
await this.addCountriesMaker(); //标记国家 await this.addCountriesMaker(); //标记国家
//this.addDocumentEventListener();
},
// 记录PositionStr
SavePositionStr(){
this.TripMapList.forEach(x=>{
x.CityList.forEach(y=>{
this.citiesData.forEach(z=>{
if(y.MName==z.name){
y.PositionStr = JSON.parse(JSON.stringify(z.PositionStr))
}
})
})
})
this.dataAll.TripMapList = JSON.parse(JSON.stringify(this.TripMapList))
// this.$forceUpdate()
}, },
// 导出地图片 // 导出地图片
getResultImg() { getResultImg() {
...@@ -241,6 +268,19 @@ export default { ...@@ -241,6 +268,19 @@ export default {
return return
image.download = "map.png"; image.download = "map.png";
image.click(); image.click();
that.setLoading = false
that.deviceMarkers.forEach((x,index)=>{
var currentMarkerLngLat = x.getLngLat();
this.citiesData.forEach(y=>{
if(y.longitude!=currentMarkerLngLat.lng||y.latitude!=currentMarkerLngLat.lat){
y.PositionStr.Left = currentMarkerLngLat.lng
y.PositionStr.Right = currentMarkerLngLat.lat
}else{
y.PositionStr.Top = currentMarkerLngLat.lng
y.PositionStr.Bottom = currentMarkerLngLat.lat
}
})
})
}); });
}, },
Cancel(){ Cancel(){
...@@ -287,12 +327,20 @@ export default { ...@@ -287,12 +327,20 @@ export default {
this.citiesData = this.citiesData.filter(x=>this.citys.indexOf(x.name)!=-1) this.citiesData = this.citiesData.filter(x=>this.citys.indexOf(x.name)!=-1)
this.citys = this.citys.filter(x=>this.citiesData.findIndex(y=>y.name==x)==-1) this.citys = this.citys.filter(x=>this.citiesData.findIndex(y=>y.name==x)==-1)
console.log(this.citiesData,'=00000000-----')
this.countries = [...new Set(listCountries)]; this.countries = [...new Set(listCountries)];
this.clearCountriesMaker() this.clearCountriesMaker()
this.countriesData = this.countriesData.filter(x=>this.countries.indexOf(x.MName)!=-1) this.countriesData = this.countriesData.filter(x=>this.countries.indexOf(x.MName)!=-1)
this.countries = this.countries.filter(x=>this.countriesData.findIndex(y=>y.MName==x)==-1) this.countries = this.countries.filter(x=>this.countriesData.findIndex(y=>y.MName==x)==-1)
this.TripMapList.forEach(x => { this.TripMapList.forEach(x => {
x.CityList.forEach(y=>{
this.citiesData.forEach(z=>{
if(y.MName==z.name&&y.PositionStr.Left!=0){
z.PositionStr = JSON.parse(JSON.stringify(y.PositionStr))
}
})
})
if (x.MId) { if (x.MId) {
this.SearchCity(x.MId); this.SearchCity(x.MId);
} }
...@@ -304,7 +352,7 @@ export default { ...@@ -304,7 +352,7 @@ export default {
this.TripMapList[0].MName && this.TripMapList[0].MName &&
this.TripMapList[0].CityList.length > 0 this.TripMapList[0].CityList.length > 0
) { ) {
this.drawMap() this.drawMap(2)
} }
}, },
// 获取国家 // 获取国家
...@@ -474,28 +522,51 @@ export default { ...@@ -474,28 +522,51 @@ export default {
}, },
addMarker() { addMarker() {
// let markerColor = calculateComplementaryColor("#71adeb"); // let markerColor = calculateComplementaryColor("#71adeb");
// console.log(this.citiesData,'----00')
this.citiesData.forEach((item, i) => { this.citiesData.forEach((item, i) => {
var marker = new mapboxgl.Marker({ color: "#d73b33", scale: 0.5 }) var marker = new mapboxgl.Marker({ color: "#d73b33", scale: 0.5 })
.setLngLat([item.longitude, item.latitude]) .setLngLat([item.longitude, item.latitude])
.addTo(this.map); .addTo(this.map);
this.addLabel(item, i); if(item.PositionStr.Left&&item.PositionStr.Right){
this.addLabel(item, i, item.PositionStr);
}else{
this.addLabel(item, i);
}
this.deviceMarkers.push(marker); this.deviceMarkers.push(marker);
}); });
}, },
addLabel(item, i) { addLabel(item, i, PositionStr) {
let that = this
let el = document.createElement("div"); let el = document.createElement("div");
el.style.cursor = "pointer"; el.style.cursor = "pointer";
// let html = `<div class='arror-box-map hide' id='marker_${i}' data-x-drift='${item // let html = `<div class='arror-box-map hide' id='marker_${i}' data-x-drift='${item
// .name.length * // .name.length *
// 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>`;
// .setLngLat([item.PositionStr.Left?item.PositionStr.Left:item.longitude, item.PositionStr.Right?item.PositionStr.Right:item.latitude])
el.innerHTML = item.name; el.innerHTML = item.name;
var marker = new mapboxgl.Marker(el, { var marker = new mapboxgl.Marker(el, {
offset: [0, -25], offset: [0, -25],
draggable: true draggable: true
}) })
.setLngLat([item.longitude, item.latitude]) if(PositionStr){
.addTo(this.map); marker.setLngLat([PositionStr.Left, PositionStr.Right])
}else{
marker.setLngLat([item.longitude, item.latitude])
}
// marker.setLngLat([item.PositionStr.Left?item.PositionStr.Left:item.longitude, item.PositionStr.Right?item.PositionStr.Right:item.latitude])
marker.addTo(this.map);
let currentMarkerLngLat = marker.getLngLat();
// that.citiesData[i].PositionStr.Left = currentMarkerLngLat.lng
// that.citiesData[i].PositionStr.Right = currentMarkerLngLat.lat
marker.on('dragend', function() {
currentMarkerLngLat = marker.getLngLat();
that.citiesData[i].PositionStr.Left = currentMarkerLngLat.lng
that.citiesData[i].PositionStr.Right = currentMarkerLngLat.lat
that.SavePositionStr()
});
this.deviceMarkers.push(marker); this.deviceMarkers.push(marker);
}, },
async getCoordinates(cityName) { async getCoordinates(cityName) {
...@@ -511,7 +582,14 @@ export default { ...@@ -511,7 +582,14 @@ export default {
const data = await response.json(); const data = await response.json();
if (data.features.length > 0) { if (data.features.length > 0) {
const [longitude, latitude] = data.features[0].center; const [longitude, latitude] = data.features[0].center;
this.citiesData.push({ name: cityName, longitude, latitude }); this.citiesData.push({ name: cityName, longitude, latitude,
PositionStr:{
Left: 0,
Top: 0,
Right: 0,
Bottom: 0,
}
});
} else { } else {
this.coordinates = null; this.coordinates = null;
this.error = true; this.error = true;
......
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