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
Show 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 { ...@@ -108,39 +108,13 @@ export default {
QCountry: "" QCountry: ""
}, },
map: null, map: null,
pois: pois:"",
"巴塞罗那,萨拉戈萨,马德里,托莱多,里斯本,塞维利亚,塔里法,丹吉尔,舍夫沙万,拉巴特,丹吉尔,塔里法,米哈斯,格拉纳达,巴塞罗那",
citys: "", citys: "",
deviceMarkers: [], deviceMarkers: [],
countriesData: [ countries: "",
{ countriesMarkers: [],
name: "西班牙", countriesData: [],
color: "#71adeb"
},
{
name: "葡萄牙",
color: "#b7e7fe"
},
{
name: "摩洛哥",
color: "#b3fafe"
}
],
citiesData: [], 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: [], TripMapList: [],
listCity: [] listCity: []
}; };
...@@ -206,7 +180,6 @@ export default { ...@@ -206,7 +180,6 @@ export default {
preserveDrawingBuffer: true preserveDrawingBuffer: true
}); });
this.map.on("load", async () => { this.map.on("load", async () => {
console.log(this.TripMapList);
this.map.addSource("word-source", { this.map.addSource("word-source", {
type: "geojson", type: "geojson",
data: worldGeoJSON data: worldGeoJSON
...@@ -218,8 +191,16 @@ export default { ...@@ -218,8 +191,16 @@ 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.addDocumentEventListener();
},
// 绘制地图
async drawMap(){
// 显示国家 // 显示国家
this.addCountryFillRange(); this.addCountryFillRange();
// 获取坐标信息 // 获取坐标信息
await this.calcCitiesGeoInfoHandler(); await this.calcCitiesGeoInfoHandler();
// 可见范围 // 可见范围
...@@ -227,17 +208,11 @@ export default { ...@@ -227,17 +208,11 @@ 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 // 可选：在地图边界周围添加一些内边距
});
// 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();
}, },
// 导出地图片 // 导出地图片
getResultImg() { getResultImg() {
...@@ -270,7 +245,19 @@ export default { ...@@ -270,7 +245,19 @@ export default {
}, },
// 更新数据 // 更新数据
async AssemblyData() { 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 listCity = [];
let listCountries = [];
this.listCity = []; this.listCity = [];
this.countriesData = []; this.countriesData = [];
this.pois = ""; this.pois = "";
...@@ -278,9 +265,11 @@ export default { ...@@ -278,9 +265,11 @@ export default {
let obj = { let obj = {
MName: x.MName, MName: x.MName,
MId: x.MId, MId: x.MId,
ColorStr: x.ColorStr ColorStr: x.ColorStr,
nation: null
}; };
this.countriesData.push(obj); listCountries.push(x.MName)
this.countriesData.push(obj)
x.CityList.forEach(y => { x.CityList.forEach(y => {
listCity.push(y.MName); listCity.push(y.MName);
this.listCity.push({ this.listCity.push({
...@@ -295,6 +284,11 @@ export default { ...@@ -295,6 +284,11 @@ 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)
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 => { this.TripMapList.forEach(x => {
if (x.MId) { if (x.MId) {
this.SearchCity(x.MId); this.SearchCity(x.MId);
...@@ -307,21 +301,7 @@ export default { ...@@ -307,21 +301,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.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(); //标记名字
} }
}, },
// 获取国家 // 获取国家
...@@ -380,12 +360,11 @@ export default { ...@@ -380,12 +360,11 @@ export default {
} }
if(this.map&&this.map.getLayer("world-layer-" + MId)) { if(this.map&&this.map.getLayer("world-layer-" + MId)) {
this.map.removeLayer("world-layer-" + MId); this.map.removeLayer("world-layer-" + MId);
this.map.removeSource("word-source"); // this.map.removeSource("word-source");
// this.map.removePaintProperty("world-layer-" + x.MId);
// this.map.removeSource("word-source-" + x.MId);
} }
this.TripMapList.splice(index, 1); this.TripMapList.splice(index, 1);
this.dataAll.TripMapList = JSON.parse(JSON.stringify(this.TripMapList)); this.dataAll.TripMapList = JSON.parse(JSON.stringify(this.TripMapList));
} }
}, },
getColorStr(){ getColorStr(){
...@@ -462,22 +441,6 @@ export default { ...@@ -462,22 +441,6 @@ export default {
err => {} 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() { addCountryFillRange() {
this.countriesData.forEach((x, i) => { this.countriesData.forEach((x, i) => {
if (x.MName == "中国") { if (x.MName == "中国") {
...@@ -563,11 +526,11 @@ export default { ...@@ -563,11 +526,11 @@ export default {
); );
}, },
createLineHandler() { createLineHandler() {
let poilines = this.pois.split(","); // let poilines = this.pois.split(",");
this.listCity.forEach((p, i) => { 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 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( let controlPoint = this.calculateBezierControlPoint(
[x.longitude, x.latitude], [x.longitude, x.latitude],
[y.longitude, y.latitude] [y.longitude, y.latitude]
...@@ -585,10 +548,6 @@ export default { ...@@ -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, { this.map.addSource("curve-source-" + p.MId, {
type: "geojson", type: "geojson",
data: geojson data: geojson
...@@ -679,12 +638,20 @@ export default { ...@@ -679,12 +638,20 @@ export default {
} }
}); });
}, },
clearCountriesMaker(){
if(this.countriesMarkers && this.countriesMarkers.length>0){
this.countriesMarkers.forEach(x=>{
x.remove()
})
this.countriesMarkers = []
}
},
async addCountriesMaker() { async addCountriesMaker() {
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,'--------');
if (result && result.length == 2) { if (result && result.length == 2) {
x.nation = result
let el = document.createElement("div"); let el = document.createElement("div");
el.style.fontSize = "30px"; el.style.fontSize = "30px";
el.style.fontWeight = "bold"; el.style.fontWeight = "bold";
...@@ -696,10 +663,11 @@ export default { ...@@ -696,10 +663,11 @@ export default {
}) })
.setLngLat(result) .setLngLat(result)
.addTo(this.map); .addTo(this.map);
const offset = marker.getOffset(); this.countriesMarkers.push(marker);
console.log(offset, "----offset");
} }
}) })
); );
}, },
async getCountryCoordinates(countryName) { 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