Skip to content

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

页面修改

parent 15e8673f
Show 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 @@
filterable>
<el-option v-for="(item, i) in x.NationList" :label="item.Name" :value="item.ID" :key="i"></el-option>
</el-select>
<!-- class="Ht_hotelSelect" -->
<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)">
<el-option v-for="(item, i) in x.CityListAll" :label="item.Name" :value="item.ID" :key="i">
......@@ -25,15 +24,8 @@
</div>
</div>
<div class="row-aic" style="flex-shrink: 0;">
<div>
<span class="MapImgButtom CancelMapImg" @click="Cancel">取消</span>
</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>
<el-button type="danger" @click="Cancel" size="small">取消</el-button>
<el-button type="primary" :loading="setLoading" @click="getResultImg()" size="small">生成图片</el-button>
</div>
</div>
</div>
......@@ -175,9 +167,7 @@
CityListAll: this.CityListAll,
CityListIds: [4, 6],
NationList: this.NationList,
ColorStr: this.PostConfig.TripColor ?
this.PostConfig.TripColor :
"#409eff",
ColorStr: this.PostConfig.TripColor ? this.PostConfig.TripColor : "#409eff",
ConfigId: this.ConfigId,
Id: 0,
MId: 2,
......@@ -210,7 +200,6 @@
this.setPaintRbBgList()
this.initMap()
},
methods: {
// 初始化地图
initMap() {
......@@ -228,13 +217,12 @@
});
this.map.addSource("word-source-japan", {
type: "geojson",
data: worldGeoJSONJapan, //"http://imgfile.oytour.com/MapData/japan_.geojson"
data: worldGeoJSONJapan,
});
this.map.addSource("word-source-Korea", {
type: "geojson",
data: worldGeoJSONKorea,
});
if (
this.TripMapList &&
this.TripMapList.length > 0 &&
......@@ -263,7 +251,6 @@
console.log(type, "1初始化---- 2数据更新");
// 显示国家
this.addCountryFillRange();
// 获取坐标信息
await this.calcCitiesGeoInfoHandler();
// 可见范围
......@@ -283,15 +270,12 @@
this.createLineHandler(); //连线
await this.addCountriesMaker(); //标记国家
}
//this.addDocumentEventListener();
},
// 组装数据
//组装数据
UpdateDatas() {
let listCity = [];
let listCountries = [];
this.listCity = [];
// this.countriesData = [];
this.pois = "";
this.TripMapList.forEach(x => {
let obj = {
......@@ -390,39 +374,23 @@
});
});
},
// 保存标记坐标
//保存标记坐标
SavePositionStr() {
this.PostConfig.TripMapList = JSON.parse(JSON.stringify(this.TripMapList));
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() {
this.setLoading = true;
this.SavePositionStr();
let that = this;
var postJson = {
ConfigId: this.ConfigId
};
this.imageUrl = this.map.getCanvas().toDataURL("image/png");
let mapCanvas = document.querySelector(".mapboxgl-canvas");
// mapCanvas.style.display = "none";
html2Canvas(document.getElementById("trip_map")).then(function (canvas) {
var image = document.createElement(
"a"); //image.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
var image = document.createElement("a");
image.href = canvas.toDataURL("image/png");
let blob = that.base64ToBlob(image.href);
let newArr = [];
......@@ -440,8 +408,6 @@
}
});
return;
image.download = "map.png";
image.click();
});
},
Cancel() {
......@@ -546,7 +512,6 @@
this.$forceUpdate();
this.PostConfig.TripMapList = JSON.parse(JSON.stringify(this.TripMapList));
},
// 查询城市
SearchCity(MId, x, index) {
if (x) {
......@@ -556,7 +521,6 @@
}
});
}
this.loadingCity = true;
this.apipost(
"dict_get_Destination_GetCountryCityList", {
......@@ -579,7 +543,6 @@
let obj = [
["==", ["get", "name"], x.MName], this.getRandomColor(),
]
})
}
});
......@@ -666,7 +629,6 @@
}
},
addMarker() {
// let markerColor = calculateComplementaryColor("#71adeb");
this.citiesData.forEach((item, i) => {
var marker = new mapboxgl.Marker({
color: "#d73b33",
......@@ -704,7 +666,6 @@
that.citiesData[i].Lat = currentMarkerLngLat.lat;
that.setCitiesPosition()
});
this.deviceMarkers.push(marker);
},
async getCoordinates(x) {
......@@ -712,11 +673,9 @@
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;
......@@ -745,7 +704,6 @@
);
},
createLineHandler() {
// let poilines = this.pois.split(",");
let that = this
this.listCity.forEach((p, i) => {
if (i < this.listCity.length - 1) {
......@@ -785,7 +743,6 @@
paint: {
"line-color": ["rgba", 0, 0, 0, 0.3],
"line-width": 1.5
//'line-dasharray': [2, 4],
}
});
}
......@@ -794,7 +751,6 @@
});
},
calculateBezierControlPoint(start, end) {
//const controlPoint1 = [start[0] + 0.3, start[1] + 0.2];
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
......@@ -813,10 +769,8 @@
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);
......@@ -848,7 +802,6 @@
let drift = parseInt(
e.target.parentNode.getAttribute("data-x-drift")
);
console.log(drift);
if (arrow == "top") {
marker.setOffset([0, -25]);
} else if (arrow == "bottom") {
......@@ -908,26 +861,22 @@
})
);
},
//获取国家地址
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 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;
result = [longitude, latitude];
} else {}
}
}
} 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