theme: jzman
相关源码和模型的下载链接地址点击链接进行跳转
前言
本文通过百度地图api实现一个地球地图模型,通过运用精确的Haversine公式
和Vincenty公式
,系统能够迅速计算出这两个坐标点之间的实际距离。文中力求使用专业的地理和数学的术语解释计算原理,如有失误,请指正,谢谢
技术栈
- typescript
- 百度地图api
- vite
加载地图
获取应用AK
需要实现加载百度地图提供的地图服务api,首先需要创建一个属于自己的应用AK,在百度地图开放平台--控制台--我的应用
创建地球
```html // 引入文档
// 地图服务容器
``` 在引入对应的map服务后,就该创建一个地图实例,
ts // GL版命名空间为BMapGL var map_earth = new BMapGL.Map("allmap"); // 创建Map实例 map_earth.centerAndZoom(new BMapGL.Point(116.40396298757886, 39.91511908708907), 5); // 初始化地图,设置中心点坐标和地图级别
当前center设置的是北京天安门的经纬坐标,缩放级别为5,当然,这创建的是普通的2维平面地图,我们要创建的是一个地球的效果,所以需要修改一下地图的风格
typescript map_earth.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 map_earth.setMapType(BMAP_EARTH_MAP); // 设置地图类型为地球模式
这样我们就创建好了一个基础的地球地图模型
拾取经纬坐标
通过点击地球某个点位,拾取到经纬坐标,并记录这些坐标。
typescript // 点击获取经纬度 map_earth.addEventListener('click', function (e) {