初识Maptalks：离线/在线底图加载实战指南
目录
前言
在当今数字化时代，地理信息系统的应用愈发广泛，而地图作为地理信息的重要载体，其呈现方式与加载效率对于各类应用的用户体验起着至关重要的作用。Maptalks 作为一个强大的开源地图可视化库，凭借其灵活的架构与丰富的功能，为开发者提供了便捷的地图开发解决方案。无论是构建精美的在线地图应用，还是打造稳定可靠的离线地图环境，Maptalks 都能轻松应对。
对于许多初学者而言，地图开发往往因底图加载这一基础环节的复杂性而望而却步。在线底图加载看似简单，实则涉及网络请求、瓦片服务等诸多细节；离线底图加载更是需要面对数据存储、渲染优化等难题。然而，Maptalks 通过其简洁易懂的 API 设计，将这些复杂问题进行了有效封装，使得开发者能够以较低的学习成本快速上手。本文从最基础的 Maptalks 环境搭建讲起，逐步深入到在线底图加载的配置要点。通过详细的操作步骤与实例代码，读者可以清晰地看到每一个环节的实现过程，从而在实践中积累经验。
通过学习这些知识，读者不仅能够掌握离线底图加载的技术细节，还能了解到如何在不同设备上实现最佳的离线地图体验。读者将能够从理论到实践全方位地了解 Maptalks 在底图加载方面的强大能力，为后续深入探索地图开发的更多领域奠定坚实的基础。
一、Maptalks参数介绍
本节将对Maptalks的配置参数和选项参数进行详细介绍，受限于博主的英文水平，一些说明不是特别准确，在此恳请各位的原谅。
1、Map参数简介
首先来看一下Maptalks的Map对象的参数说明，见如下官网：Maptalks API地址：
与Leaflet、OpenLayers、Cesium等GIS类产品应用一致，Map是GIS的一个非常重要的核心类。通过文档中的方法来看一下Map对象有哪些属性和方法。首先来看一个最简单的例子：
var map = new maptalks.Map("map",{
center: [180,0],
zoom: 4,
baseLayer : new maptalks.TileLayer("base",{
urlTemplate:'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
subdomains:['a','b','c']
}),
layers : [
new maptalks.VectorLayer('v', [new maptalks.Marker([180, 0])])
]
});
| 参数 | 类型 | 描述 |
|---|---|---|
container |
String | HTMLElement | Object | 创建地图的容器，可以是： 1. 一个 HTMLElement 容器。 2. HTMLElement 容器的 ID。 3. 任何兼容 canvas 的容器 |
options |
Object | 构造选项 |
在构造选项中，我们可以设置的参数如下：
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
center |
Array.<Number> | 地图初始中心点。 | |
zoom |
Number | 地图初始缩放级别。 | |
spatialReference (可选) |
Object | null | 地图的空间参考，默认使用 EPSG:3857 投影和 Google/OSM 使用的分辨率。 |
baseLayer (可选) |
Layer | null | 初始设置到地图的底图图层。 |
layers (可选) |
Array.<Layer> | null | 初始添加到地图的图层。 |
* |
* | Map.options 中定义的任何其他选项 |
2、参数选项说明
配置属性信息也是非常丰富的，通过参数选项我们可以进行很多参数的定义。关于参数选项的说明如下：
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
centerCross (可选) |
Boolean | false | 在地图中心显示红色十字。 |
seamlessZoom (可选) |
Boolean | true | 是否使用无缝缩放模式。 |
zoomInCenter (可选) |
Boolean | false | 缩放时是否固定在中心。 |
zoomOrigin (可选) |
Number | null | 容器点中的缩放原点，例如 [400, 300]。 |
zoomAnimation (可选) |
Boolean | true | 启用缩放动画。 |
zoomAnimationDuration (可选) |
Number | 330 | 缩放动画持续时间。 |
panAnimation (可选) |
Boolean | true | 拖拽或触摸结束后继续执行平移动画。 |
panAnimationDuration (可选) |
Boolean | 600 | 平移动画持续时间。 |
rotateAnimation (可选) |
Boolean | true | 拖拽或触摸旋转结束后继续执行旋转动画。 |
rotateAnimationDuration (可选) |
Boolean | 800 | 旋转动画持续时间。 |
zoomable (可选) |
Boolean | true | 是否启用地图缩放。 |
enableInfoWindow (可选) |
Boolean | true | 是否在地图上启用信息窗口。 |
hitDetect (可选) |
Boolean | true | 是否在地图上启用图层点击检测以改变光标样式，禁用它可提高性能。 |
hitDetectLimit (可选) |
Boolean | 5 | 执行点击检测的最大图层数。 |
fpsOnInteracting (可选) |
Boolean | 25 | 地图交互时的帧率，当帧率较低时某些慢图层在交互时不会被绘制。设为 0 可禁用。 |
layerCanvasLimitOnInteracting (可选) |
Boolean | -1 | 交互时绘制的图层 canvas 限制，设置它以改善性能。 |
maxZoom (可选) |
Number | null | 地图可缩放到的最大级别。 |
minZoom (可选) |
Number | null | 地图可缩放到的最小级别。 |
maxExtent (可选) |
Extent | null | 设置 maxExtent 后，地图将限制在给定的最大范围内，当用户尝试平移出范围时会回弹。 |
fixCenterOnResize (可选) |
Boolean | true | 地图大小改变时是否固定地图中心。 |
maxPitch (可选) |
Number | 80 | 最大俯仰角。 |
maxVisualPitch (可选) |
Number | 70 | 可视的最大俯仰角。 |
viewHistory (可选) |
Extent | true | 是否记录视图历史。 |
viewHistoryCount (可选) |
Extent | 10 | 视图历史记录的数量。 |
draggable (可选) |
Boolean | true | 设为 false 可禁用地图拖拽。 |
dragPan (可选) |
Boolean | true | 如果为 true，地图可通过拖拽平移。 |
dragRotate (可选) |
Boolean | true | 默认为 true。如果为 true，地图可通过右键拖拽或 Ctrl+左键拖拽旋转。 |
dragPitch (可选) |
Boolean | true | 默认为 true。如果为 true，地图可通过右键拖拽或 Ctrl+左键拖拽俯仰。 |
dragRotatePitch (可选) |
Boolean | true | 如果为 true，地图在拖拽时同时俯仰和旋转。 |
switchDragButton (可选) |
Number | false | 切换使用左键（或移动端触摸）旋转地图，右键移动地图。 |
touchGesture (可选) |
Boolean | true | 是否允许通过双指触摸手势缩放/旋转/倾斜地图。 |
touchZoom (可选) |
Boolean | true | 是否允许通过触摸捏合缩放地图。 |
touchRotate (可选) |
Boolean | true | 是否允许通过触摸捏合旋转地图。 |
touchPitch (可选) |
Boolean | true | 是否允许通过触摸捏合俯仰地图。 |
touchZoomRotate (可选) |
Boolean | false | 如果为 true，地图可通过触摸捏合同时缩放和旋转。 |
doubleClickZoom (可选) |
Boolean | true | 是否允许通过双击事件缩放地图。 |
scrollWheelZoom (可选) |
Boolean | true | 是否允许通过滚轮事件缩放地图。 |
geometryEvents (可选) |
Boolean | true | 启用/禁用触发几何体事件。 |
clickTimeThreshold (可选) |
Number | 280 | mousedown(touchstart) 和 mouseup(touchend) 之间的时间阈值，用于判断是否为点击事件。 |
control (可选) |
Boolean | true | 是否允许地图添加控件。 |
attribution (可选) |
Boolean | Object | true | 是否在地图上显示归属控件。如果为 true，归属显示 maptalks 信息；如果为对象，可指定位置或基础内容，或两者都指定。 |
zoomControl (可选) |
Boolean | Object | false | 如果设为 true 或对象作为控件构造选项，则在地图上显示缩放控件。 |
scaleControl (可选) |
Boolean | Object | false | 如果设为 true 或对象作为控件构造选项，则在地图上显示比例尺控件。 |
overviewControl (可选) |
Boolean | Object | false | 如果设为 true 或对象作为控件构造选项，则在地图上显示鹰眼图控件。 |
fog (可选) |
Boolean | true | 是否在远处绘制雾效。 |
fogColor (可选) |
Array.<Number> | [233, 233, 233] | 雾的颜色：[r, g, b]。 |
renderer (可选) |
String | canvas | 渲染器类型。如果不确定，请不要更改。关于渲染器，参见 TODO。 |
devicePixelRatio (可选) |
Number | null | 设备像素比，覆盖设备的默认值。 |
heightFactor (可选) |
Number | 1 | 高度/高程计算的因子，这影响所有图层（vectortilelayer/gllayer/threelayer/3dtilelayer）的高度计算。 |
cameraInfiniteFar (可选) |
Boolean | false | 将相机远平面增加到无限远。启用此选项可能会降低地图性能。 |
stopRenderOnOffscreen (可选) |
Boolean | true | 当容器离屏时是否停止地图渲染。 |
originLatitudeForAltitude (可选) |
Boolean | 40 | map.altitudeToPoint 方法的默认纬度。 |
mousemoveThrottleTime (可选) |
Number | 48 | mousemove 事件间隔时间（毫秒）。 |
二、Maptalks加载在线底图
介绍完Maptalks的参数信息后，我们就基于Maptalks来做一个实践，根据不同的需要，我们分别接入在线底图和离线底图。首先是介绍如何加载在线底图。
1、接入参数及地址
在线底图比较简单，用户端不需要自己维护瓦片，采用的是访问别人的电子瓦片的机制。因此瓦片来源于第三方，但是第三方网站为了保证自己应用的可用性，通常会采用负载均衡来进行设置，将访问请求分散到不同的机器中，以此来保证性能。这里接入的地图是一个线上电子地图：
| 序号 | 瓦片地址 | 说明 |
| 1 | https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z} | 实例：https://webst01.is.autonavi.com/appmaptile?style=6&x=53340&y=27407&z=16 |
| 2 | subdomains | 可以根据负载情况进行合理设置 |
2、完整接入代码
在Maptalks中接入在线瓦片的方法比较简单，这里直接给出最小的一个实现代码，供大家参考。大家可以使用本地的电脑直接打开网页进行测试。
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Maptalks地图 - 显示-加载在线地图</title>
<style type="text/css">
html,body{margin:0px;height:100%;width:100%}
.container{width:100%;height:100%}
</style>
<link rel="stylesheet" href="https://unpkg.com/maptalks/dist/maptalks.css">
<script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>
<body>
<div id="map" class="container"></div>
<script>
var map = new maptalks.Map('map', {
center: [113.009491, 28.224021],
zoom: 15,
baseLayer: new maptalks.TileLayer('base', {
urlTemplate: "https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
subdomains: ["1", "2", "3", "4", "5"],
attribution: '© 加载在线瓦片'
})
});
</script>
</body>
</html>
3、在线底图加载展示
在自己的电脑上打开以后，在浏览器中可以看到如下地图结果，就说明程序是没有问题的：
同时在网络栏中可以看到瓦片的加载是没有问题的。
三、Maptalks加载离线底图
有的时候我们为了项目的具体使用，并不能访问在线的瓦片，因此需要将瓦片进行离线部署，在本地才能进行访问，因此我们这节重点讲讲如何在Maptalks中加载离线底图。
1、接入参数及地址
同样的，在本地我们需要准备准备离线瓦片，投影是3857的。瓦片我们使用NGINX来进行发布。参数地址如下：
| 序号 | 参数名 | 说明 |
| 1 | http://localhost:8086/data/basemap_water/{z}/{x}/{y}.png | 本地瓦片地址 |
| 2 | zoom | 访问地图等级，13 |
| 3 | center | 中心点坐标 |
| 4 | attribution | 地图属性配置 |
有了前面的在线例子基础之后，再来实现离线底图接入就比较简单了。
2、完整接入例子
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Maptalks地图 - 显示-加载离线地图</title>
<style type="text/css">
html,body{margin:0px;height:100%;width:100%}
.container{width:100%;height:100%}
</style>
<link rel="stylesheet" href="https://unpkg.com/maptalks/dist/maptalks.css">
<script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>
<body>
<div id="map" class="container"></div>
<script>
var map = new maptalks.Map('map', {
center: [112.93808, 28.22576],
zoom: 13,
baseLayer: new maptalks.TileLayer('base', {
urlTemplate: "http://localhost:8086/data/basemap_water/{z}/{x}/{y}.png",
attribution: '© 加载本地离线瓦片'
})
});
</script>
</body>
</html>
3、离线底图加载展示
可以在地址栏中看到，Maptalks成功的加载到了本地瓦片，大家可以将自己的网络暂时设置为不可用用来测试一下Maptalks服务的可靠性。请求基本是没问题的。
四、总结
以上就是本文的主要内容，本篇将详细的介绍Maptalks中的一个核心对象，即Map对象，通过介绍Map参数和选项的具体说明，相比大家对Maptalks的基本知识有了最基本的了解。接着通过两个实战案例，重点介绍如何使用Maptalks加载在线底图和离线底图，让想学习Maptalks的朋友更加容易入门。行文仓促，定有不足之处，欢迎各位朋友在评论区批评指正，不胜感激。
- 点赞
- 收藏
- 关注作者
评论（0）