【Mapbox GL JS 入门】(5)Geography and geometry 地理和几何

简介

与处理和操纵地理信息或几何图形相关的通用实用程序和类型

LngLat

LngLat对象表示给定的经度和纬度坐标,以度为单位。这些坐标使用经度、纬度坐标顺序来匹配GeoJSON规范,该规范相当于OGC:CRS84坐标参考系统。

注意,任何接受LngLat对象作为参数或选项的Mapbox GL方法也可以接受两个数字的数组,并将执行隐式转换,为LngLatLike

参数

lng(number) 经度,以度为单位
lat(number) 纬度,以度为单位

const ll = new mapboxgl.LngLat(-123.9749, 40.7736);
console.log(ll.lng); // = -123.9749

静态成员

convert(input)
将两个数字的数组或具有lng和lat或lon和lat属性的对象转换为LngLat对象。如果传入了LngLat对象,则函数将其返回不变。

const arr = [-73.9749, 40.7736];
const ll = mapboxgl.LngLat.convert(arr);
console.log(ll);   // = LngLat {lng: -73.9749, lat: 40.7736}

实例成员

wrap()
返回一个新的LngLat对象,该对象的经度范围为(-180,180)

const ll = new mapboxgl.LngLat(286.0251, 40.7736);
const wrapped = ll.wrap();
console.log(wrapped.lng); // = -73.9749

toArray()
返回以两个数字的数组表示的坐标

const ll = new mapboxgl.LngLat(-73.9749, 40.7736);
ll.toArray(); // = [-73.9749, 40.7736]

toString()
返回以字符串表示的坐标

const ll = new mapboxgl.LngLat(-73.9749, 40.7736);
ll.toString(); // = "LngLat(-73.9749, 40.7736)"

distanceTo(LngLat)
返回一对坐标之间的近似距离(以米为单位)

const newYork = new mapboxgl.LngLat(-74.0060, 40.7128);
const losAngeles = new mapboxgl.LngLat(-118.2437, 34.0522);
newYork.distanceTo(losAngeles); // = 3935751.690893987, "true distance" using a non-spherical approximation is ~3966km

toBounds(radius)
根据给定半径延伸的坐标返回LngLatBounds。返回的LngLatBounds完全包含半径

const ll = new mapboxgl.LngLat(-73.9749, 40.7736);
ll.toBounds(100).toArray(); // = [[-73.97501862141328, 40.77351016847229], [-73.97478137858673, 40.77368983152771]]

LngLatBounds

LngLatBoundsLike

LngLatLike

MercatorCoordinate

Point

PointLike

### Mapbox GL JS 入门教程 Mapbox GL JS 是一个用于创建交互式矢量地图的强大工具库。以下是关于如何快速入门并掌握其基本功能的内容。 #### 安装与引入 为了使用 Mapbox GL JS,需要先将其集成到项目中。可以通过 CDN 或 npm 的方式安装: ```html <script src='https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js'></script> <link href='https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css' rel='stylesheet' /> ``` 或者通过 npm 进行本地管理: ```bash npm install mapbox-gl ``` 随后,在 JavaScript 文件中导入模块: ```javascript import * as mapboxgl from 'mapbox-gl'; ``` #### 初始化地图 初始化地图是最基础的操作之一。下面是一个简单的例子展示如何加载默认的地图样式以及设置中心位置缩放级别[^1]。 ```javascript // 替换为您的个人访问令牌 mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN'; const map = new mapboxgl.Map({ container: 'map', // HTML容器ID style: 'mapbox://styles/mapbox/streets-v12', // 地图样式 center: [-74.5, 40], // 初始视图坐标 [经度, 纬度] zoom: 9 // 缩放等级 }); ``` #### 添加标记 可以向地图添加自定义标记以便突出显示特定地点。这里提供了一个简单的方法来实现这一目标[^2]: ```javascript new mapboxgl.Marker() .setLngLat([-74.5, 40]) // 设置经纬度 .addTo(map); // 将标记添加至地图实例 ``` #### 处理事件 监听用户的互动行为(比如点击),能够增强用户体验。例如响应鼠标单击事件可按如下方式进行配置: ```javascript map.on('click', function(e) { console.log(e.lngLat); }); ``` #### 自定义样式层 除了预设好的模板外,还可以根据需求定制专属视觉效果。这通常涉及新增数据源及关联规则[^3]: ```javascript map.addSource('my-data-source-id', { type: 'geojson', data: {...} }); map.addLayer({ id: 'custom-layer', source: 'my-data-source-id', type: 'circle' }); ``` 以上就是有关于 **Mapbox GL JS Getting Started Tutorial** 的一些核心知识点介绍。希望这些资料能帮助您顺利开启学习之旅!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值