|
|
|
|
@ -100,7 +100,12 @@ export default {
|
|
|
|
|
version: '2.0',
|
|
|
|
|
plugins: [
|
|
|
|
|
'AMap.Scale',
|
|
|
|
|
<<<<<<< HEAD
|
|
|
|
|
'AMap.ToolBar',
|
|
|
|
|
'AMap.ControlBar',
|
|
|
|
|
=======
|
|
|
|
|
'AMap.ToolBar',
|
|
|
|
|
>>>>>>> 999104f0d0174d3a3870682fb7163d95bc623970
|
|
|
|
|
'AMap.InfoWindow',
|
|
|
|
|
'AMap.Marker',
|
|
|
|
|
'AMap.Polyline',
|
|
|
|
|
@ -114,7 +119,11 @@ export default {
|
|
|
|
|
'AMap.TileLayer.Satellite',
|
|
|
|
|
'AMap.TileLayer.Traffic',
|
|
|
|
|
'AMap.TileLayer.RoadNet',
|
|
|
|
|
<<<<<<< HEAD
|
|
|
|
|
'AMap.Buildings',
|
|
|
|
|
=======
|
|
|
|
|
'AMap.BuildingLayer',
|
|
|
|
|
>>>>>>> 999104f0d0174d3a3870682fb7163d95bc623970
|
|
|
|
|
'AMap.DistrictLayer',
|
|
|
|
|
'AMap.Weather',
|
|
|
|
|
'AMap.Driving'
|
|
|
|
|
@ -127,8 +136,13 @@ export default {
|
|
|
|
|
mapInstance.value = new AMap.Map('sharedMap', {
|
|
|
|
|
zoom: 11,
|
|
|
|
|
center: [116.397428, 39.90923],
|
|
|
|
|
<<<<<<< HEAD
|
|
|
|
|
viewMode: viewMode.value,
|
|
|
|
|
pitch: viewMode.value === '3D' ? 45 : 0,
|
|
|
|
|
=======
|
|
|
|
|
viewMode: '3D',
|
|
|
|
|
pitch: 0,
|
|
|
|
|
>>>>>>> 999104f0d0174d3a3870682fb7163d95bc623970
|
|
|
|
|
rotation: 0,
|
|
|
|
|
mapStyle: 'amap://styles/normal',
|
|
|
|
|
features: ['bg', 'road', 'building', 'point'],
|
|
|
|
|
@ -158,9 +172,26 @@ export default {
|
|
|
|
|
right: '10px'
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
<<<<<<< HEAD
|
|
|
|
|
|
|
|
|
|
// 添加3D控制条，用于控制3D视图的旋转、倾斜等
|
|
|
|
|
const controlBar = new AMap.ControlBar({
|
|
|
|
|
position: {
|
|
|
|
|
top: '80px',
|
|
|
|
|
right: '10px'
|
|
|
|
|
},
|
|
|
|
|
showZoomBar: false,
|
|
|
|
|
showControlButton: true
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
mapInstance.value.addControl(toolbar)
|
|
|
|
|
mapInstance.value.addControl(scale)
|
|
|
|
|
mapInstance.value.addControl(controlBar)
|
|
|
|
|
=======
|
|
|
|
|
|
|
|
|
|
mapInstance.value.addControl(toolbar)
|
|
|
|
|
mapInstance.value.addControl(scale)
|
|
|
|
|
>>>>>>> 999104f0d0174d3a3870682fb7163d95bc623970
|
|
|
|
|
|
|
|
|
|
// 添加地图事件监听
|
|
|
|
|
mapInstance.value.on('click', (e) => {
|
|
|
|
|
@ -186,7 +217,11 @@ export default {
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 预初始化建筑图层
|
|
|
|
|
<<<<<<< HEAD
|
|
|
|
|
layerInstances.value.buildings = new window.AMap.Buildings({
|
|
|
|
|
=======
|
|
|
|
|
layerInstances.value.buildings = new window.AMap.BuildingLayer({
|
|
|
|
|
>>>>>>> 999104f0d0174d3a3870682fb7163d95bc623970
|
|
|
|
|
zIndex: 11,
|
|
|
|
|
heightFactor: viewMode.value === '3D' ? 1 : 0.6
|
|
|
|
|
});
|
|
|
|
|
@ -321,6 +356,58 @@ export default {
|
|
|
|
|
const changeMapStyle = (style) => {
|
|
|
|
|
if (!mapInstance.value) return
|
|
|
|
|
|
|
|
|
|
<<<<<<< HEAD
|
|
|
|
|
try {
|
|
|
|
|
currentMapStyle.value = style
|
|
|
|
|
|
|
|
|
|
switch (style) {
|
|
|
|
|
case 'satellite':
|
|
|
|
|
// 使用卫星图层
|
|
|
|
|
if (!layerInstances.value.satellite) {
|
|
|
|
|
layerInstances.value.satellite = new window.AMap.TileLayer.Satellite({
|
|
|
|
|
zIndex: 9
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 添加卫星图层
|
|
|
|
|
mapInstance.value.add(layerInstances.value.satellite)
|
|
|
|
|
|
|
|
|
|
// 确保其他已启用的图层在卫星图层之上显示
|
|
|
|
|
updateOverlayLayers()
|
|
|
|
|
break
|
|
|
|
|
|
|
|
|
|
case 'dark':
|
|
|
|
|
// 移除卫星图层
|
|
|
|
|
if (layerInstances.value.satellite) {
|
|
|
|
|
mapInstance.value.remove(layerInstances.value.satellite)
|
|
|
|
|
}
|
|
|
|
|
// 设置暗色地图
|
|
|
|
|
mapInstance.value.setMapStyle('amap://styles/dark')
|
|
|
|
|
|
|
|
|
|
// 确保其他已启用的图层在暗色地图上正确显示
|
|
|
|
|
updateOverlayLayers()
|
|
|
|
|
break
|
|
|
|
|
|
|
|
|
|
default:
|
|
|
|
|
// 移除卫星图层
|
|
|
|
|
if (layerInstances.value.satellite) {
|
|
|
|
|
mapInstance.value.remove(layerInstances.value.satellite)
|
|
|
|
|
}
|
|
|
|
|
// 设置默认地图样式
|
|
|
|
|
mapInstance.value.setMapStyle('amap://styles/normal')
|
|
|
|
|
|
|
|
|
|
// 确保其他已启用的图层在标准地图上正确显示
|
|
|
|
|
updateOverlayLayers()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
console.log(`已切换到${style}地图样式`)
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error('切换地图样式失败:', error)
|
|
|
|
|
ElMessage.error(`切换地图样式失败: ${error.message}`)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
=======
|
|
|
|
|
switch (style) {
|
|
|
|
|
case 'satellite':
|
|
|
|
|
// 使用卫星图层
|
|
|
|
|
@ -367,11 +454,25 @@ export default {
|
|
|
|
|
return layers
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
>>>>>>> 999104f0d0174d3a3870682fb7163d95bc623970
|
|
|
|
|
// 切换视图模式
|
|
|
|
|
const changeViewMode = (mode) => {
|
|
|
|
|
if (!mapInstance.value) return
|
|
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
<<<<<<< HEAD
|
|
|
|
|
// 设置视图模式 - 使用正确的API方法
|
|
|
|
|
if (mode === '3D') {
|
|
|
|
|
// 设置为3D视图
|
|
|
|
|
mapInstance.value.setViewMode('3D');
|
|
|
|
|
mapInstance.value.setPitch(45); // 设置俯仰角(3D效果)
|
|
|
|
|
console.log('已切换到3D视图模式');
|
|
|
|
|
} else {
|
|
|
|
|
// 设置为2D视图
|
|
|
|
|
mapInstance.value.setViewMode('2D');
|
|
|
|
|
mapInstance.value.setPitch(0); // 平面视图
|
|
|
|
|
console.log('已切换到2D视图模式');
|
|
|
|
|
=======
|
|
|
|
|
// 设置视图模式
|
|
|
|
|
mapInstance.value.setViewMode(mode)
|
|
|
|
|
|
|
|
|
|
@ -385,6 +486,7 @@ export default {
|
|
|
|
|
}, 100)
|
|
|
|
|
} else {
|
|
|
|
|
mapInstance.value.setPitch(0) // 平面视图
|
|
|
|
|
>>>>>>> 999104f0d0174d3a3870682fb7163d95bc623970
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 重新加载建筑层以确保它在视图模式变化后正常显示
|
|
|
|
|
@ -392,7 +494,11 @@ export default {
|
|
|
|
|
if (layerInstances.value.buildings) {
|
|
|
|
|
mapInstance.value.remove(layerInstances.value.buildings)
|
|
|
|
|
}
|
|
|
|
|
<<<<<<< HEAD
|
|
|
|
|
layerInstances.value.buildings = new window.AMap.Buildings({
|
|
|
|
|
=======
|
|
|
|
|
layerInstances.value.buildings = new window.AMap.BuildingLayer({
|
|
|
|
|
>>>>>>> 999104f0d0174d3a3870682fb7163d95bc623970
|
|
|
|
|
zIndex: 10,
|
|
|
|
|
// 在3D模式下加强建筑物外观
|
|
|
|
|
heightFactor: mode === '3D' ? 1 : 0.6
|
|
|
|
|
@ -404,8 +510,11 @@ export default {
|
|
|
|
|
if (currentMapStyle.value === 'satellite') {
|
|
|
|
|
changeMapStyle('satellite')
|
|
|
|
|
}
|
|
|
|
|
<<<<<<< HEAD
|
|
|
|
|
=======
|
|
|
|
|
|
|
|
|
|
console.log(`已切换到${mode}视图模式`)
|
|
|
|
|
>>>>>>> 999104f0d0174d3a3870682fb7163d95bc623970
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error('切换视图模式失败:', error)
|
|
|
|
|
ElMessage.error(`切换到${mode}视图失败: ${error.message}`)
|
|
|
|
|
@ -416,6 +525,198 @@ export default {
|
|
|
|
|
const updateOverlayLayers = () => {
|
|
|
|
|
if (!mapInstance.value || !window.AMap) return
|
|
|
|
|
|
|
|
|
|
<<<<<<< HEAD
|
|
|
|
|
try {
|
|
|
|
|
console.log('更新图层状态:', overlayLayers.value)
|
|
|
|
|
|
|
|
|
|
// 交通流量图层
|
|
|
|
|
if (overlayLayers.value.includes('traffic')) {
|
|
|
|
|
if (!layerInstances.value.traffic) {
|
|
|
|
|
layerInstances.value.traffic = new window.AMap.TileLayer.Traffic({
|
|
|
|
|
zIndex: 10,
|
|
|
|
|
opacity: 0.8
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
mapInstance.value.add(layerInstances.value.traffic)
|
|
|
|
|
console.log('已添加交通流量图层')
|
|
|
|
|
} else if (layerInstances.value.traffic) {
|
|
|
|
|
mapInstance.value.remove(layerInstances.value.traffic)
|
|
|
|
|
console.log('已移除交通流量图层')
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 建筑物图层
|
|
|
|
|
if (overlayLayers.value.includes('buildings')) {
|
|
|
|
|
if (!layerInstances.value.buildings) {
|
|
|
|
|
layerInstances.value.buildings = new window.AMap.Buildings({
|
|
|
|
|
zIndex: 11,
|
|
|
|
|
heightFactor: viewMode.value === '3D' ? 1 : 0.6
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
mapInstance.value.add(layerInstances.value.buildings)
|
|
|
|
|
console.log('已添加建筑物图层')
|
|
|
|
|
} else if (layerInstances.value.buildings) {
|
|
|
|
|
mapInstance.value.remove(layerInstances.value.buildings)
|
|
|
|
|
console.log('已移除建筑物图层')
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 地形图层
|
|
|
|
|
if (overlayLayers.value.includes('terrain')) {
|
|
|
|
|
if (!layerInstances.value.terrain) {
|
|
|
|
|
// 等高线图层
|
|
|
|
|
layerInstances.value.terrain = new window.AMap.TileLayer({
|
|
|
|
|
zIndex: 8,
|
|
|
|
|
getTileUrl: function(x, y, z) {
|
|
|
|
|
return 'https://webst04.is.autonavi.com/appmaptile?style=6&x=' + x + '&y=' + y + '&z=' + z
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
mapInstance.value.add(layerInstances.value.terrain)
|
|
|
|
|
console.log('已添加地形图层')
|
|
|
|
|
} else if (layerInstances.value.terrain) {
|
|
|
|
|
mapInstance.value.remove(layerInstances.value.terrain)
|
|
|
|
|
console.log('已移除地形图层')
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 天气图层
|
|
|
|
|
if (overlayLayers.value.includes('weather')) {
|
|
|
|
|
// 显示天气信息
|
|
|
|
|
showWeatherInfo()
|
|
|
|
|
} else {
|
|
|
|
|
// 隐藏天气信息
|
|
|
|
|
hideWeatherInfo()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 威胁区域图层
|
|
|
|
|
if (overlayLayers.value.includes('threats')) {
|
|
|
|
|
// 威胁区域图层处理逻辑
|
|
|
|
|
console.log('威胁区域图层暂未实现')
|
|
|
|
|
}
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error('更新图层失败:', error)
|
|
|
|
|
ElMessage.error(`更新图层失败: ${error.message}`)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 显示天气信息
|
|
|
|
|
const showWeatherInfo = () => {
|
|
|
|
|
if (!mapInstance.value || !window.AMap) return
|
|
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
// 如果已有天气信息标记，先清除
|
|
|
|
|
if (layerInstances.value.weatherMarkers && layerInstances.value.weatherMarkers.length > 0) {
|
|
|
|
|
layerInstances.value.weatherMarkers.forEach(marker => {
|
|
|
|
|
mapInstance.value.remove(marker)
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 初始化天气标记数组
|
|
|
|
|
layerInstances.value.weatherMarkers = []
|
|
|
|
|
|
|
|
|
|
// 创建天气查询服务（如果不存在）
|
|
|
|
|
if (!layerInstances.value.weatherService) {
|
|
|
|
|
layerInstances.value.weatherService = new window.AMap.Weather()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 主要城市天气信息
|
|
|
|
|
const cities = [
|
|
|
|
|
{ name: '北京', position: [116.397428, 39.90923] },
|
|
|
|
|
{ name: '上海', position: [121.473667, 31.230525] },
|
|
|
|
|
{ name: '广州', position: [113.264385, 23.129112] },
|
|
|
|
|
{ name: '深圳', position: [114.057868, 22.543099] },
|
|
|
|
|
{ name: '成都', position: [104.065735, 30.659462] }
|
|
|
|
|
]
|
|
|
|
|
|
|
|
|
|
// 查询每个城市的天气
|
|
|
|
|
cities.forEach(city => {
|
|
|
|
|
layerInstances.value.weatherService.getLive(city.name, (err, data) => {
|
|
|
|
|
if (!err && data) {
|
|
|
|
|
// 创建天气信息内容
|
|
|
|
|
const weatherInfo = `
|
|
|
|
|
<div style="padding: 8px; text-align: center;">
|
|
|
|
|
<h4 style="margin: 0 0 5px 0;">${city.name}天气</h4>
|
|
|
|
|
<p style="margin: 3px 0;">天气: ${data.weather}</p>
|
|
|
|
|
<p style="margin: 3px 0;">温度: ${data.temperature}°C</p>
|
|
|
|
|
<p style="margin: 3px 0;">风向: ${data.windDirection}</p>
|
|
|
|
|
<p style="margin: 3px 0;">风力: ${data.windPower}</p>
|
|
|
|
|
<p style="margin: 3px 0;">湿度: ${data.humidity}%</p>
|
|
|
|
|
</div>
|
|
|
|
|
`
|
|
|
|
|
|
|
|
|
|
// 创建天气图标
|
|
|
|
|
const weatherIcon = getWeatherIcon(data.weather)
|
|
|
|
|
|
|
|
|
|
// 创建标记
|
|
|
|
|
const marker = new window.AMap.Marker({
|
|
|
|
|
position: city.position,
|
|
|
|
|
content: `<div class="weather-marker">${weatherIcon}</div>`,
|
|
|
|
|
offset: new window.AMap.Pixel(-15, -15),
|
|
|
|
|
zIndex: 120,
|
|
|
|
|
title: `${city.name}天气: ${data.weather}, ${data.temperature}°C`
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// 创建信息窗体
|
|
|
|
|
const infoWindow = new window.AMap.InfoWindow({
|
|
|
|
|
content: weatherInfo,
|
|
|
|
|
offset: new window.AMap.Pixel(0, -30)
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// 绑定点击事件
|
|
|
|
|
marker.on('click', () => {
|
|
|
|
|
infoWindow.open(mapInstance.value, city.position)
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// 添加到地图
|
|
|
|
|
mapInstance.value.add(marker)
|
|
|
|
|
|
|
|
|
|
// 保存标记引用
|
|
|
|
|
layerInstances.value.weatherMarkers.push(marker)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
console.log('已添加天气信息图层')
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error('天气图层添加失败:', error)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 隐藏天气信息
|
|
|
|
|
const hideWeatherInfo = () => {
|
|
|
|
|
if (!mapInstance.value) return
|
|
|
|
|
|
|
|
|
|
// 移除所有天气标记
|
|
|
|
|
if (layerInstances.value.weatherMarkers && layerInstances.value.weatherMarkers.length > 0) {
|
|
|
|
|
layerInstances.value.weatherMarkers.forEach(marker => {
|
|
|
|
|
mapInstance.value.remove(marker)
|
|
|
|
|
})
|
|
|
|
|
layerInstances.value.weatherMarkers = []
|
|
|
|
|
console.log('已移除天气信息图层')
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 获取天气图标
|
|
|
|
|
const getWeatherIcon = (weather) => {
|
|
|
|
|
// 根据天气状况返回不同的图标
|
|
|
|
|
const icons = {
|
|
|
|
|
'晴': '<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="#FFB800"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>',
|
|
|
|
|
'多云': '<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="#82B1FF"><path d="M19 18H6a4 4 0 0 1-4-4c0-2.21 1.79-4 4-4h.71C7.37 7.69 9.5 6 12 6c3.04 0 5.5 2.46 5.5 5.5v.5H19a3 3 0 0 1 3 3 3 3 0 0 1-3 3z"/></svg>',
|
|
|
|
|
'阴': '<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="#78909C"><path d="M19 18H6a4 4 0 0 1-4-4c0-2.21 1.79-4 4-4h.71C7.37 7.69 9.5 6 12 6c3.04 0 5.5 2.46 5.5 5.5v.5H19a3 3 0 0 1 3 3 3 3 0 0 1-3 3z"/></svg>',
|
|
|
|
|
'雨': '<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="#4FC3F7"><path d="M19 16H6a4 4 0 0 1-4-4c0-2.21 1.79-4 4-4h.71C7.37 5.69 9.5 4 12 4c3.04 0 5.5 2.46 5.5 5.5v.5H19a3 3 0 0 1 3 3 3 3 0 0 1-3 3z"/><path d="M8 19v3M12 19v3M16 19v3" stroke="#4FC3F7" stroke-width="2"/></svg>',
|
|
|
|
|
'雪': '<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="#E1F5FE"><path d="M19 16H6a4 4 0 0 1-4-4c0-2.21 1.79-4 4-4h.71C7.37 5.69 9.5 4 12 4c3.04 0 5.5 2.46 5.5 5.5v.5H19a3 3 0 0 1 3 3 3 3 0 0 1-3 3z"/><circle cx="8" cy="20" r="1"/><circle cx="12" cy="20" r="1"/><circle cx="16" cy="20" r="1"/></svg>'
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 匹配天气关键词
|
|
|
|
|
for (const key in icons) {
|
|
|
|
|
if (weather.includes(key)) {
|
|
|
|
|
return icons[key]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 默认图标
|
|
|
|
|
return '<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="#64B5F6"><circle cx="12" cy="12" r="10" fill-opacity="0.7"/><text x="12" y="16" text-anchor="middle" fill="white" font-size="10">天气</text></svg>'
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
=======
|
|
|
|
|
// 交通流量图层
|
|
|
|
|
if (overlayLayers.value.includes('traffic')) {
|
|
|
|
|
if (!layerInstances.value.traffic) {
|
|
|
|
|
@ -510,6 +811,7 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
>>>>>>> 999104f0d0174d3a3870682fb7163d95bc623970
|
|
|
|
|
// 提供地图实例给子组件
|
|
|
|
|
provide('mapInstance', mapInstance)
|
|
|
|
|
|
|
|
|
|
|
