皮皮网

1.《水经注地服务》发布的源码影像数据在MapBox中调用（仅墨卡托）
2.MapBox源码解读 01 - style 的加载逻辑
3.深入学习mapbox GL（二）
4.在 WebGL 中绘制地图（多边形篇）
5.用 Mapbox 做 3D 地图，这篇文章快说透了 （技术&案例大盘点）

《水经注地服务》发布的源码影像数据在MapBox中调用（仅墨卡托）

       MapBox作为一款开源地图开发平台，结合了百度、源码高德等互联网地图平台以及Arcgis、源码Supermap等企业级平台的源码特点，成为许多企业地图项目开发的源码网页源码怎么加歌基础。本文将介绍如何在MapBox中调用《水经注地图服务》发布的源码影像数据。首先，源码需要下载MapBox源码，源码可以通过访问MapBox官网，源码点击“Documentation\Mapbox GL js”进入页面，源码点击“Install”按钮，源码执行CMD命令“npm install mapbox-gl --save”进行下载。源码

       在下载完成后，源码若在CMD命令窗口中遇到缺少“package.json”文件、源码描述信息及“repository”字段等问题，可以通过执行“npm init -f”命令创建文件，或自行添加描述内容及“repository”字段。为避免警告信息，确保代码存放地点公开，产品视频介绍源码添加“private”字段并设置为“true”，以使代码在GitHub等平台上被正确识别。再次执行“npm install mapbox-gl --save”命令，问题即可解决。

       对于MapBox源码的本地离线部署，可以通过IIS进行网站配置。解压源码后，在Windows控制面板中打开“管理工具”，通过IIS网站管理器添加网站，设置网站名称、物理路径及端口号。完成配置后，MapBox源码在本地即完成离线部署。

       为了加载显示卫星影像，需要在MapBox源码目录中新建“SampleForMercator.html”页面文件，并在其中添加卫星影像与地名标签的加载代码。确保服务地址正确修改，IP地址为本机IP。通过关注公号“水经注GIS”并回复“MapBox”获取源码文件，健康证源码解压后在目录中已有“SampleForMercator.html”文件。打开提供的网址，即可显示加载本地影像的地图。

       综上所述，本文通过实例演示了如何在MapBox中调用《水经注地图服务》发布的影像数据，实现内网中离线地图的加载与显示。请注意，提供的数据仅作为示例，实际使用时需根据具体需求进行调整。

MapBox源码解读 - style 的加载逻辑

       本文主要聚焦于MapBox实例化过程中style的加载和渲染流程。这个过程涉及多个步骤：首先，从数据源发起请求获取style数据，然后通过解析将数据转化为可操作的结构。数据进一步根据属性进行赋值，接着进行着色器的计算，最终在屏幕上呈现图层。为了更直观地理解，这里有一个定制化线侧渲染的demo示例。

       style的台服分解机源码加载和渲染过程可以分解为：数据获取-解析-属性赋值-着色器执行。如果你对这个过程还感到困惑，可参考相关附件获取详细信息。

       通过上述步骤，创建mapbox对象时，源代码中添加source和layer的代码其实遵循这样的逻辑：数据驱动图层展现。现在，让我们通过一个简单的线单侧绘制的案例，实际演示这个过程。

       今天的讲解就到这里，额外提一个小贴士：在WebGL的web端调试中，Spector.js是一个非常实用的工具，适用于Firefox和Chrome，你可以自行下载并进行探索使用。

深入学习mapbox GL（二）

       深入学习mapbox GL（二）

       深入研究，我们从API参考和样式规范中获取了核心知识，并在学习过程中做了详细笔记。学习时，遵循文档结构，必要时查阅源代码以辅助理解，vs调试lib源码构建思维导图。在整理思维导图时，根据个人理解和实际需求，对不常用的功能进行简化。以下是从学习过程中整理的思维导图。

       ### 1. map

       #### 1.1 参数设置

       初始化map需要设置一些参数：

       javascript

       var map = new mapboxgl.Map({

       container: 'map', // 容器ID

       style: 'mapbox://styles/mapbox/streets-v', // 样式位置

       center: [-.5, ], // 初始位置 [经度，纬度]

       zoom: 9 // 初始缩放级别

       });

       #### 1.2 方法调用

       map可调用的方法包括：

       - `addSource`: 添加源

       - `addLayer`: 添加图层

       - `getCanvas`: 获取画布样式

       #### 1.3 事件绑定

       可绑定的事件包括：

       - `mouseenter`: 鼠标悬停

       - `click`: 鼠标点击

       - `mouseleave`: 鼠标离开

       ### 2. marker

       #### 2.1 初始化参数

       初始化marker需要设置一些参数：

       javascript

       const ele = document.createElement('div');

       ele.setAttribute('class', 'map-label');

       ele.innerHTML = r.name;

       const option = {

       element: ele,

       anchor: 'bottom',

       offset: [0, -]

       };

       const marker = new mapboxgl.Marker(option);

       #### 2.2 方法调用

       marker可调用的方法包括：

       - `setLngLat`: 设置经纬度

       - `addTo`: 添加到map

       #### 2.3 事件监听

       可监听的事件包括：

       - `dragend`: 完成拖拽后触发

       ### 3. popup

       #### 3.1 参数设置

       初始化popup需要设置一些参数：

       javascript

       var popup = new mapboxgl.Popup({

       closeButton: false,

       closeOnClick: false,

       className: 'my-popup',

       offset: [0, -],

       anchor: 'bottom'

       });

       #### 3.2 方法调用

       popup可调用的方法包括：

       - `setLngLat`: 设置经纬度

       - `setHTML`: 设置HTML内容

       - `addTo`: 添加到map

       #### 3.3 事件监听

       可监听的事件包括：

       - `open`: 弹窗打开时触发

       ### 4. source

       #### 4.1 地图源

       地图源在API参考和样式规范中均有提及，主要分为不同类型的源：

       - **GeoJSONSource**: JSON对象或文件URL

       - **ImageSource**: 图像源，需要URL和坐标

       - **VideoSource**: 视频源，需要URL和坐标

       - **CanvasSource**: Canvas源，需要canvas和坐标

       - **vector、raster和raster-dem**: 栅格或矢量切片或服务调用

       ### 5. layer

       图层在mapbox GL中非常重要，其类型包括但不限于：

       - **background**: 背景层

       - **fill**: 填充层

       - **line**: 线层

       - **symbol**: 符号层

       - **raster**: 栅格层

       - **circle**: 圆形层

       - **fill-extrusion**: 填充外扩层

       - **heatmap**: 热力图层

       - **hillshade**: 山影层

       深入理解layer配置参数对于掌握mapbox GL极为关键，官方的streets-v图层配置参数文档提供了详细的配置信息。

       以上内容为深入学习mapbox GL的第二部分，旨在提供核心组件的深入理解与实践方法。

