GIS之自定义暗黑系地图

1.前言

在大屏展示系统中，多以蓝色背景为主，显的比较高大上，所以将地图嵌入进去的时候，就要比较偏黑色，比如高德地图的极夜蓝地图，arcgis的午夜蓝地图。

可以实现自定地图样式的地图：

• 高德地图
  高德自定义地图样式，提供了多种地图风格，比如：幻影黑、月光银、极夜蓝等等风格

• 百度地图
  百度地图自定义地图样式，可以根据自己的喜好，不同的主题，定义不同的道路，水系等的地图风格。

• 谷歌地图

• MapBox地图

• [Basemaps]
  Basemaps也提供了一些黑色系地图，但是我在官方地址上没有找到哪里说明样式的地方，只是在一些地图引擎上看到如何使用，比如maptalks中引入地图 ：https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png,这个light_all模式就是地图的样式，黑色的。

使用百度或者是高德的地图，可以是可以实现自定义地图样式，但是因为这两者的坐标系，一个是火星坐标系——GCJ-02：中国国内使用的被强制加密后的坐标体系，高德坐标就属于该种坐标体系。 百度坐标系——BD-09：百度地图所使用的坐标体系，是在火星坐标系的基础上又进行了一次加密处理。而我们自己生产的坐标系，通常是地球坐标系——WGS84：常见于 GPS 设备，Google 地图等国际标准的坐标体系。同时使用他们的地图API不够灵活，不如OpenLayer、Leftlet等单纯的地图引擎来的较为灵活。使用ArcGIS提供的午夜蓝地图，在大尺度上，可以满足要求，但是在小尺度，比如一个厂区，一条街道上，就显的力不从心了。

于是我提出了，如何使用公共数据，生产自己的样式地图，如果可以的，还可以做成矢量切片的形式，类似于Mapbox中的pbf进行加载。我这里说的自定义地图，不是自己矢量化，然后进行发布,自己矢量化，其实人工成本也是很高的，一条路一幢房子，都是要自己一点点的手工绘制。而是使用商业的地图，进行自定义样式，类似于现在的高德、百度地图，可以自定义地图的样式，毕竟他们的使用的也是矢量切片的技术。

2.数据获取

数据获取的方式很多，有些是需要自己手动矢量化的，但是工作量太大了，唯一能借助的就是OpenStreetMap的数据了，可以从管网上导出.osm格式的数据和pbf格式的数据，如果使用范围下载的话，范围是有限制的，最大只能下载5000个节点，当然，还有就是提供了全国(中国全国的矢量数据 这里没有台湾，甚至在地图上，中国的范围边界中，没有向其他的中国地图一样，把台湾包裹进来)的数据，以及各个省(中国省级矢量地图数据)的打包数据，也可以从相应的地方进行下载。当然，下载下来的数据，都是非常的粗糙的，不会像天地图一样到达20级，很多重要的地方也不会给你标出来，但是作为一个背景或者说是轮廓，我觉得应该足够用了，如果还有办法获取更加精细的数据，我会继续更新的。

下载了OpenStreetMap的数据后，可以在Maperitive中加载进来，选择菜单栏->File->Open Map Sources,加载pbf格式的数据。我下载了浙江的数据，我觉得数据还是挺清晰的，而且内容也比较丰富，作为一个不大不小的底图来说，完全够用了，数据的精度，我觉得应该有16级吧。

3.Maperitive

使用Maperitive可以自定义osm的地图样式。我刚开始使用Maperitive的时候，进行样式切换，总是不行，无论是切换为默认的样式，还是自定义的样式，还是其他的样式，都不起作用，为了看到样式的修改，你可以打开软件后，选择菜单栏->Map->Download OSM Data，下载当前页面的数据，然后再使用菜单栏上的->Map->Switch To Rules 切换样式，就可以看到效果了。

也就是说，要先加载自定义的OSM数据，然后才能使用自定义样式对其进行数据的修改，只有一个底图的时候，是没有办法应用样式的，因为底图是不会变化的。

(1) 加载数据
自定义地图，首先需要有数据，数据的来源，可以参考上一节中的内容，可以从OSM下载，也可以在Maperitive中自动下载，都是一样的。

(2) 创建样式规则
根据样式的规则，创建mrules文件，放到软件的Rules文件夹下，我这里放到了D:\soft\Maperitive\Rules 文件夹下

(3) 加载自定义样式规则
下方控制台输入：use-ruleset location=Rules\my.mrules，加载自定义的地图样式

(4) 导出数据
创建完样式之后，可以使用Maperitive的工具，生成相应的切片数据，选择菜单栏->Tools->Generate Tiles，将当前的地图，保存为切片，Mapertive会在软件安装目录下Tiles生成切片数据，我这里是：D:\soft\Maperitive\Tiles 目录下。

4.样式的创建

这里我主要介绍的是maperitive的样式创建规则。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

// 定义地图显示的要素
features
  // 点要素
	points 
		mountain peak : natural=peak
  // 线要素
	lines
		hiking path : highway=footway
  // 面要素
	areas
		forest : landuse=forest OR natural=wo
// 定义地图属性
properties
	map-background-color	: #F1EEE8
	map-background-opacity	: 1
// 指定规则，告诉 Maperitive 如何渲染这些特征。
rules
  // 目标标记规则定义的开始。在冒号之后，我们指定要绘制的特征(地图要素)的名称
	target : hiking path
    // define 命令用于设置一个或多个渲染属性的值
		define
			line-color : red
			line-width : 3
    // 绘制符号，线条、填充、图标、文本和轮廓等
		draw : line
  target : *hiking path
    // 使用for命令,
		for : trailblazed=yes
			define
				line-width : 5
		else
			define
				line-width : 3			
		
		if : hard hiking path
			define
				line-color : red
		elseif : medium hiking path
			define
				line-color : green
		else
			define
				line-color : blue		
				
		draw : line

5.数据发布

使用Maperitive进行导出的数据，被进行了切片处理，导出的数据为tiles.json格式。

针对导出的数据文件，可以使用nginx或者IIS等服务器，作为一个静态资源进行数据发布，当然也可以在加载的时候，使用相对目录加载，只需要修改其中的tiles.json文件的tiles属性就可以了。

6.数据加载

生成的数据格式为tiles的切片，包含了一个tiles.json文件，可以使用Openlayers进行加载。

(1) 修改tiles.json
生成的tiles.json中会包含注释，需要删除其中的斜杆部分内容，因为json不允许有斜杠注释，然后生成的tiles中的路径如下，需要根据需要改成自己的，否在加载的就是相对于tile.json所在目录的tiles文件夹下的文件。

1
2
3
4

"tiles":
    [
        "tiles/{z}/{x}/{y}.png"
    ],

(2) 进行数据加载
这里我使用的是 openlayers 进行加载，因为 openlayers 默认的投影方式是3857,所以需要指定opensteemap的坐标系4326,否则瓦片计算不准确。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

import 'ol/ol.css';
import '../css/index.css';
import Map from 'ol/Map';
import TileJSON from 'ol/source/TileJSON';
import TileLayer from 'ol/layer/Tile';
import View from 'ol/View';

var map = new Map({
  layers: [
    new TileLayer({
      source: new TileJSON({
        url: 'http://localhost:88/tilejson/tilesjson/tiles.json'
      }),
    }) ],
  target: 'map',
  view: new View({
    center: [120.35977448840023, 
        30.302548667359517],
    projection: 'EPSG:4326',
    zoom: 12,
  }),
});

7.openmaptiles

openmaptiles是一个可以在线编辑和发布OSM数据的开源软件,比 Maperitive 更方便一点。