使用mapbox地图的一丢丢小心得

什么是快乐星球(介绍一下mapbox)...

Mapbox是一个基于云的地图平台，提供开发人员在他们的应用程序中集成地图，并提供各种地图样式、地图数据和地理编码服务。Mapbox的地图可用于各种应用程序、网站和移动应用中，包括路线规划、导航、地点搜索、位置定位、数据可视化等。

Mapbox以开源和透明度为基础，为开发人员提供了无限制的灵活性和个性化定制。Mapbox的API易于使用、精确和平滑，并支持多种开发语言和平台。此外，Mapbox还提供了开发人员工具和SDK，以便他们在开发地图应用程序时更轻松、更高效。

总体而言，Mapbox是一个基于云的地图平台，允许开发人员自定义地图和地理信息，并将其集成到其应用程序中，以提供优秀的地图体验。

怎么初始化一个mapbox地图呢？

1.首先你得在mapbox上获取一个apikey，类似于高德，腾讯地图的key。

mapbox官网：Examples | Mapbox GL JS | Mapbox

2.引入mapbox的css,js的cdn，如：

<script src='https://api.mapbox.com/mapbox-gl-js/v2.14.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.14.0/mapbox-gl.css' rel='stylesheet'/>

3.现在可以进入代码部分了，如：

3.1: 新建一个用来存放地图的容器(记住这个ID，要考)。

<div id='map' style='width: 100vw; height: 70vh;'></div>

3.2:实例化一个map对象。

 // 创建一个mapbox实例const map = new mapboxgl.Map({container: 'map', // container IDstyle: 'mapbox://styles/mapbox/streets-v12', // style URLcenter: arr,zoom: 18});

给各位靓仔解释一下：

container:就是我们上述要考的容器id了。

style: mapbox自定义程度极高，这个示例用的是官方的地图style，博主用的是公司根据mapbox制定的格式制作的style(这个就不方便展示了)。

center: 地图的中心点。

zoom: 地图层级。

到这一步就差不多可以实现地图了，下面介绍一些地图操作。

GEOJSON

前言：

想要搞一些地图骚操作就避免不了要介绍一下GEOJSON了

介绍：

GeoJSON是一种开放标准的地理信息数据交换格式，它允许将地理数据以JSON对象的形式进行编码和传输。 GeoJSON文件包含了表示地理空间数据的几何对象（如点、线、面等）和属性信息，可以用于描述不同的地理特征，例如位置、区域、建筑等。

GeoJSON的格式非常简洁，易于阅读和编写，也非常易于在Web和移动平台上处理和使用。GeoJSON的几何对象可以轻松地呈现在地图上，并且属性信息可以与地理空间数据进行联合查询和分析。

GeoJSON格式需要遵循一些规范。它使用一组预定义的关键字来描述不同类型的地理空间数据，例如经度和纬度用于表示点、线或面的坐标。GeoJSON文件还包含了用于描述属性数据的属性表，在属性表中可以包含任意类型的数据，例如文本、数字、日期等。

总的来说，GeoJSON是一种非常流行和有用的格式，广泛应用于Web应用程序和地理信息系统开发中，可以方便地进行存储、交换和使用各种类型的地理信息数据。

算了，chatGPT介绍的太官方了，总的来说，GeoJSON就是用来存放地理信息数据的，下面简单介绍一下格式。

{"type": "FeatureCollection","features": [{"type": "Feature","geometry": {"type": "Point","coordinates": [102.0, 0.5]},"properties": {"name": "Example Point","description": "This is an example GeoJSON point feature."}}]
}

解释：

"type" "Feature"表示一个特征要素，"FeatureCollection"表示为特征要素的集合。

"geometry"：存储该特征要素的实际形状描述。

"geometry -> type"：存储要素类型，分为：Point(点),LineString,Polygon,MultiPoint(多点),MultiLineString(多线)和MultiPolygon(多面)。

"coordinates "：坐标（存储图形坐标)。

"properties"：属性，用来存放自定义的属性，比如上述代码的name，description。

"features[0].type"：

"Point"：表示一个点，包含一个坐标对（longitude, latitude）。

"MultiPoint"：表示多个点，每个点包含一个坐标对。

"LineString"：表示一条线，包含多个坐标对。

"MultiLineString"：表示多条线，每条线包含多个坐标对。

"Polygon"：表示一个多边形，包含一个坐标对数组，第一个和最后一个坐标对相同。

"MultiPolygon"：表示多个多边形，每个多边形包含一个坐标对数组，第一个和最后一个坐标对相同。

"GeometryCollection"：表示多个几何对象的集合。

"Feature"：表示一个地理特征，包含一个 geometry 对象和一个 properties 对象。

"FeatureCollection"：表示多个地理特征的集合，每个特征包含一个 geometry 对象和一个 properties 对象。

可以看看官方怎么说。

正题

1.使用mapbox创建一个标记点。

