Skip to content

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

页面修改

parent d7dfa6c2
Show whitespace changes
Inline Side-by-side
Showing with 524 additions and 654 deletions
src/components/newTravelmanager/TravelGroupControl/TravelManagerThree.vue
View file @ 169b3c45
...@@ -882,9 +882,9 @@ ...@@ -882,9 +882,9 @@
this.PostConfig.MapUrl = tempData.MapUrl; this.PostConfig.MapUrl = tempData.MapUrl;
let arrList = function (list) { let arrList = function (list) {
list.forEach(x => { list.forEach(x => {
x.NationList = [] x.CountrySelectList = []; //国家下拉列表
x.CityListAll = [] x.CitySelectList = []; //城市下拉列表
x.CityListIds = [] x.CityChooseList = []; //选中的城市Id
}) })
} }
arrList(this.PostConfig.TripMapList) arrList(this.PostConfig.TripMapList)
......
src/components/newTravelmanager/TravelGroupControl/tripmap.vue
View file @ 169b3c45
...@@ -6,15 +6,16 @@ ...@@ -6,15 +6,16 @@
<div v-for="(x, index) in TripMapList" :key="index" class="row-aic"> <div v-for="(x, index) in TripMapList" :key="index" class="row-aic">
<el-select class="w100" size="mini" placeholder="选择国家" v-model="x.MId" @change="SearchCity(x.MId, x, index)" <el-select class="w100" size="mini" placeholder="选择国家" v-model="x.MId" @change="SearchCity(x.MId, x, index)"
filterable> filterable>
<el-option v-for="(item, i) in x.NationList" :label="item.Name" :value="item.ID" :key="i"></el-option> <el-option v-for="(item, i) in x.CountrySelectList" :label="item.Name" :value="item.ID" :key="i">
</el-option>
</el-select> </el-select>
<el-select style="min-width: 300px;max-width: 600px;margin-left: 5px;margin-right: 5px;" size="mini" <el-select style="min-width: 300px;max-width: 600px;margin-left: 5px;margin-right: 5px;" size="mini"
placeholder="选择城市" v-model="x.CityListIds" multiple filterable @change="changeCityListIds(x, index)"> placeholder="选择城市" v-model="x.CityChooseList" multiple filterable @change="changeCityListIds(x, index)">
<el-option v-for="(item, i) in x.CityListAll" :label="item.Name" :value="item.ID" :key="i"> <el-option v-for="(item, i) in x.CitySelectList" :label="item.Name" :value="item.ID" :key="i">
</el-option> </el-option>
</el-select> </el-select>
<el-color-picker v-if="x.MId!=651&&x.MId!=891" style="vertical-align: middle;" v-model="x.ColorStr" <el-color-picker v-if="x.MId!=651&&x.MId!=891" style="vertical-align: middle;" v-model="x.ColorStr">
@change="getColorStr"></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="TripMapList.length - 1 == index" class="el-icon-circle-plus" style="color: #E95252;" <i v-if="TripMapList.length - 1 == index" class="el-icon-circle-plus" style="color: #E95252;"
@click="operateCountry(x, index, 1)"></i> @click="operateCountry(x, index, 1)"></i>
...@@ -24,7 +25,7 @@ ...@@ -24,7 +25,7 @@
</div> </div>
</div> </div>
<div class="row-aic" style="flex-shrink: 0;"> <div class="row-aic" style="flex-shrink: 0;">
<el-button type="danger" key="BtnClose" @click="Cancel">关闭</el-button> <el-button type="danger" key="BtnClose" @click="CloseMapBox">关闭</el-button>
<el-button type="primary" key="BtnCreateImg" :disabled="setLoading" @click="getResultImg()">{{btnStr}} <el-button type="primary" key="BtnCreateImg" :disabled="setLoading" @click="getResultImg()">{{btnStr}}
</el-button> </el-button>
</div> </div>
...@@ -45,32 +46,15 @@ ...@@ -45,32 +46,15 @@
"pk.eyJ1IjoiYWxleDkwMTIiLCJhIjoiY2xtOGw4NHdkMGFndTNjcnFkeWZncGc2dyJ9.lVrAdPHE0Dg5zoWFidfj4Q"; "pk.eyJ1IjoiYWxleDkwMTIiLCJhIjoiY2xtOGw4NHdkMGFndTNjcnFkeWZncGc2dyJ9.lVrAdPHE0Dg5zoWFidfj4Q";
import html2Canvas from "html2canvas"; import html2Canvas from "html2canvas";
export default { export default {
props: ["PostConfig", "ConfigId"], props: ["PostConfig"],
data() { data() {
return { return {
setLoading: false, setLoading: false,
pageLoading: false, pageLoading: false,
TripColor: "", SourceCountryList: [], //所有国家列表
NationList: [], SourceCityList: [], //国家下面的城市列表
searchNation: { map: null, //地图对象
CodeLevel: "1", TripMapList: [], //地图数据
Name: "",
ID: ""
},
CityList: [],
searchCity: {
QCountry: ""
},
map: null,
pois: "",
listCity: [],
citys: "",
deviceMarkers: [],
citiesData: [],
countries: "",
countriesMarkers: [],
countriesData: [],
TripMapList: [],
paintRbBgObj: { paintRbBgObj: {
//设置属性 //设置属性
"fill-color": { "fill-color": {
...@@ -112,91 +96,30 @@ ...@@ -112,91 +96,30 @@
"fill-outline-color": "#4f4f4f", "fill-outline-color": "#4f4f4f",
"fill-opacity": 0.5 "fill-opacity": 0.5
}, },
paintRbBgList: [], paintRbBgList: [], //日本随机颜色
paintHgBgList: [], paintHgBgList: [], //韩国随机颜色
btnStr: '生成图片' countriesData: [], //国家地图数据
citiesData: [], //城市地图数据
btnStr: '生成图片',
deviceMarkers: [], //城市Markers
allMapCityList: [], //地图显示所有城市
countriesMarkers: [], //国家的Markers
}; };
}, },
watch: { watch: {
citiesData: {
handler(val, oldVal) {
this.TripMapList.length > 0 &&
this.TripMapList.forEach(x => {
x.CityList.forEach(y => {
this.citiesData.forEach(z => {
if (y.MName == z.name) {
if (y.Lat && y.Lng) {
z.Lng = y.Lng;
z.Lat = y.Lat;
} else {
//使用系统中的经纬度
var tempCity = x.CityListAll.find((cItem) => {
return cItem.ID === y.MId;
})
if (tempCity && tempCity.Lng && tempCity.Lat) {
z.Lng = tempCity.Lng;
z.Lat = tempCity.Lat;
z.latitude = Number(tempCity.Lat);
z.longitude = Number(tempCity.Lng);
}
}
y.Lat = z.Lat;
y.Lng = z.Lng;
}
});
});
});
},
deep: true,
immediate: false
},
countriesData: {
handler(val, oldVal) {
this.TripMapList.length > 0 &&
this.TripMapList.forEach(x => {
this.countriesData.forEach(y => {
if (x.MName == y.name && x.Lng) {
y.Lng = x.Lng;
y.Lat = x.Lat;
}
});
});
},
deep: true,
immediate: false
},
PostConfig: { PostConfig: {
handler(val, oldVal) { handler(val, oldVal) {
if (this.NationList.length == 0) this.getAddress(1);
if (val.TripMapList.length == 0) this.SearchCity(2);
if (val.TripMapList.length > 0) { if (val.TripMapList.length > 0) {
this.TripMapList = JSON.parse(JSON.stringify(val.TripMapList)); this.TripMapList = JSON.parse(JSON.stringify(val.TripMapList));
this.AssemblyData(); this.getMapData();
} else { } else {
this.TripMapList = []; this.TripMapList = [];
let obj = { let obj = this.getDataObj();
CityList: [], obj.CitySelectList = [];
CityListAll: this.CityListAll, obj.CityChooseList = [4, 6];
CityListIds: [4, 6], obj.CountrySelectList = [];
NationList: this.NationList, obj.MId = 2;
ColorStr: this.PostConfig.TripColor ? this.PostConfig.TripColor : "#409eff", obj.MName = "中国";
ConfigId: this.ConfigId,
Id: 0,
MId: 2,
MName: "中国",
MType: 1,
MapLevel: 0,
MapUrl: "",
ParentId: 0,
Lng: "",
Lat: "",
PositionStr: {
Bottom: 0,
Left: 0,
Right: 0,
Top: 0
}
};
this.TripMapList.push(JSON.parse(JSON.stringify(obj))); this.TripMapList.push(JSON.parse(JSON.stringify(obj)));
} }
}, },
...@@ -205,15 +128,14 @@ ...@@ -205,15 +128,14 @@
} }
}, },
created() { created() {
},
mounted() {
// 日本随机背景色 // 日本随机背景色
this.setPaintRbBgList() this.setPaintRbBgList()
this.initMap() },
mounted() {
this.initMap();
}, },
methods: { methods: {
// 初始化地图 //初始化地图
initMap() { initMap() {
this.map = new mapboxgl.Map({ this.map = new mapboxgl.Map({
container: "trip_map", container: "trip_map",
...@@ -235,36 +157,117 @@ ...@@ -235,36 +157,117 @@
type: "geojson", type: "geojson",
data: worldGeoJSONKorea, data: worldGeoJSONKorea,
}); });
if ( this.getMapData();
this.TripMapList && });
this.TripMapList.length > 0 && },
this.TripMapList[0].MName && //获取地图数据
this.TripMapList[0].CityList.length > 0 async getMapData() {
) { this.countriesData = [];
this.drawMap(1); this.citiesData = [];
} this.ClearSource();
}); this.allMapCityList = [];
}, this.TripMapList.forEach(countryItem => {
// 更新数据 //加载国家下拉列表
async AssemblyData() { if (!(countryItem.CountrySelectList) || (countryItem.CountrySelectList && countryItem.CountrySelectList
this.ClearSource() //清除源 .length <= 0)) {
this.UpdateDatas() //组装数据 this.getCountryList();
if ( }
this.TripMapList && //加载城市下拉列表
this.TripMapList.length > 0 && if (countryItem.MId && (!(countryItem.CitySelectList) || (countryItem.CitySelectList && countryItem
this.TripMapList[0].MName && .CitySelectList.length <=
this.TripMapList[0].CityList.length > 0 0))) {
) { this.SearchCity(countryItem.MId);
this.drawMap(2); }
} })
}, this.TripMapList.forEach(countryItem => {
// 绘制地图 let countryObj = {
async drawMap(type) { Id: countryItem.Id,
console.log(type, "1初始化---- 2数据更新"); MName: countryItem.MName,
// 显示国家 name: countryItem.MName,
MId: countryItem.MId,
ColorStr: countryItem.ColorStr,
Lng: countryItem.Lng,
Lat: countryItem.Lat,
CitySelectList: countryItem.CitySelectList
};
//判断是否存在国家
let tempCountryIndex = this.countriesData.findIndex(y => y.MName == countryItem.MName)
if (tempCountryIndex == -1) {
//添加国家
this.countriesData.push(countryObj);
};
//添加城市
countryItem.CityList.forEach(cityItem => {
var cityObj = {
Id: cityItem.Id,
MName: cityItem.MName,
name: cityItem.MName,
MId: cityItem.MId,
PMName: countryItem.MName,
ColorStr: cityItem.ColorStr,
Lng: cityItem.Lng,
Lat: cityItem.Lat,
CitySelectList: countryItem.CitySelectList,
longitude: cityItem.Lng,
latitude: cityItem.Lat,
ParentId: countryItem.MId
}
if (cityObj.Id > 0 && cityItem.Lng && cityItem.Lat) {
cityObj.Lng = Number(cityItem.Lng);
cityObj.Lat = Number(cityItem.Lat);
cityObj.latitude = Number(cityItem.Lat);
cityObj.longitude = Number(cityItem.Lng);
} else {
//使用系统中的经纬度
var tempCity = countryItem.CitySelectList.find((cItem) => {
return cItem.ID === cityObj.MId;
});
if (tempCity && tempCity.Lng && tempCity.Lat) {
cityObj.Lng = Number(tempCity.Lng);
cityObj.Lat = Number(tempCity.Lat);
cityObj.latitude = Number(tempCity.Lat);
cityObj.longitude = Number(tempCity.Lng);
}
}
//判断城市是否存在
let tempCityIndex = this.citiesData.findIndex(y => y.MName == cityItem.MName)
if (tempCityIndex == -1) {
this.citiesData.push(cityObj); //添加城市
};
});
});
//填充国家颜色
this.addCountryFillRange(); this.addCountryFillRange();
// 获取坐标信息 // 获取城市坐标信息
await this.calcCitiesGeoInfoHandler(); await this.calcCitiesGeoInfoHandler();
this.clearCitiesMarkersHandler()
this.clearCountriesMaker();
//遍历有经纬度的城市
var tempData = [];
var that = this;
this.citiesData.forEach(cItem => {
if (cItem.longitude && cItem.latitude) {
tempData.push(cItem);
this.allMapCityList.push({
PMName: cItem.MName,
MName: cItem.MName,
MId: cItem.MId
});
that.TripMapList.forEach(countryItem => {
if (countryItem.CityList && countryItem.CityList.length > 0) {
countryItem.CityList.forEach(subItem => {
if (subItem.MId == cItem.MId) {
subItem.Lat = cItem.latitude;
subItem.Lng = cItem.longitude;
}
})
}
});
}
})
this.citiesData = tempData;
console.log("citiesData_2", this.citiesData);
// 可见范围 // 可见范围
const bounds = new mapboxgl.LngLatBounds(); const bounds = new mapboxgl.LngLatBounds();
this.citiesData.forEach(city => { this.citiesData.forEach(city => {
...@@ -276,106 +279,145 @@ ...@@ -276,106 +279,145 @@
if (this.countriesData && this.countriesData.length > 0 && this.countriesData.length == 1) { if (this.countriesData && this.countriesData.length > 0 && this.countriesData.length == 1) {
this.map.setCenter(bounds.getCenter()); this.map.setCenter(bounds.getCenter());
} }
// 更新数据时再标记
if (type == 2) {
this.addMarker(); //标记 this.addMarker(); //标记
this.createLineHandler(); //连线 this.createLineHandler();
await this.addCountriesMaker(); //标记国家 await this.addCountriesMaker(); //标记国家
}
}, },
//组装数据 addMarker() {
UpdateDatas() { this.citiesData.forEach((item, i) => {
let listCity = []; var marker = new mapboxgl.Marker({
let listCountries = []; color: "#d73b33",
this.listCity = []; scale: 0.5
this.pois = "";
this.TripMapList.forEach(x => {
let obj = {
MName: x.MName,
name: x.MName,
MId: x.MId,
ColorStr: x.ColorStr,
Lng: x.Lng,
Lat: x.Lat,
CityListAll: x.CityListAll
};
listCountries.push(x.MName);
let tempI = this.countriesData.findIndex(y => y.MName == x.MName)
if (tempI == -1) this.countriesData.push(obj);
x.CityList.forEach(y => {
listCity.push(y.MName);
this.listCity.push({
PMName: x.MName,
MName: y.MName,
MId: y.MId
});
});
});
this.pois = listCity.join(",");
this.citys = [...new Set(this.listCity)];
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.MName) == -1
);
this.countries = [...new Set(listCountries)];
this.clearCountriesMaker();
this.countriesData = this.countriesData.filter(
x => this.countries.indexOf(x.MName) != -1
);
this.TripMapList.forEach(x => {
x.CityList.forEach(y => {
this.citiesData.forEach(z => {
if (y.MName == z.name) {
if (y.Lat && y.Lng) {
z.Lng = y.Lng;
z.Lat = y.Lat;
} else {
//使用系统中的经纬度
var tempCity = x.CityListAll.find((cItem) => {
return cItem.ID === y.MId;
}) })
if (tempCity && tempCity.Lng && tempCity.Lat) { .setLngLat([item.longitude, item.latitude])
z.Lng = tempCity.Lng; .addTo(this.map);
z.Lat = tempCity.Lat; if (item.Lng && item.Lat) {
z.latitude = Number(tempCity.Lat); this.addLabel(item, i, item);
z.longitude = Number(tempCity.Lng); } else {
this.addLabel(item, i);
} }
this.deviceMarkers.push(marker);
});
},
addLabel(item, i, PositionStr) {
let that = this;
let el = document.createElement("div");
el.style.cursor = "pointer";
el.innerHTML = item.name;
var marker = new mapboxgl.Marker(el, {
offset: [0, -25],
draggable: true
});
if (PositionStr) {
marker.setLngLat([PositionStr.Lng, PositionStr.Lat]);
} else {
marker.setLngLat([item.longitude, item.latitude]);
} }
y.Lat = z.Lat; marker.addTo(this.map);
y.Lng = z.Lng; marker.on("dragend", function () {
let currentMarkerLngLat = marker.getLngLat();
that.citiesData[i].Lng = currentMarkerLngLat.lng;
that.citiesData[i].Lat = currentMarkerLngLat.lat;
that.setCitiesPosition()
});
this.deviceMarkers.push(marker);
},
//连线
createLineHandler() {
let that = this
this.allMapCityList.forEach((p, i) => {
if (i < this.allMapCityList.length - 1) {
let x = this.citiesData.find(x => x.name == p.MName);
let y = this.citiesData.find(
x => x.name == this.allMapCityList[i + 1].MName
);
let controlPoint = this.calculateBezierControlPoint(
[x.longitude, x.latitude],
[y.longitude, y.latitude]
);
const geojson = {
type: "FeatureCollection",
features: [{
type: "Feature",
geometry: {
type: "LineString",
properties: {},
coordinates: controlPoint
} }
}]
};
setTimeout(() => {
if (geojson && that.map && !that.map.getLayer("curve-layer-" + p.MId)) {
that.map && that.map.addSource("curve-source-" + p.MId, {
type: "geojson",
data: geojson
}); });
that.map && that.map.addLayer({
id: "curve-layer-" + p.MId,
type: "line",
source: "curve-source-" + p.MId,
layout: {
"line-cap": "round",
"line-join": "round"
},
paint: {
"line-color": ["rgba", 0, 0, 0, 0.3],
"line-width": 1.5
}
}); });
this.countriesData.forEach(y => {
if (x.MName == y.MName) {
y.Lng = x.Lng
y.Lat = x.Lat
y.CityListAll = x.CityListAll
} }
}) }, 1000)
if (x.MId) {
this.SearchCity(x.MId);
} }
}); });
}, },
calculateBezierControlPoint(start, end) {
const controlPoint1 = [
start[0] > end[0] ? start[0] - 0.1 : start[0] + 0.1,
start[1] > end[1] ? end[1] + 0.1 : end[1] - 0.1
];
const controlPoint2 = [
start[0] > end[0] ? end[0] - 0.1 : end[0] + 0.1,
start[1] > end[1] ? end[1] + 0.1 : end[1] - 0.1
];
const bezier = new Bezier(
start[0],
start[1],
controlPoint1[0],
controlPoint1[1],
controlPoint2[0],
controlPoint2[1],
end[0],
end[1]
);
const numberOfPoints = 100;
const bezierCoordinates = [];
for (let i = 0; i <= numberOfPoints; i++) {
const t = i / numberOfPoints;
const point = bezier.get(t);
bezierCoordinates.push([point.x, point.y]);
}
return bezierCoordinates;
},
// 清除已有源 // 清除已有源
ClearSource(Id, type) { ClearSource(Id, type) {
if (type) { if (type) {
if (this.map && this.map.getLayer(Id)) { if (this.map && this.map.getLayer(Id)) {
this.map.removeLayer(Id); this.map.removeLayer(Id);
if (type == 2) this.map.removeSource(Id); if (type == 2) {
this.map.removeSource(Id);
}
} }
} else { } else {
this.listCity.forEach((p, i) => { if (this.allMapCityList && this.allMapCityList.length > 0) {
this.allMapCityList.forEach((p) => {
if (this.map.getLayer("curve-layer-" + p.MId)) { if (this.map.getLayer("curve-layer-" + p.MId)) {
this.map.removeLayer("curve-layer-" + p.MId); this.map.removeLayer("curve-layer-" + p.MId);
this.map.removeSource("curve-source-" + p.MId); this.map.removeSource("curve-source-" + p.MId);
} }
}); });
this.countriesData.forEach((x, i) => { }
this.countriesData.forEach((x) => {
if (this.map && this.map.getLayer("world-layer-" + x.MId)) { if (this.map && this.map.getLayer("world-layer-" + x.MId)) {
this.map.removeLayer("world-layer-" + x.MId); this.map.removeLayer("world-layer-" + x.MId);
} }
...@@ -388,92 +430,201 @@ ...@@ -388,92 +430,201 @@
}); });
} }
}, },
// 更新城市标记坐标 //填充国家
setCitiesPosition() { addCountryFillRange() {
this.TripMapList.forEach(x => { let that = this
x.CityList.forEach(y => { this.countriesData.forEach((x, i) => {
this.citiesData.forEach(z => { if (x.MName == "中国") x.name = "中华人民共和国";
if (y.MName == z.name) { if (x.MName == "韩国") x.name = "大韩民国";
y.Lng = z.Lng; let source;
y.Lat = z.Lat; var paintBgObj;
if (x.MId != 651 && x.MId != 891) {
source = "word-source"
} else {
if (x.MId == 651) {
source = "word-source-japan";
paintBgObj = {
"fill-color": {
'property': 'cartodb_id',
stops: that.paintRbBgList
},
"fill-outline-color": "#4f4f4f",
"fill-opacity": 0.5
}
} else {
source = "word-source-Korea";
paintBgObj = that.paintHgBgObj
}
} }
if (this.map && !this.map.getLayer("world-layer-" + x.MId)) {
this.map.addLayer({
id: "world-layer-" + x.MId,
type: "fill",
source: source,
filter: ["==", "NAME_ZH", x.name]
}); });
}
if (x.MId != 651 && x.MId != 891) {
that.ClearSource("mapLayer-" + x.MId, 1)
that.ClearSource("mapLayerId-" + x.MId, 1)
this.map && this.map.setPaintProperty("world-layer-" + x.MId, "fill-color", [
"match",
["get", "NAME_ZH"],
x.name,
x.ColorStr, // 选定的国家颜色
["rgba", 0, 122, 255, 0]
]);
} else {
that.ClearSource("world-layer-" + x.MId, 1)
this.map && this.map.addLayer({
id: "mapLayer-" + x.MId,
type: "fill",
source: source,
filter: ["==", "NAME_ZH", x.name],
}); });
this.map && this.map.addLayer({
id: "mapLayerId-" + x.MId,
type: "fill",
source: source,
paint: paintBgObj
})
}
}); });
}, },
// 导出地图片 async addCountriesMaker() {
getResultImg() {
this.btnStr = "生成中..";
this.setLoading = true;
this.pageLoading = true;
let that = this; let that = this;
var postJson = { await Promise.all(
ConfigId: this.ConfigId this.countriesData.map(async (x, i) => {
}; let result;
var trip_map_obj = document.getElementById("trip_map"); if (x.Lng && x.Lat) {
html2Canvas(trip_map_obj).then(function (canvas) { result = [x.Lng, x.Lat];
var image = document.createElement("a");
image.href = canvas.toDataURL("image/png");
let blob = that.base64ToBlob(image.href);
let newArr = [];
newArr.push(blob);
var path = `/Upload/Temporary`;
that.uploadSelfBlob(path, newArr, postJson, x => {
that.pageLoading = false;
that.btnStr = "生成图片";
if (x.data.StatusCode == 1) {
that.setLoading = false;
let allPath = that.domainManager().ViittoFileUrl + x.data.FilePath;
that.PostConfig.Mapurl = allPath;
//调用父页面保存方法
that.PostConfig.TripMapList = JSON.parse(JSON.stringify(that.TripMapList));
that.$emit('saveMsg');
} else { } else {
that.setLoading = false; result = await this.getCountryCoordinates(x.name);
} }
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.name;
var marker = new mapboxgl.Marker(el, {
offset: [0, 0],
draggable: true
}); });
marker.setLngLat(result);
marker.addTo(this.map);
let currentMarkerLngLat = marker.getLngLat();
let TripMapList = that.TripMapList.filter(y => y.MName == x.MName)
TripMapList[0].Lng = currentMarkerLngLat.lng;
TripMapList[0].Lat = currentMarkerLngLat.lat;
marker.on("dragend", function () {
currentMarkerLngLat = marker.getLngLat();
TripMapList = that.TripMapList.filter(y => y.MName == x.MName)
TripMapList[0].Lng = currentMarkerLngLat.lng;
TripMapList[0].Lat = currentMarkerLngLat.lat;
}); });
this.countriesMarkers.push(marker);
}
})
);
}, },
//关闭地图弹窗 //获取国家经度纬度
Cancel() { async getCountryCoordinates(countryName) {
this.$emit("Cancel"); let result = [];
try {
const response = await fetch(
`https://api.mapbox.com/geocoding/v5/mapbox.places/${countryName}.json?types=country&access_token=pk.eyJ1IjoiYWxleDkwMTIiLCJhIjoiY2xtOGw4NHdkMGFndTNjcnFkeWZncGc2dyJ9.lVrAdPHE0Dg5zoWFidfj4Q`
);
if (response.ok) {
const data = await response.json();
if (data.features.length > 0) {
const countryInfo = data.features.find(x =>
x.id.startsWith("country.")
);
const [longitude, latitude] = countryInfo.center;
result = [longitude, latitude];
}
}
} catch (error) {}
return result;
}, },
// 获取国家 //获取城市经度纬度
async getAddress(Type) { async calcCitiesGeoInfoHandler() {
await this.apipost( await Promise.all(
"dict_get_Destination_GetCityExtList", this.citiesData.map(async cityItem => {
this.searchNation, var cityPosition = await this.getCityCoordinates(cityItem);
res => { if (cityPosition && cityPosition.length == 2) {
if (Type == 1) { cityItem.longitude = cityPosition[0];
this.NationList = res.data.data; cityItem.Lng = cityPosition[0];
this.NationList.forEach(x => { cityItem.Lat = cityPosition[1];
x.ID = Number(x.ID); cityItem.latitude = cityPosition[1];
}
})
);
},
//获取城市坐标
async getCityCoordinates(cityItem) {
let cityPosition = [];
try {
const response = await fetch(
`https://api.mapbox.com/geocoding/v5/mapbox.places/${cityItem.PMName}/${cityItem.MName}.json?types=place&access_token=pk.eyJ1IjoiYWxleDkwMTIiLCJhIjoiY2xtOGw4NHdkMGFndTNjcnFkeWZncGc2dyJ9.lVrAdPHE0Dg5zoWFidfj4Q`
);
if (response.ok) {
const data = await response.json();
if (data.features.length > 0) {
data.features.forEach(sItem => {
//判断匹配的城市名称是否一直
if (sItem.matching_text == cityItem.MName && cityPosition.length == 0) {
const [longitude, latitude] = data.features[0].center;
cityPosition = [longitude, latitude];
}
}); });
this.TripMapList.length > 0 && }
this.TripMapList.forEach(x => { }
x.NationList = res.data.data; } catch (error) {}
return cityPosition;
},
//日本线随机颜色
setPaintRbBgList() {
this.paintRbBgList = []
for (let i = 0; i < 1000; i++) {
let obj = [i, this.getRandomColor()]
this.paintRbBgList.push(obj)
}
},
clearCountriesMaker() {
if (this.countriesMarkers && this.countriesMarkers.length > 0) {
this.countriesMarkers.forEach(x => {
x.remove();
}); });
this.countriesMarkers = [];
} }
}, },
err => {} clearCitiesMarkersHandler() {
); if (this.deviceMarkers && this.deviceMarkers.length > 0) {
this.deviceMarkers.forEach(x => {
x.remove();
});
this.deviceMarkers = [];
}
}, },
//添加、删除国家（type=1,新增，0-删除） //地图对象
operateCountry(x, index, type) { getDataObj() {
let obj = { var obj = {
CityList: [], CityList: [], //保存国家下面的城市列表
CityListAll: [], //国家城市下来列表 CitySelectList: [], //国家下面的城市下拉列表
CityListIds: [], CityChooseList: [], //选中的城市Id
NationList: x.NationList, CountrySelectList: [], //国家下拉列表
ColorStr: x.ColorStr, ColorStr: this.PostConfig.TripColor ? this.PostConfig.TripColor : "#409eff",
ConfigId: x.ConfigId, ConfigId: this.PostConfig.ID,
Id: 0, Id: 0,
MId: null, MId: 0,
MName: null, MName: "",
MType: 1, MType: 1,
MapLevel: 0, MapLevel: 0,
MapUrl: "", MapUrl: "",
ParentId: null, ParentId: 0,
Lng: "", Lng: "",
Lat: "", Lat: "",
PositionStr: { PositionStr: {
...@@ -483,6 +634,12 @@ ...@@ -483,6 +634,12 @@
Top: 0 Top: 0
} }
}; };
return obj;
},
//添加、删除国家（type=1,新增，0-删除）
operateCountry(x, index, type) {
let obj = this.getDataObj();
obj.MId = "";
if (type) { if (type) {
this.TripMapList.push(JSON.parse(JSON.stringify(obj))); this.TripMapList.push(JSON.parse(JSON.stringify(obj)));
} else { } else {
...@@ -494,37 +651,44 @@ ...@@ -494,37 +651,44 @@
this.ClearSource('world-layer-' + MId, 1) this.ClearSource('world-layer-' + MId, 1)
} }
this.TripMapList.splice(index, 1); this.TripMapList.splice(index, 1);
this.PostConfig.TripMapList = JSON.parse(JSON.stringify(this.TripMapList)); }
this.getMapData();
},
//获取所有国家
getCountryList() {
if (this.SourceCountryList && this.SourceCountryList.length == 0) {
var countryMsg = {
CodeLevel: 1,
}
this.apipost(
"dict_get_Destination_GetCityExtList",
countryMsg,
res => {
this.SourceCountryList = res.data.data;
if (this.TripMapList && this.TripMapList.length > 0) {
this.TripMapList.forEach(x => {
x.CountrySelectList = res.data.data;
});
} }
}, },
getColorStr() { );
this.PostConfig.TripMapList = JSON.parse(JSON.stringify(this.TripMapList)); } else {
if (this.TripMapList && this.TripMapList.length > 0) {
this.TripMapList.forEach(x => {
x.CountrySelectList = this.SourceCountryList;
});
}
}
}, },
//选择城市或移除城市 //选择城市或移除城市
changeCityListIds(x, index) { changeCityListIds(x, index) {
x.CityList = []; x.CityList = [];
let obj = { let obj = {};
CityList: [], obj = this.getDataObj();
ColorStr: x.ColorStr, obj.ParentId = x.MId;
ConfigId: x.ConfigId, obj.MType = 2;
Id: 0, x.CityChooseList.forEach(items => {
MId: null, x.CitySelectList.forEach(item => {
MName: null,
MType: 2,
MapLevel: 0,
MapUrl: "",
ParentId: x.MId,
Lng: "",
Lat: "",
PositionStr: {
Bottom: 0,
Left: 0,
Right: 0,
Top: 0
}
};
x.CityListIds.forEach(items => {
x.CityListAll.forEach(item => {
if (item.ID == items) { if (item.ID == items) {
obj.MId = item.ID; obj.MId = item.ID;
obj.MName = item.Name; obj.MName = item.Name;
...@@ -534,13 +698,12 @@ ...@@ -534,13 +698,12 @@
} }
}); });
}); });
this.$forceUpdate(); this.getMapData();
this.PostConfig.TripMapList = JSON.parse(JSON.stringify(this.TripMapList));
}, },
//查询国家下面的城市 //查询国家下面的城市
SearchCity(MId, x, index) { SearchCity(MId, x, index) {
if (x) { if (x) {
x.NationList.forEach(item => { x.CountrySelectList.forEach(item => {
if (item.ID == MId) { if (item.ID == MId) {
this.TripMapList[index].MName = item.Name; this.TripMapList[index].MName = item.Name;
} }
...@@ -551,356 +714,63 @@ ...@@ -551,356 +714,63 @@
QCountry: MId QCountry: MId
}, },
res => { res => {
this.CityList = res.data.data; this.SourceCityList = res.data.data;
this.CityList.forEach(x => {
x.ID = Number(x.ID);
});
this.TripMapList.forEach(item => { this.TripMapList.forEach(item => {
if (item.MId == MId) { if (item.MId == MId) {
item.CityListIds = []; item.CityChooseList = [];
item.CityListAll = JSON.parse(JSON.stringify(this.CityList)); item.CitySelectList = JSON.parse(JSON.stringify(this.SourceCityList));
item.CityList.map(items => { item.CityList.map(items => {
item.CityListIds.push(items.MId); item.CityChooseList.push(items.MId);
}); });
item.CityListAll.forEach(x => { item.CitySelectList.forEach(x => {
let obj = [ let obj = [
["==", ["get", "name"], x.MName], this.getRandomColor(), ["==", ["get", "name"], x.MName], this.getRandomColor(),
] ]
}) })
} }
}); });
this.$forceUpdate();
},
err => {}
);
},
setPaintRbBgList() {
this.paintRbBgList = []
for (let i = 0; i < 1000; i++) {
let obj = [i, this.getRandomColor()]
this.paintRbBgList.push(obj)
}
},
addCountryFillRange() {
let that = this
this.countriesData.forEach((x, i) => {
if (x.MName == "中国") x.name = "中华人民共和国";
if (x.MName == "韩国") x.name = "大韩民国";
let source;
var paintBgObj;
if (x.MId != 651 && x.MId != 891) {
source = "word-source"
} else {
if (x.MId == 651) {
source = "word-source-japan";
paintBgObj = {
"fill-color": {
'property': 'cartodb_id',
stops: that.paintRbBgList
},
"fill-outline-color": "#4f4f4f",
"fill-opacity": 0.5
}
} else {
source = "word-source-Korea";
paintBgObj = that.paintHgBgObj
}
}
this.map && this.map.addLayer({
id: "world-layer-" + x.MId,
type: "fill",
source: source,
filter: ["==", "NAME_ZH", x.name]
});
if (x.MId != 651 && x.MId != 891) {
that.ClearSource("mapLayer-" + x.MId, 1)
that.ClearSource("mapLayerId-" + x.MId, 1)
this.map && this.map.setPaintProperty("world-layer-" + x.MId, "fill-color", [
"match",
["get", "NAME_ZH"],
x.name,
x.ColorStr, // 选定的国家颜色
["rgba", 0, 122, 255, 0]
]);
} else {
that.ClearSource("world-layer-" + x.MId, 1)
this.map && this.map.addLayer({
id: "mapLayer-" + x.MId,
type: "fill",
source: source,
filter: ["==", "NAME_ZH", x.name],
});
this.map && this.map.addLayer({
id: "mapLayerId-" + x.MId,
type: "fill",
source: source,
paint: paintBgObj
})
}
});
},
clearCitiesMarkersHandler() {
if (this.deviceMarkers && this.deviceMarkers.length > 0) {
this.deviceMarkers.forEach(x => {
x.remove();
});
this.deviceMarkers = [];
}
},
addMarker() {
this.citiesData.forEach((item, i) => {
var marker = new mapboxgl.Marker({
color: "#d73b33",
scale: 0.5
})
.setLngLat([item.longitude, item.latitude])
.addTo(this.map);
if (item.Lng && item.Lat) {
this.addLabel(item, i, item);
} else {
this.addLabel(item, i);
}
this.deviceMarkers.push(marker);
});
},
addLabel(item, i, PositionStr) {
let that = this;
let el = document.createElement("div");
el.style.cursor = "pointer";
el.innerHTML = item.name;
var marker = new mapboxgl.Marker(el, {
offset: [0, -25],
draggable: true
});
if (PositionStr) {
marker.setLngLat([PositionStr.Lng, PositionStr.Lat]);
} else {
marker.setLngLat([item.longitude, item.latitude]);
}
marker.addTo(this.map);
marker.on("dragend", function () {
let currentMarkerLngLat = marker.getLngLat();
console.log(currentMarkerLngLat, '------currentMarkerLngLat')
that.citiesData[i].Lng = currentMarkerLngLat.lng;
that.citiesData[i].Lat = currentMarkerLngLat.lat;
that.setCitiesPosition()
});
this.deviceMarkers.push(marker);
},
async getCoordinates(x) {
try {
const response = await fetch(
`https://api.mapbox.com/geocoding/v5/mapbox.places/${x.PMName}/${x.MName}.json?types=place&access_token=pk.eyJ1IjoiYWxleDkwMTIiLCJhIjoiY2xtOGw4NHdkMGFndTNjcnFkeWZncGc2dyJ9.lVrAdPHE0Dg5zoWFidfj4Q`
);
if (!response.ok) {
throw new Error("网络请求失败");
} }
const data = await response.json();
if (data.features.length > 0) {
const [longitude, latitude] = data.features[0].center;
let tempI = this.citiesData.findIndex(y => y.name == x.MName)
if (tempI == -1) this.citiesData.push({
name: x.MName,
longitude,
latitude,
Lng: "",
Lat: ""
});
} else {
this.coordinates = null;
this.error = true;
console.error("城市未找到，设置错误状态");
}
} catch (error) {
console.error("发生错误:", error);
}
},
async calcCitiesGeoInfoHandler() {
await Promise.all(
this.citys.map(async x => {
await this.getCoordinates(x);
})
);
},
createLineHandler() {
let that = this
this.listCity.forEach((p, i) => {
if (i < this.listCity.length - 1) {
let x = this.citiesData.find(x => x.name == p.MName);
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]
);
const geojson = {
type: "FeatureCollection",
features: [{
type: "Feature",
geometry: {
type: "LineString",
properties: {},
coordinates: controlPoint
}
}]
};
setTimeout(() => {
if (geojson && that.map && !that.map.getLayer("curve-layer-" + p.MId)) {
that.map && that.map.addSource("curve-source-" + p.MId, {
type: "geojson",
data: geojson
});
that.map && that.map.addLayer({
id: "curve-layer-" + p.MId,
type: "line",
source: "curve-source-" + p.MId,
layout: {
"line-cap": "round",
"line-join": "round"
}, },
paint: { //关闭地图弹窗
"line-color": ["rgba", 0, 0, 0, 0.3], CloseMapBox() {
"line-width": 1.5 this.$emit("Cancel");
}
});
}
}, 1000)
}
});
},
calculateBezierControlPoint(start, end) {
const controlPoint1 = [
start[0] > end[0] ? start[0] - 0.1 : start[0] + 0.1,
start[1] > end[1] ? end[1] + 0.1 : end[1] - 0.1
];
const controlPoint2 = [
start[0] > end[0] ? end[0] - 0.1 : end[0] + 0.1,
start[1] > end[1] ? end[1] + 0.1 : end[1] - 0.1
];
const bezier = new Bezier(
start[0],
start[1],
controlPoint1[0],
controlPoint1[1],
controlPoint2[0],
controlPoint2[1],
end[0],
end[1]
);
const numberOfPoints = 100;
const bezierCoordinates = [];
for (let i = 0; i <= numberOfPoints; i++) {
const t = i / numberOfPoints;
const point = bezier.get(t);
bezierCoordinates.push([point.x, point.y]);
}
return bezierCoordinates;
},
addDocumentEventListener() {
try {
document.removeEventListener("click");
} catch (e) {
console.log("未绑定相关的事件");
}
document.addEventListener("click", e => {
let arrows = ["top", "right", "left", "bottom"];
if (arrows.indexOf(e.target.className) == -1) {
document.querySelectorAll(".arror-box-map").forEach(e => {
e.className = "arror-box-map hide";
});
if (e.target.id.startsWith("marker_")) {
e.target.className = "arror-box-map";
}
} else {
let id = e.target.parentNode.id;
if (id.startsWith("marker_")) {
let arrow = e.target.className;
let index = parseInt(id.split("_")[1]);
let marker = this.deviceMarkers[index];
let drift = parseInt(
e.target.parentNode.getAttribute("data-x-drift")
);
if (arrow == "top") {
marker.setOffset([0, -25]);
} else if (arrow == "bottom") {
marker.setOffset([0, 15]);
} else if (arrow == "right") {
marker.setOffset([drift, -8]);
} else if (arrow == "left") {
marker.setOffset([-drift, -8]);
}
}
}
});
},
clearCountriesMaker() {
if (this.countriesMarkers && this.countriesMarkers.length > 0) {
this.countriesMarkers.forEach(x => {
x.remove();
});
this.countriesMarkers = [];
}
}, },
async addCountriesMaker() { // 导出地图片
getResultImg() {
this.btnStr = "生成中..";
this.setLoading = true;
this.pageLoading = true;
let that = this; let that = this;
await Promise.all( var postJson = {
this.countriesData.map(async (x, i) => { ConfigId: this.PostConfig.ID
let result; };
if (x.Lng && x.Lat) {
result = [x.Lng, x.Lat]; var trip_map_obj = document.getElementById("trip_map");
html2Canvas(trip_map_obj).then(function (canvas) {
var image = document.createElement("a");
image.href = canvas.toDataURL("image/png");
let blob = that.base64ToBlob(image.href);
let newArr = [];
newArr.push(blob);
var path = `/Upload/Temporary`;
that.uploadSelfBlob(path, newArr, postJson, x => {
that.pageLoading = false;
that.btnStr = "生成图片";
if (x.data.StatusCode == 1) {
that.setLoading = false;
let allPath = that.domainManager().ViittoFileUrl + x.data.FilePath;
that.PostConfig.Mapurl = allPath;
//调用父页面保存方法
that.PostConfig.TripMapList = JSON.parse(JSON.stringify(that.TripMapList));
that.$emit('saveMsg');
} else { } else {
result = await this.getCountryCoordinates(x.name); that.setLoading = false;
} }
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.name;
var marker = new mapboxgl.Marker(el, {
offset: [0, 0],
draggable: true
}); });
marker.setLngLat(result);
marker.addTo(this.map);
let currentMarkerLngLat = marker.getLngLat();
let TripMapList = that.TripMapList.filter(y => y.MName == x.MName)
TripMapList[0].Lng = currentMarkerLngLat.lng;
TripMapList[0].Lat = currentMarkerLngLat.lat;
marker.on("dragend", function () {
currentMarkerLngLat = marker.getLngLat();
TripMapList = that.TripMapList.filter(y => y.MName == x.MName)
TripMapList[0].Lng = currentMarkerLngLat.lng;
TripMapList[0].Lat = currentMarkerLngLat.lat;
}); });
this.countriesMarkers.push(marker);
}
})
);
}, },
//获取国家地址
async getCountryCoordinates(countryName) {
let result = [];
try {
const response = await fetch(
`https://api.mapbox.com/geocoding/v5/mapbox.places/${countryName}.json?types=country&access_token=pk.eyJ1IjoiYWxleDkwMTIiLCJhIjoiY2xtOGw4NHdkMGFndTNjcnFkeWZncGc2dyJ9.lVrAdPHE0Dg5zoWFidfj4Q`
);
if (response.ok) {
const data = await response.json();
if (data.features.length > 0) {
const countryInfo = data.features.find(x =>
x.id.startsWith("country.")
);
const [longitude, latitude] = countryInfo.center;
result = [longitude, latitude];
}
}
} catch (error) {}
return result;
}
} }
}; };
......
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