Skip to content

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

页面修改

parent 15e8673f
Hide whitespace changes
Inline Side-by-side
Showing with 11 additions and 62 deletions
src/components/newTravelmanager/TravelGroupControl/tripmap.vue
View file @ 3843b22f
...@@ -8,7 +8,6 @@ ...@@ -8,7 +8,6 @@
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.NationList" :label="item.Name" :value="item.ID" :key="i"></el-option>
</el-select> </el-select>
<!-- class="Ht_hotelSelect" -->
<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="getCityListIds(x, index)"> placeholder="选择城市" v-model="x.CityListIds" multiple filterable @change="getCityListIds(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.CityListAll" :label="item.Name" :value="item.ID" :key="i">
...@@ -25,15 +24,8 @@ ...@@ -25,15 +24,8 @@
</div> </div>
</div> </div>
<div class="row-aic" style="flex-shrink: 0;"> <div class="row-aic" style="flex-shrink: 0;">
<div> <el-button type="danger" @click="Cancel" size="small">取消</el-button>
<span class="MapImgButtom CancelMapImg" @click="Cancel">取消</span> <el-button type="primary" :loading="setLoading" @click="getResultImg()" size="small">生成图片</el-button>
</div>
<div style="margin-left: 20px;">
<span class="MapImgButtom setMapImg" @click="SavePositionStr">保存坐标</span>
</div>
<div style="margin-left: 20px;">
<span class="MapImgButtom setMapImg" @click="(setLoading = true), getResultImg()">生成图片</span>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -175,9 +167,7 @@ ...@@ -175,9 +167,7 @@
CityListAll: this.CityListAll, CityListAll: this.CityListAll,
CityListIds: [4, 6], CityListIds: [4, 6],
NationList: this.NationList, NationList: this.NationList,
ColorStr: this.PostConfig.TripColor ? ColorStr: this.PostConfig.TripColor ? this.PostConfig.TripColor : "#409eff",
this.PostConfig.TripColor :
"#409eff",
ConfigId: this.ConfigId, ConfigId: this.ConfigId,
Id: 0, Id: 0,
MId: 2, MId: 2,
...@@ -210,7 +200,6 @@ ...@@ -210,7 +200,6 @@
this.setPaintRbBgList() this.setPaintRbBgList()
this.initMap() this.initMap()
}, },
methods: { methods: {
// 初始化地图 // 初始化地图
initMap() { initMap() {
...@@ -228,13 +217,12 @@ ...@@ -228,13 +217,12 @@
}); });
this.map.addSource("word-source-japan", { this.map.addSource("word-source-japan", {
type: "geojson", type: "geojson",
data: worldGeoJSONJapan, //"http://imgfile.oytour.com/MapData/japan_.geojson" data: worldGeoJSONJapan,
}); });
this.map.addSource("word-source-Korea", { this.map.addSource("word-source-Korea", {
type: "geojson", type: "geojson",
data: worldGeoJSONKorea, data: worldGeoJSONKorea,
}); });
if ( if (
this.TripMapList && this.TripMapList &&
this.TripMapList.length > 0 && this.TripMapList.length > 0 &&
...@@ -263,7 +251,6 @@ ...@@ -263,7 +251,6 @@
console.log(type, "1初始化---- 2数据更新"); console.log(type, "1初始化---- 2数据更新");
// 显示国家 // 显示国家
this.addCountryFillRange(); this.addCountryFillRange();
// 获取坐标信息 // 获取坐标信息
await this.calcCitiesGeoInfoHandler(); await this.calcCitiesGeoInfoHandler();
// 可见范围 // 可见范围
...@@ -283,15 +270,12 @@ ...@@ -283,15 +270,12 @@
this.createLineHandler(); //连线 this.createLineHandler(); //连线
await this.addCountriesMaker(); //标记国家 await this.addCountriesMaker(); //标记国家
} }
//this.addDocumentEventListener();
}, },
//组装数据
// 组装数据
UpdateDatas() { UpdateDatas() {
let listCity = []; let listCity = [];
let listCountries = []; let listCountries = [];
this.listCity = []; this.listCity = [];
// this.countriesData = [];
this.pois = ""; this.pois = "";
this.TripMapList.forEach(x => { this.TripMapList.forEach(x => {
let obj = { let obj = {
...@@ -390,39 +374,23 @@ ...@@ -390,39 +374,23 @@
}); });
}); });
}, },
// 保存标记坐标 //保存标记坐标
SavePositionStr() { SavePositionStr() {
this.PostConfig.TripMapList = JSON.parse(JSON.stringify(this.TripMapList)); this.PostConfig.TripMapList = JSON.parse(JSON.stringify(this.TripMapList));
this.$emit('saveMsg') this.$emit('saveMsg')
// this.TripMapList.forEach(x => {
// x.CityList.forEach(y => {
// this.citiesData.forEach(z => {
// if (y.MName == z.name) {
// y.Lng = z.Lng;
// y.Lat = z.Lat;
// }
// });
// });
// this.countriesData.forEach(y => {
// if (x.MName == y.name) {
// x.Lng = y.Lng;
// x.Lat = y.Lat;
// }
// });
// });
}, },
// 导出地图片 // 导出地图片
getResultImg() { getResultImg() {
this.setLoading = true;
this.SavePositionStr();
let that = this; let that = this;
var postJson = { var postJson = {
ConfigId: this.ConfigId ConfigId: this.ConfigId
}; };
this.imageUrl = this.map.getCanvas().toDataURL("image/png"); this.imageUrl = this.map.getCanvas().toDataURL("image/png");
let mapCanvas = document.querySelector(".mapboxgl-canvas"); let mapCanvas = document.querySelector(".mapboxgl-canvas");
// mapCanvas.style.display = "none";
html2Canvas(document.getElementById("trip_map")).then(function (canvas) { html2Canvas(document.getElementById("trip_map")).then(function (canvas) {
var image = document.createElement( var image = document.createElement("a");
"a"); //image.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
image.href = canvas.toDataURL("image/png"); image.href = canvas.toDataURL("image/png");
let blob = that.base64ToBlob(image.href); let blob = that.base64ToBlob(image.href);
let newArr = []; let newArr = [];
...@@ -440,8 +408,6 @@ ...@@ -440,8 +408,6 @@
} }
}); });
return; return;
image.download = "map.png";
image.click();
}); });
}, },
Cancel() { Cancel() {
...@@ -546,7 +512,6 @@ ...@@ -546,7 +512,6 @@
this.$forceUpdate(); this.$forceUpdate();
this.PostConfig.TripMapList = JSON.parse(JSON.stringify(this.TripMapList)); this.PostConfig.TripMapList = JSON.parse(JSON.stringify(this.TripMapList));
}, },
// 查询城市 // 查询城市
SearchCity(MId, x, index) { SearchCity(MId, x, index) {
if (x) { if (x) {
...@@ -556,7 +521,6 @@ ...@@ -556,7 +521,6 @@
} }
}); });
} }
this.loadingCity = true; this.loadingCity = true;
this.apipost( this.apipost(
"dict_get_Destination_GetCountryCityList", { "dict_get_Destination_GetCountryCityList", {
...@@ -579,7 +543,6 @@ ...@@ -579,7 +543,6 @@
let obj = [ let obj = [
["==", ["get", "name"], x.MName], this.getRandomColor(), ["==", ["get", "name"], x.MName], this.getRandomColor(),
] ]
}) })
} }
}); });
...@@ -666,7 +629,6 @@ ...@@ -666,7 +629,6 @@
} }
}, },
addMarker() { addMarker() {
// let markerColor = calculateComplementaryColor("#71adeb");
this.citiesData.forEach((item, i) => { this.citiesData.forEach((item, i) => {
var marker = new mapboxgl.Marker({ var marker = new mapboxgl.Marker({
color: "#d73b33", color: "#d73b33",
...@@ -704,7 +666,6 @@ ...@@ -704,7 +666,6 @@
that.citiesData[i].Lat = currentMarkerLngLat.lat; that.citiesData[i].Lat = currentMarkerLngLat.lat;
that.setCitiesPosition() that.setCitiesPosition()
}); });
this.deviceMarkers.push(marker); this.deviceMarkers.push(marker);
}, },
async getCoordinates(x) { async getCoordinates(x) {
...@@ -712,11 +673,9 @@ ...@@ -712,11 +673,9 @@
const response = await fetch( const response = await fetch(
`https://api.mapbox.com/geocoding/v5/mapbox.places/${x.PMName}/${x.MName}.json?types=place&access_token=pk.eyJ1IjoiYWxleDkwMTIiLCJhIjoiY2xtOGw4NHdkMGFndTNjcnFkeWZncGc2dyJ9.lVrAdPHE0Dg5zoWFidfj4Q` `https://api.mapbox.com/geocoding/v5/mapbox.places/${x.PMName}/${x.MName}.json?types=place&access_token=pk.eyJ1IjoiYWxleDkwMTIiLCJhIjoiY2xtOGw4NHdkMGFndTNjcnFkeWZncGc2dyJ9.lVrAdPHE0Dg5zoWFidfj4Q`
); );
if (!response.ok) { if (!response.ok) {
throw new Error("网络请求失败"); throw new Error("网络请求失败");
} }
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;
...@@ -745,7 +704,6 @@ ...@@ -745,7 +704,6 @@
); );
}, },
createLineHandler() { createLineHandler() {
// let poilines = this.pois.split(",");
let that = this let that = this
this.listCity.forEach((p, i) => { this.listCity.forEach((p, i) => {
if (i < this.listCity.length - 1) { if (i < this.listCity.length - 1) {
...@@ -785,7 +743,6 @@ ...@@ -785,7 +743,6 @@
paint: { paint: {
"line-color": ["rgba", 0, 0, 0, 0.3], "line-color": ["rgba", 0, 0, 0, 0.3],
"line-width": 1.5 "line-width": 1.5
//'line-dasharray': [2, 4],
} }
}); });
} }
...@@ -794,7 +751,6 @@ ...@@ -794,7 +751,6 @@
}); });
}, },
calculateBezierControlPoint(start, end) { calculateBezierControlPoint(start, end) {
//const controlPoint1 = [start[0] + 0.3, start[1] + 0.2];
const controlPoint1 = [ const controlPoint1 = [
start[0] > end[0] ? start[0] - 0.1 : start[0] + 0.1, start[0] > end[0] ? start[0] - 0.1 : start[0] + 0.1,
start[1] > end[1] ? end[1] + 0.1 : end[1] - 0.1 start[1] > end[1] ? end[1] + 0.1 : end[1] - 0.1
...@@ -813,10 +769,8 @@ ...@@ -813,10 +769,8 @@
end[0], end[0],
end[1] end[1]
); );
const numberOfPoints = 100; const numberOfPoints = 100;
const bezierCoordinates = []; const bezierCoordinates = [];
for (let i = 0; i <= numberOfPoints; i++) { for (let i = 0; i <= numberOfPoints; i++) {
const t = i / numberOfPoints; const t = i / numberOfPoints;
const point = bezier.get(t); const point = bezier.get(t);
...@@ -848,7 +802,6 @@ ...@@ -848,7 +802,6 @@
let drift = parseInt( let drift = parseInt(
e.target.parentNode.getAttribute("data-x-drift") e.target.parentNode.getAttribute("data-x-drift")
); );
console.log(drift);
if (arrow == "top") { if (arrow == "top") {
marker.setOffset([0, -25]); marker.setOffset([0, -25]);
} else if (arrow == "bottom") { } else if (arrow == "bottom") {
...@@ -908,26 +861,22 @@ ...@@ -908,26 +861,22 @@
}) })
); );
}, },
//获取国家地址
async getCountryCoordinates(countryName) { async getCountryCoordinates(countryName) {
let result = []; let result = [];
try { try {
const response = await fetch( const response = await fetch(
`https://api.mapbox.com/geocoding/v5/mapbox.places/${countryName}.json?types=country&access_token=pk.eyJ1IjoiYWxleDkwMTIiLCJhIjoiY2xtOGw4NHdkMGFndTNjcnFkeWZncGc2dyJ9.lVrAdPHE0Dg5zoWFidfj4Q` `https://api.mapbox.com/geocoding/v5/mapbox.places/${countryName}.json?types=country&access_token=pk.eyJ1IjoiYWxleDkwMTIiLCJhIjoiY2xtOGw4NHdkMGFndTNjcnFkeWZncGc2dyJ9.lVrAdPHE0Dg5zoWFidfj4Q`
); );
if (response.ok) { if (response.ok) {
const data = await response.json(); const data = await response.json();
if (data.features.length > 0) { if (data.features.length > 0) {
const countryInfo = data.features.find(x => const countryInfo = data.features.find(x =>
x.id.startsWith("country.") x.id.startsWith("country.")
); );
// const bbox = countryInfo.bbox;
// const topCenterLatitude = bbox[3] + (bbox[1] - bbox[3]) / 2;
// const topCenterLongitude = bbox[0] + (bbox[2] - bbox[0]) / 2;
// result = [topCenterLongitude, topCenterLatitude];
const [longitude, latitude] = countryInfo.center; const [longitude, latitude] = countryInfo.center;
result = [longitude, latitude]; result = [longitude, latitude];
} else {} }
} }
} catch (error) {} } catch (error) {}
return result; 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