144 lines
3.6 KiB
Markdown
144 lines
3.6 KiB
Markdown
# 深圳自然博物馆地图配置说明
|
||
|
||
## 地图中心坐标
|
||
|
||
当前使用的是示例坐标，需要替换为实际的深圳自然博物馆坐标。
|
||
|
||
### 如何获取实际坐标
|
||
|
||
1. **使用腾讯地图拾取坐标工具**
|
||
- 访问：https://lbs.qq.com/getPoint/
|
||
- 搜索"深圳自然博物馆"
|
||
- 点击地图上的建筑位置
|
||
- 复制经纬度坐标
|
||
|
||
2. **使用高德地图坐标拾取**
|
||
- 访问：https://lbs.amap.com/tools/picker
|
||
- 搜索并定位博物馆
|
||
- 获取坐标（需转换为 GCJ-02 坐标系）
|
||
|
||
## 建筑外围标记配置
|
||
|
||
在 `TencentMap.vue` 中的 `polygons` 数组配置建筑轮廓：
|
||
|
||
```typescript
|
||
const polygons = ref<Polygon[]>([
|
||
{
|
||
points: [
|
||
{ latitude: 22.5433, longitude: 114.0577 }, // 西北角
|
||
{ latitude: 22.5433, longitude: 114.0581 }, // 东北角
|
||
{ latitude: 22.5429, longitude: 114.0581 }, // 东南角
|
||
{ latitude: 22.5429, longitude: 114.0577 }, // 西南角
|
||
],
|
||
strokeWidth: 3,
|
||
strokeColor: '#E0E100', // 黄色边框
|
||
fillColor: '#E0E10020', // 半透明黄色填充
|
||
zIndex: 1
|
||
}
|
||
])
|
||
```
|
||
|
||
### 配置说明
|
||
|
||
- **points**: 建筑外围的坐标点数组（按顺时针或逆时针顺序）
|
||
- **strokeWidth**: 边框宽度（像素）
|
||
- **strokeColor**: 边框颜色（十六进制）
|
||
- **fillColor**: 填充颜色（十六进制，最后两位是透明度）
|
||
- **zIndex**: 层级（数值越大越在上层）
|
||
|
||
### 获取建筑轮廓坐标的方法
|
||
|
||
1. **手动标记**
|
||
- 在腾讯地图拾取坐标工具中
|
||
- 依次点击建筑的各个角点
|
||
- 记录每个点的经纬度
|
||
|
||
2. **使用卫星图**
|
||
- 在地图上切换到卫星视图
|
||
- 更清晰地看到建筑轮廓
|
||
- 标记关键点位
|
||
|
||
3. **简化轮廓**
|
||
- 如果建筑形状复杂，可以简化为矩形或多边形
|
||
- 只需标记主要的转角点
|
||
|
||
## 标记点配置
|
||
|
||
### 博物馆主标记
|
||
|
||
```typescript
|
||
{
|
||
id: 0,
|
||
latitude: 22.5431,
|
||
longitude: 114.0579,
|
||
iconPath: '/static/icons/marker-museum.png',
|
||
width: 40,
|
||
height: 40,
|
||
title: '深圳自然博物馆',
|
||
callout: {
|
||
content: '深圳自然博物馆',
|
||
display: 'ALWAYS', // 始终显示
|
||
bgColor: '#E0E100',
|
||
color: '#000000'
|
||
}
|
||
}
|
||
```
|
||
|
||
### 入口标记
|
||
|
||
```typescript
|
||
{
|
||
id: 1,
|
||
latitude: 22.5429,
|
||
longitude: 114.0579,
|
||
iconPath: '/static/icons/marker-entrance.png',
|
||
title: '主入口'
|
||
}
|
||
```
|
||
|
||
## 需要准备的图标
|
||
|
||
- `/static/icons/marker-museum.png` - 博物馆主标记（40x40px）
|
||
- `/static/icons/marker-entrance.png` - 入口标记（30x30px）
|
||
- `/static/icons/marker-hall.png` - 展厅标记（25x25px）
|
||
- `/static/icons/marker-exhibit.png` - 展品标记（25x25px）
|
||
|
||
## 坐标系说明
|
||
|
||
- **GCJ-02**: 国测局坐标系（火星坐标系）
|
||
- 腾讯地图、高德地图使用此坐标系
|
||
- GPS 原始坐标需要转换
|
||
|
||
## 调试建议
|
||
|
||
1. 先设置地图中心点
|
||
2. 调整缩放级别（scale: 18-20）
|
||
3. 添加建筑外围多边形
|
||
4. 微调多边形坐标点
|
||
5. 添加内部标记点
|
||
|
||
## 示例：矩形建筑
|
||
|
||
```typescript
|
||
// 假设建筑是一个矩形，长 100 米，宽 80 米
|
||
const centerLat = 22.5431
|
||
const centerLng = 114.0579
|
||
|
||
// 经纬度偏移量（约 1 度 ≈ 111 公里）
|
||
const latOffset = 0.00045 // 约 50 米
|
||
const lngOffset = 0.00036 // 约 40 米
|
||
|
||
const polygons = [{
|
||
points: [
|
||
{ latitude: centerLat + latOffset, longitude: centerLng - lngOffset },
|
||
{ latitude: centerLat + latOffset, longitude: centerLng + lngOffset },
|
||
{ latitude: centerLat - latOffset, longitude: centerLng + lngOffset },
|
||
{ latitude: centerLat - latOffset, longitude: centerLng - lngOffset },
|
||
],
|
||
strokeWidth: 3,
|
||
strokeColor: '#E0E100',
|
||
fillColor: '#E0E10020',
|
||
zIndex: 1
|
||
}]
|
||
```
|