function updateLoaction(map,url,lat = [],width=40,height=40) {const marker = geojson.features[0]const el = document.createElement('div');el.className = 'marker';el.style.backgroundImage = `url(${url})`el.style.width = `${width}px`;el.style.height = `${height}px`;el.style.backgroundSize = '100%';return new mapboxgl.Marker(el).setLngLat(lat.length ? lat : marker.geometry.coordinates).addTo(map);
}

不难看出啊，这是俺封装的一个新建marker标记点，简单介绍一下。

方法里的参数：

map(指上文的map对象，因为我把这个方法封装到别的js里面去了) url(marker的图片地址，也可以通过官方提供的loadImage方法将图片上传到map) ,lat(一个坐标数组，注意：mapbox里面使用的不是3857嗷，是使用的经纬度坐标，所以是一个数组) 后续的width和height就不多介绍了，dddd。

由此可见啊，上述方法还是mapbox对DOM元素进行了操作，有兴趣的朋友可以多研究研究，这次就不多介绍了，主打就是一个带你们简单瞅瞅mapbox和浅浅的了解一下。

return new mapboxgl.Marker(el).setLngLat(lat.length ? lat : marker.geometry.coordinates).addTo(map);
关键方法： el ： marker这个DOM元素。

setLngLat里面传入的是 marker的坐标。

map则是上文的map对象了。

2. 介绍一下一些常用的map方法。

2.1 load

map.on("load",(e)=>{// TODO})

是的，很熟悉，load方法=>load(加载)，这里的load方法是mapbox提供的地图加载完成之后的一个回调。

2.2 data

map.on("data",(e)=>{//TODO})

mapbox提供的数据源加载完成之后的回调

2.3 click

map.on("click",layerId,(e)=>{// TODO
})

图层点击事件，layerId是图层id，注意，id的意义是唯一性，不能重复了，获取图层的方法:map.getStyle().layer，e这个参数，你们自己摸索，很有意思的。

总结：滴，就到这里，摸鱼~

使用mapbox地图的一丢丢小心得相关推荐

在iOS中进行Mapbox地图开发杂谈
最近因项目需要,在app中要集成Mapbox,并且要能与苹果地图切换使用.从最早认识Mapbox到最终集成完毕,中间有一些断断续续,但总的时间也不算短了,关于这方面的资料其实是比较少的,能参考的基本都 ...
英语学习—每天进步一丢丢系列（一）
英语学习-每天进步一丢丢系列(一) 15岁觉得游泳难,放弃游泳,到18岁遇到一个你喜欢的人约你去游泳,你只好说我不会耶 18岁觉得英文难,放弃英文,28岁出现一个很棒但要会英文的工作,你只好说我不会耶 ...
vue中，应用mapbox地图（一）——mapbox-gl地图设置中文是zh-Hans不是zh accessToken-访问令牌正确版本streets-v11
vue中,应用mapbox地图(一)--mapbox-gl地图设置中文是zh-Hans不是zh & accessToken-访问令牌 & 正确版本streets-v11 Mapbox ...
mapbox中文地图_使用 Mapbox 地图
如果您可以访问 Mapbox 地图,则可以将其添加至您的工作簿,或者使用它们在 Tableau Desktop 中创建地图视图.有关特定于国家/地区的可用数据的列表,请参见支持的地图数据. 将使用 M ...
地图附近名片流量主小程序开发
地图附近名片流量主小程序开发会员后台数据导入功能已实现.会员资料表单自定义功能已实现.发帖功能已实现.积分功能实现,发帖需要积分,积分通过会员付费后台充值.回答问题.直接充值获得已实现.红包打赏功能 ...
vue中，应用mapbox地图——地图组件mapbox-gl和语言包@mapbox/mapbox-gl-language地图英文转中文 accesstokens-访问令牌移动端地图-leaflet
vue中,应用mapbox地图--地图组件mapbox-gl和语言包@mapbox/mapbox-gl-language用于将地图上的英文转中文 & accesstokens-访问令牌 &am ...
Python地理可视化：plotly绘制mapbox地图热力密度图
Python地理可视化:plotly绘制mapbox地图热力密度图 import plotly.graph_objects as go import numpy as npKEYS = ['中心点经纬 ...
使用cesium加载mapbox地图底色的办法
使用cesium加载mapbox地图底色的办法安装:vue-cli-plugin-cesium插件 vue-cli-plugin-cesium - npm 获取cesium的token: 申请ces ...
Python，地理地图可视化：plotly绘制mapbox地图城市中心点经纬度marker标记
Python地理地图可视化:plotly标记mapbox地图城市中心点经纬度marker import plotly.graph_objects as goKEYS = ['中心点经纬度', '维度' ...

使用mapbox地图的一丢丢小心得

什么是快乐星球(介绍一下mapbox)...

怎么初始化一个mapbox地图呢？

GEOJSON

正题

使用mapbox地图的一丢丢小心得相关推荐

最新文章

热门文章