在 WebGL 中绘制地图（多边形篇）

       在WebGL的世界里，描绘地理信息是一项有趣且实用的技能。近期，通过深入研究deck.gl源码，我掌握了在WebGL中绘制多边形的基础。这个过程包括数据格式处理、Tessellation与Triangulation，以及坐标系转换等步骤。

       首先，我们需要准备GeoJSON格式的数据，它以JSON形式定义了顶点坐标，如一个多边形的coordinates属性。除了多边形，GeoJSON还支持路径、散点等其他几何类型，具体细节可参考其TypeScript定义。

       在图形绘制中，关键步骤是将多边形分割成三角形。Tessellation和Triangulation技术将多边形分解为可绘制的基本形状。耳切法（ear clipping）是一种常用方法，通过不断移除构成“耳”的顶点，最终将多边形分割为多个三角形，实现这一过程的库如Mapbox的earcut。

       顶点坐标通常采用Web Mercator坐标系，需要经过一系列坐标转换，包括从Web Mercator到世界坐标，再到最终的裁剪坐标系。这些转换涉及到复杂的公式和矩阵计算，如在deck.gl的vertex shader中所示。

       最后，View矩阵和Projection矩阵的构建是关键，它们决定了摄像机的视角和投影效果。通过学习摄像机的移动原理，我们可以计算出这两个矩阵，结合Web Mercator和世界坐标系的差异，实现精确的映射。

       现在，我们已经能看到实际效果，如展示的美国地图示例，数据来自Natural Earth。接下来，我将分享更多内容，包括路径、散点的绘制，以及交互功能，如多边形边界描边和对象拾取。如果你对这些话题感兴趣，可以参考deck.gl的文档和源码，或者在文章下方留言交流。

用 Mapbox 做 3D 地图，这篇文章快说透了 （技术&案例大盘点）

       上篇介绍了 Mapbox Studio 2D 地图教程的受欢迎程度后，现在我们将深入探讨 3D 地图制作。无论是初学者还是高手，本文都将为你的项目带来灵感。让我们从几个启发性的案例开始，了解如何利用 Mapbox 创作3D地图：

       1. 数据可视化与3D地图：荷兰的年通勤动态图，通过Mapbox GL JS的custom layer API和着色器技术，呈现了半透明的时空效果，将通勤数据转化为艺术展示。源码分享，适合进一步分析，点击链接了解详情。

       2. 点云与3D地图：使用Mapbox与Uber的deck.gl工具，将倾斜摄影数据呈现得直观且互动。点击链接查看在线演示。

       3D地图制作方式多样：从伪3D展示到Three.js展示gltf格式模型，甚至使用custom layer API实现巴黎圣母院在地图上的重现。通过开源精神，Mapbox的灵活性取决于与之兼容的处理库。

       想尝试自己动手制作？这里有教程视频和示例代码，例如，将3D模型添加到地图，通过extrusions功能创建3D建筑效果，以及利用Deck.gl展示LIDAR数据。一步步教你实现，点击链接获取视频教程。

       对3D导航游戏或Unity应用感兴趣的开发者，Maps SDK for Unity提供了丰富的3D地图案例。例如，模拟城市、3D建筑数据可视化等，适合深入探索。《结界都市Return》等作品就展现了其潜力。

       最后，不容错过的还有Mapbox 3D地图设计大赛中的优秀作品，如《富有质感的3D城市版图》和《权利的游戏3D故事导览》。这些作品展示了Mapbox的强大功能和创意可能性。

       如果你想了解更多，别忘了关注我们的微信公众号，获取更多技术内容和教程。感谢你阅读至此，如果觉得有价值，请分享给你的朋友们！