Skip to content

S
SuperMan
Commit de909c1b authored by 黄奎's avatar 黄奎
Browse files
Options

Merge branch 'master' of http://gitlab.oytour.com/luochao/superman

parents af45b00a b5783a9f
Hide whitespace changes
Inline Side-by-side
Showing with 83 additions and 115 deletions
src/components/newTravelmanager/TravelGroupControl/tripmap.vue
View file @ de909c1b
......@@ -108,39 +108,13 @@ export default {
QCountry: ""
},
map: null,
pois:
"巴塞罗那,萨拉戈萨,马德里,托莱多,里斯本,塞维利亚,塔里法,丹吉尔,舍夫沙万,拉巴特,丹吉尔,塔里法,米哈斯,格拉纳达,巴塞罗那",
pois:"",
citys: "",
deviceMarkers: [],
countriesData: [
{
name: "西班牙",
color: "#71adeb"
},
{
name: "葡萄牙",
color: "#b7e7fe"
},
{
name: "摩洛哥",
color: "#b3fafe"
}
],
countries: "",
countriesMarkers: [],
countriesData: [],
citiesData: [],
citiesData2: [
{ name: "巴塞罗那", longitude: 2.177432, latitude: 41.382894 },
{ name: "萨拉戈萨", longitude: -0.880943, latitude: 41.652134 },
{ name: "马德里", longitude: -3.5694285, latitude: 40.476938000000004 },
{ name: "托莱多", longitude: -4.0238265, latitude: 39.8570725 },
{ name: "里斯本", longitude: -9.136592, latitude: 38.707751 },
{ name: "塞维利亚", longitude: -5.99534, latitude: 37.38863 },
{ name: "塔里法", longitude: -5.604887, latitude: 36.012775 },
{ name: "丹吉尔", longitude: -5.803792, latitude: 35.777103 },
{ name: "舍夫沙万", longitude: -5.268345, latitude: 35.168775 },
{ name: "拉巴特", longitude: -6.818851, latitude: 33.986906 },
{ name: "米哈斯", longitude: -4.637519, latitude: 36.595747 },
{ name: "格拉纳达", longitude: -3.599534, latitude: 37.1735 }
],
TripMapList: [],
listCity: []
};
......@@ -206,7 +180,6 @@ export default {
preserveDrawingBuffer: true
});
this.map.on("load", async () => {
console.log(this.TripMapList);
this.map.addSource("word-source", {
type: "geojson",
data: worldGeoJSON
......@@ -218,27 +191,29 @@ export default {
this.TripMapList[0].MName &&
this.TripMapList[0].CityList.length > 0
) {
// 显示国家
this.addCountryFillRange();
// 获取坐标信息
await this.calcCitiesGeoInfoHandler();
// 可见范围
const bounds = new mapboxgl.LngLatBounds();
this.citiesData.forEach(city => {
bounds.extend([city.longitude, city.latitude]);
});
console.log(bounds);
this.map.fitBounds(bounds, {
padding: 150 // 可选：在地图边界周围添加一些内边距
});
// this.map.setCenter(bounds.getCenter());
this.addMarker(); //标记
this.createLineHandler(); //连线
await this.addCountriesMaker(); //标记名称
this.drawMap()
}
});
//this.addDocumentEventListener();
},
// 绘制地图
async drawMap(){
// 显示国家
this.addCountryFillRange();
// 获取坐标信息
await this.calcCitiesGeoInfoHandler();
// 可见范围
const bounds = new mapboxgl.LngLatBounds();
this.citiesData.forEach(city => {
bounds.extend([city.longitude, city.latitude]);
});
this.map.fitBounds(bounds);
// this.map.setCenter(bounds.getCenter());
this.addMarker(); //标记
this.createLineHandler(); //连线
await this.addCountriesMaker(); //标记国家
},
// 导出地图片
getResultImg() {
this.setLoading = true
......@@ -270,7 +245,19 @@ export default {
},
// 更新数据
async AssemblyData() {
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);
}
})
this.countriesData.forEach((x, i) => {
if(this.map&&this.map.getLayer("world-layer-" + x.MId)) {
this.map.removeLayer("world-layer-" + x.MId);
}
})
let listCity = [];
let listCountries = [];
this.listCity = [];
this.countriesData = [];
this.pois = "";
......@@ -278,23 +265,30 @@ export default {
let obj = {
MName: x.MName,
MId: x.MId,
ColorStr: x.ColorStr
ColorStr: x.ColorStr,
nation: null
};
this.countriesData.push(obj);
x.CityList.forEach(y => {
listCity.push(y.MName);
this.listCity.push({
MName: y.MName,
MId: y.MId
listCountries.push(x.MName)
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.clearCitiesMarkersHandler()
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.countries = [...new Set(listCountries)];
this.clearCountriesMaker()
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.TripMapList.forEach(x => {
if (x.MId) {
this.SearchCity(x.MId);
......@@ -307,21 +301,7 @@ export default {
this.TripMapList[0].MName &&
this.TripMapList[0].CityList.length > 0
) {
// 显示国家
this.addCountryFillRange();
// 获取坐标信息
await this.calcCitiesGeoInfoHandler();
// 可见范围
const bounds = new mapboxgl.LngLatBounds();
this.citiesData.forEach(city => {
bounds.extend([city.longitude, city.latitude]);
});
this.map.fitBounds(bounds);
// this.map.setCenter(bounds.getCenter());
this.addMarker(); //标记
this.createLineHandler(); //连线
await this.addCountriesMaker(); //标记名字
this.drawMap()
}
},
// 获取国家
......@@ -379,13 +359,12 @@ export default {
this.map.removeSource("curve-source-" + MId);
}
if(this.map&&this.map.getLayer("world-layer-" + MId)) {
this.map.removeLayer("world-layer-" + MId);
this.map.removeSource("word-source");
// this.map.removePaintProperty("world-layer-" + x.MId);
// this.map.removeSource("word-source-" + x.MId);
this.map.removeLayer("world-layer-" + MId);
// this.map.removeSource("word-source");
}
this.TripMapList.splice(index, 1);
this.dataAll.TripMapList = JSON.parse(JSON.stringify(this.TripMapList));
}
},
getColorStr(){
......@@ -462,22 +441,6 @@ export default {
err => {}
);
},
clearCountryFillRange(){
//删除图层
// if (this.layerIds.length) {
// this.layerIds.forEach(id => {
// this.map.removeLayer(id)
// })
// this.layerIds = [];
// }
//删除数据源
// if (this.sourceIds.length) {
// this.sourceIds.forEach(id =>{
// this.map.removeSource(id)
// })
// this.sourceIds = [];
// }
},
addCountryFillRange() {
this.countriesData.forEach((x, i) => {
if (x.MName == "中国") {
......@@ -563,11 +526,11 @@ export default {
);
},
createLineHandler() {
let poilines = this.pois.split(",");
// let poilines = this.pois.split(",");
this.listCity.forEach((p, i) => {
if (i < poilines.length - 1) {
if (i < this.listCity.length - 1) {
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 == this.listCity[i + 1].MName);
let controlPoint = this.calculateBezierControlPoint(
[x.longitude, x.latitude],
[y.longitude, y.latitude]
......@@ -585,10 +548,6 @@ export default {
}
]
};
if(this.map.getLayer("curve-layer-" + p.MId)) {
this.map.removeLayer("curve-layer-" + p.MId);
this.map.removeSource("curve-source-" + p.MId);
}
this.map.addSource("curve-source-" + p.MId, {
type: "geojson",
data: geojson
......@@ -679,27 +638,36 @@ export default {
}
});
},
clearCountriesMaker(){
if(this.countriesMarkers && this.countriesMarkers.length>0){
this.countriesMarkers.forEach(x=>{
x.remove()
})
this.countriesMarkers = []
}
},
async addCountriesMaker() {
await Promise.all(
this.countriesData.map(async x => {
let result = await this.getCountryCoordinates(x.MName);
// console.log(result,'--------');
if (result && result.length == 2) {
let el = document.createElement("div");
el.style.fontSize = "30px";
el.style.fontWeight = "bold";
el.style.color = "rgba(0,0,0,0.4)";
el.innerHTML = x.MName;
var marker = new mapboxgl.Marker(el, {
offset: [0, 0],
draggable: true
})
.setLngLat(result)
.addTo(this.map);
const offset = marker.getOffset();
console.log(offset, "----offset");
}
let result = await this.getCountryCoordinates(x.MName);
if (result && result.length == 2) {
x.nation = result
let el = document.createElement("div");
el.style.fontSize = "30px";
el.style.fontWeight = "bold";
el.style.color = "rgba(0,0,0,0.4)";
el.innerHTML = x.MName;
var marker = new mapboxgl.Marker(el, {
offset: [0, 0],
draggable: true
})
.setLngLat(result)
.addTo(this.map);
this.countriesMarkers.push(marker);
}
})
);
},
async getCountryCoordinates(countryName) {
......
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