mapvthree 的地理投影系统是二三维一体化架构的重要组成部分,其设计理念既不同于传统地图引擎的单一投影限制,也不同于需要手动处理投影转换的通用 3D 引擎。本文将从设计理念、支持能力、架构设计等角度,深入分析 mapvthree 投影系统的创新设计。 注: mapvthree 是 JSAPI Three(百度地图 JavaScript API Three)在代码中的命名空间。
mapvthree 投影系统的设计核心在于自动化与统一化:
传统地图引擎的投影特点:
mapvthree 投影系统的特点:
通用 3D 引擎的投影特点:
mapvthree 投影系统的特点:
mapvthree 支持多种主流投影方式,每种投影都有其特定的应用场景:
特点:
应用场景:
const engine = new mapvthree.Engine(container, {
map: {
projection: 'EPSG:3857', // 默认投影
center: [116, 39],
range: 2000,
},
});特点:
应用场景:
const engine = new mapvthree.Engine(container, {
map: {
projection: 'EPSG:4978', // ECEF 投影,地球模式
center: [116, 39],
pitch: 75,
range: 2000,
},
});特点:
应用场景:
特点:
应用场景:
特点:
支持的投影编码:
应用场景:
特点:
应用场景:
mapvthree 还支持通过 proj4 规范定义其他投影:
proj4 规范的投影参数定义mapvthree 的投影系统采用三层架构设计:
┌─────────────────────────────────────┐
│ 目标投影(Target Projection) │
│ 引擎初始化时确定,之后不可修改 │
└─────────────────────────────────────┘
↓ 自动转换
┌─────────────────────────────────────┐
│ 数据源投影(Source Projection) │
│ 每个数据源可以有自己的投影 │
└─────────────────────────────────────┘
↓ 自动转换
┌─────────────────────────────────────┐
│ 底图投影(Base Map Projection) │
│ 由 TileProvider 自动处理 │
└─────────────────────────────────────┘设计优势:
设计原则:初始化时确定,之后不可修改
// 目标投影只能在引擎初始化时设置
const engine = new mapvthree.Engine(container, {
map: {
projection: 'EPSG:4978', // 目标投影,初始化时确定
},
});
// 之后无法修改目标投影
// engine.map.projection = 'EPSG:3857'; // 不支持设计考虑:
设计原则:自动识别,支持声明
// 方式一:GeoJSON 中声明 CRS
const geoJson = {
type: 'FeatureCollection',
crs: {
type: 'name',
properties: {
name: 'EPSG:4326', // 声明数据源投影
},
},
features: [...],
};
const dataSource = mapvthree.GeoJSONDataSource.fromGeoJSON(geoJson);
// 引擎自动识别 CRS,并转换为目标投影
// 方式二:DataItem 中声明 CRS
const dataItem = {
geometry: {
type: 'Point',
coordinates: [116.404, 39.915],
},
properties: {
crs: 'EPSG:4326', // 声明投影
},
};设计优势:
设计原则:由 TileProvider 自动处理
// 底图投影由 TileProvider 自动处理
const engine = new mapvthree.Engine(container, {
map: {
projection: 'EPSG:4978', // 目标投影
provider: new mapvthree.BaiduVectorTileProvider(),
// TileProvider 内部自动处理底图投影转换
},
});设计优势:
mapvthree 提供了统一的坐标转换接口,无论使用什么投影,都使用相同的接口:
// 地理坐标 → 投影坐标(统一接口)
const position = engine.map.projectArrayCoordinate([lng, lat]);
mesh.position.set(position[0], position[1], position[2]);
// 投影坐标 → 地理坐标(统一接口)
const geoPos = engine.map.unprojectArrayCoordinate([x, y, z]);设计优势:
视野控制接口同样与投影无关:
// 无论使用什么投影,都使用地理坐标进行视野控制
engine.map.lookAt([116, 39], {
heading: 0,
pitch: 60,
range: 2000,
});
engine.map.flyTo([116, 39], {
heading: 0,
pitch: 60,
range: 2000,
});设计优势:
推荐投影:EPSG:3857(Web 墨卡托)
const engine = new mapvthree.Engine(container, {
map: {
projection: 'EPSG:3857', // Web 墨卡托投影
provider: new mapvthree.BaiduVectorTileProvider(),
},
});适用场景:
推荐投影:EPSG:4978(ECEF)
const engine = new mapvthree.Engine(container, {
map: {
projection: 'EPSG:4978', // ECEF 投影
pitch: 75,
range: 2000,
},
});适用场景:
多投影数据源的自动处理:
const engine = new mapvthree.Engine(container, {
map: {
projection: 'EPSG:4978', // 目标投影
},
});
// 数据源 1:WGS84 投影
const geoJson1 = {
crs: { properties: { name: 'EPSG:4326' } },
features: [...],
};
// 数据源 2:UTM 投影
const geoJson2 = {
crs: { properties: { name: 'EPSG:32650' } },
features: [...],
};
// 引擎自动将所有数据源转换为目标投影
const dataSource1 = mapvthree.GeoJSONDataSource.fromGeoJSON(geoJson1);
const dataSource2 = mapvthree.GeoJSONDataSource.fromGeoJSON(geoJson2);适用场景:
mapvthree 的地理投影系统通过自动化转换机制和统一接口设计,实现了多投影支持与数据一致性,为二三维一体化场景提供了灵活的投影解决方案。
核心设计特点:
这种设计使得 mapvthree 能够适应从传统二维地图到复杂三维场景的各种需求,为开发者提供了一个既强大又灵活的地理投影解决方案。通过自动化的投影转换机制,开发者可以专注于业务逻辑,而无需关心复杂的投影转换细节。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。