Skip to content

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

no message

parent 3fec8dad
Hide whitespace changes
Inline Side-by-side
Showing with 72 additions and 38 deletions
src/components/newTravelmanager/TravelGroupControl/tripmap.vue
View file @ be02ae86
......@@ -40,6 +40,7 @@
</el-option>
</el-select>
<el-color-picker
v-if="x.MId!=651&&x.MId!=891"
style="vertical-align: middle;"
v-model="x.ColorStr"
@change="getColorStr"
......@@ -64,13 +65,13 @@
<div>
<span class="MapImgButtom CancelMapImg" @click="Cancel">取消</span>
</div>
<div style="margin-left: 20px;">
<!-- <div style="margin-left: 20px;">
<span
class="MapImgButtom setMapImg"
@click="SavePositionStr"
>保存坐标</span
>
</div>
</div> -->
<div style="margin-left: 20px;">
<span
class="MapImgButtom setMapImg"
......@@ -241,7 +242,7 @@ export default {
this.TripMapList.push(JSON.parse(JSON.stringify(obj)));
}
// console.log(this.TripMapList, "----TripMapList");
console.log(this.TripMapList, "----TripMapList");
},
deep: true,
immediate: true
......@@ -263,7 +264,7 @@ export default {
zoom: 6,
preserveDrawingBuffer: true
});
this.map.on("load", async () => {
this.map.on("style.load", async () => {
this.map.addSource("word-source", {
type: "geojson",
data: worldGeoJSON,
......@@ -300,6 +301,35 @@ export default {
this.drawMap(2);
}
},
// 绘制地图
async drawMap(type) {
console.log(type, "1初始化---- 2数据更新");
// 显示国家
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, // 可选：在地图边界周围添加一些内边距
});
if(this.countriesData&&this.countriesData.length>0&&this.countriesData.length==1){
this.map.setCenter(bounds.getCenter());
}
// 更新数据时再标记
if(type==2){
this.addMarker(); //标记
}
this.createLineHandler(); //连线
await this.addCountriesMaker(); //标记国家
//this.addDocumentEventListener();
},
// 组装数据
UpdateDatas(){
let listCity = [];
......@@ -337,6 +367,8 @@ export default {
this.citys = this.citys.filter(
x => this.citiesData.findIndex(y => y.name == x) == -1
);
// console.log(this.citys,'-----222')
// console.log(this.citiesData,'-----111')
this.countries = [...new Set(listCountries)];
this.clearCountriesMaker();
......@@ -372,7 +404,7 @@ export default {
// 清除已有源
ClearSource(Id,type){
if(type){
if(this.map.getLayer(Id)) {
if(this.map&&this.map.getLayer(Id)) {
this.map.removeLayer(Id);
if(type==2) this.map.removeSource(Id);
}
......@@ -397,30 +429,6 @@ export default {
}
},
// 绘制地图
async drawMap(type) {
console.log(type, "1初始化---- 2数据更新");
// 显示国家
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, // 可选：在地图边界周围添加一些内边距
});
if(this.countriesData&&this.countriesData.length>0&&this.countriesData.length==1){
this.map.setCenter(bounds.getCenter());
}
this.addMarker(); //标记
this.createLineHandler(); //连线
await this.addCountriesMaker(); //标记国家
//this.addDocumentEventListener();
},
// 保存标记坐标
SavePositionStr() {
this.TripMapList.forEach(x => {
......@@ -652,7 +660,7 @@ export default {
paintBgObj = that.paintHgBgObj
}
}
this.map.addLayer({
this.map&&this.map.addLayer({
id: "world-layer-" + x.MId,
type: "fill",
source: source,
......@@ -661,7 +669,7 @@ export default {
if(x.MId!=651&&x.MId!=891) {
that.ClearSource("mapLayer-" + x.MId,1)
that.ClearSource("mapLayerId-" + x.MId,1)
this.map.setPaintProperty("world-layer-" + x.MId, "fill-color",[
this.map&&this.map.setPaintProperty("world-layer-" + x.MId, "fill-color",[
"match",
["get", "NAME_ZH"],
x.name,
......@@ -670,13 +678,13 @@ export default {
]);
}else {
that.ClearSource("world-layer-" + x.MId,1)
this.map.addLayer({
this.map&&this.map.addLayer({
id: "mapLayer-"+ x.MId,
type: "fill",
source: source,
filter: ["==", "NAME_ZH", x.name],
});
this.map.addLayer({
this.map&&this.map.addLayer({
id: "mapLayerId-"+ x.MId,
type: "fill",
source: source,
......@@ -686,6 +694,29 @@ export default {
});
},
// 编辑国家和城市
async EditCountryCity(end){
const query = await fetch(
`https://api.mapbox.com/directions/v5/mapbox/cycling/${start[0]},${start[1]};${end[0]},${end[1]}?steps=true&geometries=geojson&access_token=${mapboxgl.accessToken}`,
{ method: 'GET' }
);
const json = await query.json();
const data = json.routes[0];
const route = data.geometry.coordinates;
const geojson = {
type: 'Feature',
properties: {},
geometry: {
type: 'LineString',
coordinates: route
}
};
this.countriesData.forEach((x, i) => {
if (this.map.getSource('world-layer-'+x.MId)) {
this.map.getSource('route').setData(geojson);
}
})
},
clearCitiesMarkersHandler() {
if (this.deviceMarkers && this.deviceMarkers.length > 0) {
this.deviceMarkers.forEach(x => {
......@@ -696,17 +727,16 @@ export default {
},
addMarker() {
// let markerColor = calculateComplementaryColor("#71adeb");
// console.log(this.citiesData,'----00')
this.citiesData.forEach((item, i) => {
var marker = new mapboxgl.Marker({ color: "#d73b33", scale: 0.5 })
.setLngLat([item.longitude, item.latitude])
.addTo(this.map);
console.log(item.Lng,'=====')
if (item.Lng && item.Lat) {
this.addLabel(item, i, item);
} else {
this.addLabel(item, i);
}
this.deviceMarkers.push(marker);
});
},
......@@ -729,6 +759,7 @@ export default {
let currentMarkerLngLat = marker.getLngLat();
that.citiesData[i].Lng = currentMarkerLngLat.lng;
that.citiesData[i].Lat = currentMarkerLngLat.lat;
that.SavePositionStr()
});
this.deviceMarkers.push(marker);
......@@ -746,7 +777,8 @@ export default {
const data = await response.json();
if (data.features.length > 0) {
const [longitude, latitude] = data.features[0].center;
this.citiesData.push({
let tempI = this.citiesData.findIndex(y=>y.name==cityName)
if(tempI==-1) this.citiesData.push({
name: cityName,
longitude,
latitude,
......@@ -771,6 +803,7 @@ export default {
},
createLineHandler() {
// let poilines = this.pois.split(",");
let that = this
this.listCity.forEach((p, i) => {
if (i < this.listCity.length - 1) {
let x = this.citiesData.find(x => x.name == p.MName);
......@@ -794,11 +827,11 @@ export default {
}
]
};
this.map.addSource("curve-source-" + p.MId, {
that.map&&that.map.addSource("curve-source-" + p.MId, {
type: "geojson",
data: geojson
});
this.map.addLayer({
that.map&&that.map.addLayer({
id: "curve-layer-" + p.MId,
type: "line",
source: "curve-source-" + p.MId,
......@@ -923,6 +956,7 @@ export default {
TripMapList = that.TripMapList.filter(y=> y.MName==x.MName)
TripMapList[0].Lng = currentMarkerLngLat.lng;
TripMapList[0].Lat = currentMarkerLngLat.lat;
that.SavePositionStr()
});
this.countriesMarkers.push(marker);
}
......
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