Skip to content

S
SuperMan
Commit dc885c0c authored by youjie's avatar youjie
Browse files
Options

no message

parent d714ce5d
Hide whitespace changes
Inline Side-by-side
Showing with 962 additions and 11 deletions
index.html
View file @ dc885c0c
......@@ -12,6 +12,8 @@
<!-- <script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script> -->
<script type="text/javascript" src="static/MarkerClusterer.js"></script>
<script type="text/javascript" src="static/CurveLine.min.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css" rel="stylesheet">
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js"></script>
<!-- <script type="text/javascript" src="http://activity.oytour.com/google.js?key=AIzaSyAZ5MIfzicStzKbIkbI3RcBBeZBjQFKsp0&language=zh-CN"></script> -->
<!-- <script type="text/javascript">
window.google = {
......
src/components/newTravelmanager/TravelGroupControl/TravelManagerThree.vue
View file @ dc885c0c
......@@ -43,6 +43,7 @@
id="thirdAnchor" @featureCallBack="getFeature" :FeatureData="FeatureData" :TeamType="TeamType"
:isNewConfig="isNewConfig" @unlockFormCommit="unlockFormCommit" :CurrentUserInfo="CurrentUserInfo">
</TravelFeature>
<Tripmap :dataAll="PostConfig"></Tripmap>
<TravelNotice :class="{'showOther':TeamType==3}" ref="TravelNotice" id="fourAnchor" @headCallBack="getNotice"
:subArray="NoticeParameters" :NoticeData="NoticeData" v-bind:PostConfig="PostConfig"
v-bind:AllCityList="AllCityList" v-bind:CountryID="PostConfig.CountryID"></TravelNotice>
......@@ -94,8 +95,20 @@
import TravelPrice2 from "../TravelGroupControl/TravelPrice2";
import TravelPrice3 from "../TravelGroupControl/TravelPrice3";
import TravelPrice4 from "../TravelGroupControl/TravelPrice4";
import Tripmap from "../TravelGroupControl/tripmap";
export default {
components: {
TravelConfig: TravelConfig,
TravelDaysTripDirect: TravelDaysTripDirect,
TravelFeature: TravelFeature,
TravelNotice: TravelNotice,
TravelPrice: TravelPrice,
TravelPrice2: TravelPrice2,
TravelPrice3: TravelPrice3,
TravelPrice4: TravelPrice4,
Tripmap,
},
provide() {
return {
loadConfigInfo: this.firstLoadConfigInfo,
......@@ -165,6 +178,9 @@
WLocationId: 0, //位置编号
WCityId: 0, //城市编号
TripColor:"",//行程特色主色
TripCountryList: [],//行程国家
TripCitwlist: [],//行程城市
TripMapList: [],
},
//行程
FeatureData: {
......@@ -246,16 +262,6 @@
saveLoading: false, //保存按钮loading
};
},
components: {
TravelConfig: TravelConfig,
TravelDaysTripDirect: TravelDaysTripDirect,
TravelFeature: TravelFeature,
TravelNotice: TravelNotice,
TravelPrice: TravelPrice,
TravelPrice2: TravelPrice2,
TravelPrice3: TravelPrice3,
TravelPrice4: TravelPrice4
},
methods: {
/*获取行程特色内容对象*/
getFeature(featureObj) {
......@@ -405,6 +411,9 @@
basicData.WCountryId = this.PostConfig.WCountryId;
basicData.WLocationId = this.PostConfig.WLocationId;
basicData.WCityId = this.PostConfig.WCityId;
basicData.TripCountryList = this.PostDaysTrip.TripCountryList;
basicData.TripCitwlist = this.PostDaysTrip.TripCitwlist;
basicData.TripMapList = this.PostDaysTrip.TripMapList;
this.journeyList.IsUpdateTrip = this.PostDaysTrip.IsUpdateTrip;
//行程特色数据
var TripFeature = {};
......@@ -839,7 +848,17 @@
this.PostConfig.WCountryId = tempData.WCountryId;
this.PostConfig.WLocationId = tempData.WLocationId;
this.PostConfig.WCityId = tempData.WCityId;
this.PostConfig.TripCountryList = tempData.TripCountryList;
this.PostConfig.TripCitwlist = tempData.TripCitwlist;
this.PostConfig.TripMapList = tempData.TripMapList;
let arrList = function(list){
list.forEach(x=>{
x.NationList = []
x.CityListAll = []
x.CityListIds = []
})
}
arrList(this.PostConfig.TripMapList)
this.NoticeParameters.ConfigId = tempData.ConfigId;
this.NoticeParameters.CountryID = tempData.CountryID;
......
src/components/newTravelmanager/TravelGroupControl/tripmap.vue 0 → 100644
View file @ dc885c0c
<template>
<div class="tripmap-form marginT20" v-if="dataAll">
<div class="row">
<div v-for="(x, index) in TripMapList" ::key="x.Id"
class="row-aic" style="margin-right: 10px;">
<el-select
class="w100"
size="mini"
placeholder="选择国家"
v-model="x.MId"
@change="SearchCity(x.MId,x,index)"
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="item.ID"
>
</el-option>
</el-select>
<el-color-picker
style="vertical-align: middle;"
v-model="x.ColorStr"
></el-color-picker>
<div style="margin-left: 5px; font-size: 23px;cursor: pointer;">
<i v-if="index==0" class="el-icon-circle-plus" style="color: #E95252;"
@click="alterCity(x,index,1)"></i>
<i v-if="index!=0" class="el-icon-delete-solid" style="color: gray;"
@click="alterCity(x,index,0)"></i>
</div>
</div>
</div>
<div class="relative marginT20" style="height: 500px;border: 1px solid #e6e6e6;">
<div id="trip_map" class="map"></div>
</div>
</div>
</template>
<script>
import mapboxgl from "mapbox-gl";
import { Bezier } from "bezier-js";
import worldGeoJSON from "../../../utils/geojson.json";
mapboxgl.accessToken =
"pk.eyJ1IjoiYWxleDkwMTIiLCJhIjoiY2xtOGw4NHdkMGFndTNjcnFkeWZncGc2dyJ9.lVrAdPHE0Dg5zoWFidfj4Q";
export default {
props: ["dataAll"],
data() {
return {
deviceMarkers: [],
loadingCity: false,
loading: false,
TripColor: "",
NationList: [],
searchNation: {
CodeLevel: "1",
Name: "",
ID: ""
},
CityList: [],
searchCity: {
// CodeLevel:'3',Name:"",
QCountry: ""
},
map: null,
pois:
"巴塞罗那,萨拉戈萨,马德里,托莱多,里斯本,塞维利亚,塔里法,丹吉尔,舍夫沙万,拉巴特,丹吉尔,塔里法,米哈斯,格拉纳达,巴塞罗那",
citys: "",
deviceMarkers: [],
countriesData: [
{
name: "西班牙",
color: "#71adeb"
},
{
name: "葡萄牙",
color: "#b7e7fe"
},
{
name: "摩洛哥",
color: "#b3fafe"
}
],
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: null
};
},
watch: {
NationList:{
handler(val, oldVal) {
},
deep: true,
immediate: false
},
dataAll: {
handler(val, oldVal) {
this.getAddress(1);
// console.log(val.TripCountryList,'TripCountryList====',val.TripCitwlist,'----------')
// let arrList = function(list){
// list.forEach(x=>{
// x.NationList = []
// x.CityListAll = []
// x.CityListIds = []
// })
// }
this.TripMapList = JSON.parse(JSON.stringify(val.TripMapList))
// arrList(this.TripMapList)
let listCity = [];
this.countriesData = [];
this.pois = "";
this.TripMapList.forEach(x => {
let obj = {
MName: x.MName,
ColorStr: x.ColorStr
};
this.countriesData.push(obj);
x.CityList.forEach(y => {
listCity.push(y.MName);
});
});
this.pois = listCity.join(",");
this.citys = [...new Set(this.pois.split(","))];
this.TripMapList.forEach((x)=>{
if(x.MId){
this.SearchCity(x.MId)
}
})
},
deep: true,
immediate: true
}
},
computed: {},
mounted() {
this.initializeData()
},
methods: {
// 更新数据
async AssemblyData(){
let listCity = [];
this.countriesData = [];
this.pois = "";
this.TripMapList.forEach(x => {
let obj = {
MName: x.MName,
ColorStr: x.ColorStr
};
this.countriesData.push(obj);
x.CityList.forEach(y => {
listCity.push(y.MName);
});
});
this.pois = listCity.join(",");
this.citys = [...new Set(this.pois.split(","))];
this.TripMapList.forEach((x)=>{
if(x.MId){
this.SearchCity(x.MId)
}
})
this.countriesData.forEach((x, i) => {
if(this.map.getLayer('world-layer-'+i)) {
this.map.removeLayer('world-layer-'+i)
}
})
if (this.pois&&this.pois!=''&&this.citys&&this.citys.length>0
&& this.countriesData &&this.countriesData.length > 0&&this.TripMapList.length==this.countriesData.length) {
// this.map.addSource("word-source", {
// type: "geojson",
// data: worldGeoJSON
// });
// 显示国家
this.addCountryFillRange();
// 获取坐标信息
await this.calcCitiesGeoInfoHandler();
// 可见范围
const bounds = new mapboxgl.LngLatBounds();
this.citiesData.forEach(city => {
bounds.extend([city.longitude, city.latitude]);
});
this.map.fitBounds(bounds, {
padding: 150 // 可选：在地图边界周围添加一些内边距
});
this.map.setCenter(bounds.getCenter());
this.addMarker(); //标记
this.createLineHandler(); //连线
await this.addCountriesMaker(); //标记名字
}
},
// 渲染地图
initializeData(){
if (this.pois &&this.citys &&
this.countriesData &&this.countriesData.length > 0) {
this.map = new mapboxgl.Map({
container: "trip_map",
style: "mapbox://styles/alex9012/clm92pvs1011j01qzexlh6g2b", // 'mapbox://styles/mapbox/light-v9','mapbox://styles/alex9012/clm92pvs1011j01qzexlh6g2b'
center: [2.177432, 41.382894],
zoom: 6
});
this.map.on("load", async () => {
this.map.addSource("word-source", {
type: "geojson",
data: worldGeoJSON
});
// 显示国家
this.addCountryFillRange();
// 获取坐标信息
await this.calcCitiesGeoInfoHandler();
// 可见范围
const bounds = new mapboxgl.LngLatBounds();
this.citiesData.forEach(city => {
bounds.extend([city.longitude, city.latitude]);
});
this.map.fitBounds(bounds, {
padding: 150 // 可选：在地图边界周围添加一些内边距
});
this.map.setCenter(bounds.getCenter());
this.addMarker(); //标记
this.createLineHandler(); //连线
await this.addCountriesMaker(); //标记名字
});
//this.addDocumentEventListener();
}
},
UpdateMap(){
// 显示国家
this.addCountryFillRange();
// 获取坐标信息
this.calcCitiesGeoInfoHandler();
// 可见范围
const bounds = new mapboxgl.LngLatBounds();
this.citiesData.forEach(city => {
bounds.extend([city.longitude, city.latitude]);
});
this.map.fitBounds(bounds, {
padding: 150 // 可选：在地图边界周围添加一些内边距
});
this.map.setCenter(bounds.getCenter());
this.addMarker(); //标记
this.createLineHandler(); //连线
this.addCountriesMaker(); //标记名字
},
async getAddress(Type) {
this.loading = true;
await this.apipost(
"dict_get_Destination_GetCityExtList",
this.searchNation,
res => {
this.loading = false;
if (Type == 1) {
this.NationList = res.data.data;
this.NationList.forEach(x=>{
x.ID = Number(x.ID)
})
this.TripMapList.length>0&&this.TripMapList.forEach(x=>{
x.NationList = res.data.data
})
this.$forceUpdate()
}
},
err => {}
);
},
alterCity(x,index,type){
let obj = {
CityList: [],
CityListAll: [],
CityListIds: [],
NationList: x.NationList,
ColorStr: x.ColorStr,
ConfigId: x.ConfigId,
Id: x.Id,
MId: null,
MName: null,
MType: 1,
MapLevel: 0,
MapUrl:"",
ParentId: null,
PositionStr:{
Bottom: 0,
Left: 0,
Right: 0,
Top: 0,
}
}
if(type){
this.TripMapList.push(JSON.parse(JSON.stringify(obj)))
}else{
this.TripMapList.splice(index,1)
}
},
getCityListIds(x,index){
x.CityList = []
let obj = {
CityList: [],
ColorStr: x.ColorStr,
ConfigId: x.ConfigId,
Id: x.Id,
MId: null,
MName: null,
MType: 2,
MapLevel:0,
MapUrl:"",
ParentId: x.MId,
PositionStr:{
Bottom: 0,
Left: 0,
Right: 0,
Top: 0,
}
}
x.CityListAll.forEach(item=>{
x.CityListIds.forEach(items=>{
if(item.ID==items){
obj.MId = item.ID
obj.MName = item.Name
this.TripMapList[index].CityList.push(JSON.parse(JSON.stringify(obj)))
}
})
})
this.dataAll.TripMapList = JSON.parse(JSON.stringify(this.TripMapList))
this.$forceUpdate()
this.AssemblyData()
},
SearchCity(MId,x,index) {
if(x){
x.NationList.forEach(item=>{
if(item.ID==MId){
console.log(x.NationList[0],MId,'-----1111')
this.TripMapList[index].MName = item.Name
}
})
}
this.loadingCity = true;
this.apipost(
"dict_get_Destination_GetCountryCityList",
{
QCountry: MId
},
res => {
this.loadingCity = false;
this.CityList = res.data.data;
this.CityList.forEach(x=>{
x.ID = Number(x.ID)
})
this.TripMapList.forEach(item=>{
if(item.MId==MId){
item.CityListIds = []
item.CityListAll = JSON.parse(JSON.stringify(this.CityList));
item.CityList.map(items=>{
item.CityListIds.push(items.MId)
})
}
})
this.$forceUpdate()
},
err => {}
);
},
addCountryFillRange() {
this.countriesData.forEach((x, i) => {
this.map.addLayer({
id: "world-layer-" + i,
type: "fill",
source: "word-source",
filter: ["==", "NAME_ZH", x.MName]
});
this.map.setPaintProperty("world-layer-" + i, "fill-color", [
"match",
["get", "NAME_ZH"],
x.MName,
x.ColorStr, // 选定的国家颜色
["rgba", 0, 122, 255, 0]
]);
});
},
addMarker() {
// let markerColor = calculateComplementaryColor("#71adeb");
this.citiesData.forEach((item, i) => {
var marker = new mapboxgl.Marker({ color: "#d73b33", scale: 0.5 })
.setLngLat([item.longitude, item.latitude])
.addTo(this.map);
this.addLabel(item, i);
});
},
addLabel(item, i) {
let el = document.createElement("div");
el.style.cursor = "pointer";
// let html = `<div class='arror-box-map hide' id='marker_${i}' data-x-drift='${item
// .name.length *
// 10}'><span class='top'></span><span class='right'></span><span class='bottom'></span><span class='left'></span><div>`;
// html = `<div style='position:relative'><div>${item.name}</div>${html}</div>`;
el.innerHTML = item.name;
var marker = new mapboxgl.Marker(el, { offset: [0, -25], draggable: true })
.setLngLat([item.longitude, item.latitude])
.addTo(this.map);
this.deviceMarkers.push(marker);
},
async getCoordinates(cityName) {
try {
const response = await fetch(
`https://api.mapbox.com/geocoding/v5/mapbox.places/${cityName}.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;
this.citiesData.push({ name: cityName, longitude, latitude });
} 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 poilines = this.pois.split(",");
poilines.forEach((p, i) => {
if (i < poilines.length - 1) {
let x = this.citiesData.find(x => x.name == p);
let y = this.citiesData.find(x => x.name == poilines[i + 1]);
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
}
}
]
};
this.map.addSource("curve-source-" + i, {
type: "geojson",
data: geojson
});
this.map.addLayer({
id: "curve-layer-" + i,
type: "line",
source: "curve-source-" + i,
layout: {
"line-cap": "round",
"line-join": "round"
},
paint: {
"line-color": ["rgba", 0, 0, 0, 0.3],
"line-width": 1.5
//'line-dasharray': [2, 4],
}
});
}
});
},
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
];
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")
);
console.log(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]);
}
}
}
});
},
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);
}
})
);
},
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;
}
}
};
</script>
<style>
.tripmap-form {
background: #fff;
padding: 20px;
}
#trip_map {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
body {
margin: 0;
padding: 0;
}
.arror-box-map {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
.arror-box-map span {
position: absolute;
display: block;
height: 6px;
width: 6px;
cursor: pointer;
}
.arror-box-map.hide span {
display: none !important;
}
.arror-box-map span.top {
left: calc(50% - 6px);
top: -10px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid rgba(0, 0, 0, 0.6);
}
.arror-box-map span.right {
right: -10px;
top: 3px;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 6px solid rgba(0, 0, 0, 0.6);
}
.arror-box-map span.bottom {
left: calc(50% - 6px);
bottom: -10px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid rgba(0, 0, 0, 0.6);
}
.arror-box-map span.left {
left: -10px;
top: 3px;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 6px solid rgba(0, 0, 0, 0.6);
}
</style>
src/utils/geojson.json 0 → 100644
View file @ dc885c0c
This source diff could not be displayed because it is too large. You can view the blob instead.
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