Mapbox 教程: 改变地图样式

最新推荐文章于 2025-05-24 08:37:38 发布

飘渺孤鸿

最新推荐文章于 2025-05-24 08:37:38 发布

阅读量2.1k

点赞数 6

CC 4.0 BY-SA版权

分类专栏： Mapbox GIS 文章标签：前端 Mapbox

本文链接：https://blog.youkuaiyun.com/pyluyuan/article/details/137666696

注：相关功能在Mapbox GL JS v3中可用。在新版本中，默认使用标准样式，在创建地图时，可以在构造函数中明确指定style option 设置指定样式，也可以不设置style option 从而使用默认样式。

本示例通过Mapbox加载了一份带三维白膜的地图。可以看到埃菲尔铁塔等建筑模型。可以看到Mapbox二三维展示效果还是非常赞的，也非常流畅。

本示例在地图上添加了一个点击交互界面，可以修改Mapbox地图标准样式的一些参数。另外这个示例也增加了一个自定义图层。对于GIS是什么的问题，其中一个答案是GIS就是数据库。我觉得Mapbox的架构师大概是这种说法的拥趸。在Mapbox中，要添加一个图层，需要首先addSource添加数据源，然后再addLayer添加图层，就像是数据库里面，先指定数据源，再指定表名和查询条件，来获取数据。

点击交互组件上与属性关联的按钮，调用setConfigPropety方法来修改属性关联的样式，basemap关键字指代标准样式。

*-emissive-strength样式的新属性，例如 line-emissive-strength,可以控制照射到模型上的光照强度。调整 line-emissive-strength属性，可以提高线的亮度，尤其是在更暗的光照设置下，会更加明显。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Change a map's style configuration property</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.