试水NPM模块发布流程

最近在用Node.js写后台服务，并使用了tilestrata发布地图服务，但是发现一个问题，瓦片分级方案只支持墨卡托投影分级方案。如果想使用经纬度分级方案，没有直接的方法，只能按墨卡托分级方案切，在前端openlayers再做动态投影，但是这样做有效率问题，所以想尝试解决一下。

1.修改tilelive-mapnik源码，解决分级方案写死问题

查看并调试node_modules中的模块代码，发现在tilelive-mapnik/lib/render.js最前面有这样几行代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var EARTH_RADIUS = 6378137;
var EARTH_DIAMETER = EARTH_RADIUS * 2;
var EARTH_CIRCUMFERENCE = EARTH_DIAMETER * Math.PI;
var MAX_RES = EARTH_CIRCUMFERENCE / 256;
var ORIGIN_SHIFT = EARTH_CIRCUMFERENCE/2;
function calculateMetatile(options) {
    
    //...
    
    //当前级别分辨率
    var resolution = MAX_RES / total;
    //...
    
    //当前级别、行列号所代表的矩形范围
    var minx = (x * 256) * resolution - ORIGIN_SHIFT;
    var miny = -((y + metaHeight) * 256) * resolution + ORIGIN_SHIFT;
    var maxx = ((x + metaWidth) * 256) * resolution - ORIGIN_SHIFT;
    var maxy = -((y * 256) * resolution - ORIGIN_SHIFT);
    
    //...
}

这个代码代表里面的分级方案是写死的，如果修改的话，只需要把MAX_RES(首级分辨率)、ORIGIN_SHIFT(原点)按参数计算即可。

在Github上Fork了tilelive-mapnik，由于tilestrata-mapnik引用了tilelive-mapnik，所以也fork了一份儿。

改后的效果是，构造tilestrata-mapnik时，在options中加入FristDPI(首级分辨率)、OriX(源点X坐标)和OriY(源点Y坐标)，就可以传到tilelive-mapnik的render.js中使用，render.js修改代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
if (options.OriX != undefined && options.OriY != undefined && options.FirstDPI != undefined) {
    var resolution = options.FirstDPI / total;
    var minx = (x * 256) * resolution + options.OriX;
    var miny = -((y + metaHeight) * 256) * resolution + options.OriY;
    var maxx = ((x + metaWidth) * 256) * resolution + options.OriX;
    var maxy = -((y * 256) * resolution - options.OriY);
}
else {
    var resolution = MAX_RES / total;
    var minx = (x * 256) * resolution - ORIGIN_SHIFT;
    var miny = -((y + metaHeight) * 256) * resolution + ORIGIN_SHIFT;
    var maxx = ((x + metaWidth) * 256) * resolution - ORIGIN_SHIFT;
    var maxy = -((y * 256) * resolution - ORIGIN_SHIFT);
}

经纬度分级方案的FirstDPI是1.40625(全球经度360°，除以一张瓦片256像素，就得到一个像素代表的度数)，源点X为-180，源点Y为90，即左上角点。

使用代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var tilestrata = require('tilestrata');
var disk = require('tilestrata-disk');
var mapnik = require('@conorpai/tilestrata-mapnik');
var strata = tilestrata();
strata.listen(8099);
//创建瓦片服务
exports.createTileServer = function (uuid, xml, cache) {
    var mn = mapnik({
        pathname: xml,
        OriX: -180,
        OriY: 90,
        FirstDPI: 1.40625
    });
    mn.init(undefined, function () {});
    var layer = strata.layer(uuid)
        .route('tile.png')
        .use(mn);
    if (cache != undefined) {
        layer.use(disk.cache({dir: cache}));
    }
};

接下来的工作就是将修改后的代码上传到NPM中。

2.将修改结果上传至NPM

首先到NPM官网注册自己的帐号。

然后修改tilelive-mapnik中package.json中的信息，包括name、version、一些github中的地址等。

如果之前做过registry切换的，需要切回官方版本。

1
npm config set registry http://registry.npmjs.org/

使用npm adduser和npm login在本机登陆帐号，可以使用npm who am i进行验证。

命令行进入代码目录，然后就可以使用npm publish命令进行发布了。

发布时遇到的问题：

1
2
3
npm ERR! publish Failed PUT 402
npm ERR! code E402
npm ERR! You must sign up for private packages : @wandiparis/troposphere

遇到这个问题的解决方案是这里。

发布成功之后就可以到NPM官网上查看了
查看NPM

修改tilestrata的package.json，修改对tilelive-mapnik的引用，改为引用@conorpai/tilelive-mapnik，并上传到NPM中。

最后上一张按经纬度分级方案切图的效果图：
成果

展开全文 >>

node-mapnik集群负载均衡配置

使用集群部署和负载均衡可以提高大量用户并发访问下瓦片服务绘制效率，接下来将要介绍使用node.js的cluster模块和tilestrata的tilestrata-balancer模块做集群部署和负载均衡。

本篇文章是在上一篇的基础上进行扩展，如果有不清楚的可以了解一下。

1.使用node.js的cluster模块创建单机集群

因为node.js是单线程模式，所以无法有效的利用多核CPU优势，但node.js的cluster模块可以启动多个node.js程序，并实现负载均衡(这里没有用到cluster的负载均衡)。

首先，将瓦片服务代码中端口部分，由写死改成通过传入参数获取。即修改app.js中最后一行：

1
strata.listen(8099);

改为：

1
2
var port = process.env['port'];
strata.listen(port);

然后创建单机集群处理代码cluster.js，具体代码如下：

1
2
3
4
5
6
7
8
9
10
11
var cluster = require('cluster');
var cpus = require('os').cpus();
cluster.setupMaster({
  exec: './app.js'
});
for(var i = 0; i < cpus.length; i++){
  var port = 8090 + i;
  cluster.fork({port : port});
}

使用命令node cluster.js即可启动集群模式，在本机实验可以创建4个node.js进程。

2.使用tilestrata-balancer模块做瓦片服务访问负载均衡处理

首先，安装tilestrata-balancer模块：

1
sudo npm install -g tilestrata-balancer

然后修改app.js代码，修改strata的初始化方式：

1
2
3
4
5
var strata = tilestrata({
  balancer: {
    host: '127.0.0.1:8098'
  }
});

这里负载均衡服务器host可以是其它服务器，这里写的是本机IP。这里的端口号是tilestrata-balancer的私有端口号，用于瓦片服务集群和负载均衡服务器通信使用。

修改完成之后，使用命令启动tilestrata-balancer负载均衡：

1
tilestrata-balancer --hostname=127.0.0.1 --port=8099 --private-port=8098 --check-interval=5000 --unhealthy-count=1

这里的port参数是对外端口号，用于外部访问瓦片服务；private-port是私有端口号，用于瓦片服务集群和负载均衡服务器通信使用。

然后使用命令node cluster.js启动node.js单机集群，就可以看到负载均衡命令行显示有瓦片服务注册进来。
集群和负载均衡

至此，单机集群负载均衡就做好了，前端访问还是使用8099端口。而且只要在app.js中指定好负载均衡服务器的IP，就可以把瓦片服务部署到多个服务器上，进一步加快访问效率。

最后上图总结：
集群和负载均衡

此篇博文参考think8848的博客，特此感谢！

展开全文 >>

使用node-mapnik和OpenStreetMap Carto发布在线瓦片地图服务

OpenStreetMap Carto是OpenStreetMap的开源配图样式，可以转换成Mapnik的XML配图文件，进而通过node-mapnik加载并发布在线瓦片地图服务。

下面通过几个方面介绍如何实现地图发布：
1.代码准备
2.数据准备
3.字体准备
4.转换Mapnik XML
5.发布地图服务及前端查看
6.发布高清地图服务

1.代码准备

从Github上下载最新的OpenStreetCarto代码，解压。下文中所有代码目录都特指解压后的目录位置。

接下来的准备工作可以参考官方提供的安装文档。

2.数据准备

数据准备工作可以分为两种：一种是小比例尺下全球的大陆、国家等点、线、面、标注信息，shapefile格式；另一种是详细的基础数据，需要导入到postgresql数据库中使用。

2.1 shapefile数据准备

执行代码目录下scripts/get-shapefile.py脚本可以下载shapefile数据，但是下载可能比较慢，这里提供了百度网盘分享(链接：https://pan.baidu.com/s/1mvKCdjHPsU-hZZ1xTFhu1w 密码：l2vf)，如果离数据日期(2018年7月10日)不是太远，可以使用，差的太久还是用脚本下载吧。

下载完成之后解压到代码目录下data文件夹中。
shapefile准备完成

2.2 postgresql数据准备

postgresql数据处理流程是先下载osm格式数据，准备数据库，再通过osm2pgsql工具将其导入到postgresql中。

下载OSM数据

首选到这里下载OSM数据(china-latest.osm.pbf)到代码目录。
本例中使用的是中国大陆地区的数据，如果有兴趣可以下载其它区域数据。

准备数据库

postgresql数据库安装完成(安装过程参考：这里)之后，使用如下命令创建名为gis的数据库：

1
sudo -u postgres createdb gis

为gis数据库安装postgis和hstore扩展：

1
sudo -u postgres psql -d gis -c 'CREATE EXTENSION postgis; CREATE EXTENSION hstore;'

安装osm2pgsql工具

Ubuntu下使用如下命令安装：

1
sudo apt-get install osm2pgsql

导入postgresql

在代码目录下使用如下命令：

1
sudo -u postgres osm2pgsql -G --hstore --style openstreetmap-carto.style --tag-transform-script openstreetmap-carto.lua -d gis china-latest.osm.pbf

在我的机器上会报错，提示Node cache size is too small to fit all nodes. Please increase cache size，需要在命令中加入--cache 1600，即可正常导入，完整命令如下：

1
sudo -u postgres osm2pgsql -G --hstore --style openstreetmap-carto.style --tag-transform-script openstreetmap-carto.lua -d gis china-latest.osm.pbf --cache 1600

导入完成：
postgresql准备完成

创建索引

创建索引不是必须的，但是可以加快渲染速度，在代码目录下执行如下命令：

1
sudo -u postgres psql -d gis -f indexes.sql

3.字体准备

根据安装文档，执行如下命令安装字体：

1
sudo apt-get install fonts-noto-cjk fonts-noto-hinted fonts-noto-unhinted fonts-hanazono ttf-unifont

4.转换Mapnik XML

OpenStreetMap Carto是使用TileMill工具配置的，其项目文件是project.mml，我们需要将这个工程转成Mapnik的XML配置文件。

这里使用的转换工具是node模块carto，使用如下命令全局安装carto模块：

1
sudo npm install -g carto

转换之前需要将project.mml中postgresql连接参数修改为本机数据库参数：
修改数据库连接参数

然后就可以在代码目录下使用如下命令将project.mml转为mapnik.xml：

1
carto project.mml > mapnik.xml

转换完成之后，可以使用node-mapnik提供的例子测试xml配置文件是否正常，如果正常则会生成如下图片：
修改数据库连接参数

5.发布地图服务及前端查看

可以参考这里，发布瓦片服务及前端查看。
发布服务

6.发布高清地图服务

正常发布的瓦片地图，在高清屏上看起来比较模糊，需要发布高清地图才能适应这类屏幕，首先看一下效果：
OpenStreetMap官方地图在Macbook Pro上的显示效果：
OpenStreetMap官网
自己发布的普通地图服务在Macbook Pro上的显示效果：
OpenStreetMap官网
自己发布的高清地图服务在Macbook Pro上的显示效果：
OpenStreetMap官网

高清版的配置过程包括两方面：1）TileStrata支持512*512大小瓦片；2）OpenLayers支持显示512*512大小瓦片；

TileStrata配置

TileStrata已经给出例子：

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
var tilestrata = require('tilestrata');
var disk = require('tilestrata-disk');
var sharp = require('tilestrata-sharp');
var mapnik = require('tilestrata-mapnik');
var dependency = require('tilestrata-dependency');
var strata = tilestrata();
// define layers
strata.layer('basemap')
    .route('tile@2x.png')
        .use(disk.cache({dir: '/var/lib/tiles/basemap'}))
        .use(mapnik({
            pathname: '/path/to/map.xml',
            tileSize: 512,
            scale: 2
        }))
    .route('tile.png')
        .use(disk.cache({dir: '/var/lib/tiles/basemap'}))
        .use(dependency('basemap', 'tile@2x.png'))
        .use(sharp(function(image, sharp) {
            return image.resize(256);
        }));
// start accepting requests
strata.listen(8080);

但是这里生成普通瓦片是通过512压缩而成，效果并不是很好，所以我这里512和256都是通过Mapnik进行绘制，高清版命名为tile@2x.png，普通版命名为tile.png。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var tilestrata = require('tilestrata');
var disk = require('tilestrata-disk');
var mapnik = require('tilestrata-mapnik');
var strata = tilestrata();
strata.layer('map')
  .route('tile@2x.png')
    .use(disk.cache({dir: './tilecache'}))
    .use(mapnik({
      pathname: '/home/paiconor/mapnik/openstreetmap-carto-master/mapnik.xml',
      tileSize: 512,
      scale: 2
    }))
  .route('tile.png')
    .use(disk.cache({dir: './tilecache'}))
    .use(mapnik({
      pathname: '/home/paiconor/mapnik/openstreetmap-carto-master/mapnik.xml'
    }));
strata.listen(8099);

Openlayers配置

在Openlayers请求tile@2x.png，并设置tilePixelRatio为2，示例如下：

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
<!Doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
    <meta http-equiv=Content-Type content="text/html;charset=utf-8">
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <meta content=always name=referrer>
    <title>Mapnik地图服务示例</title>
    <link href="./css/ol.css" rel="stylesheet" type="text/css" />
    <link href="./css/index.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="./js/ol.js" charset="utf-8"></script>
</head>
<body>
<div id="map" class="map"></div>
<script>
    var tileStrataMapLayer = new ol.layer.Tile({
        source: new ol.source.XYZ({
            url: 'http://192.168.1.140:8099/map/{z}/{x}/{y}/tile@2x.png',
            tilePixelRatio: 2
        })
    });
    new ol.Map({
        layers: [
            tileStrataMapLayer
        ],
        view: new ol.View({
            center: [0, 0],
            projection: 'EPSG:3857',
            zoom: 2
        }),
        target: 'map'
    });
</script>
</body>
</html>

此篇博文参考think8848的博客，特此感谢！

展开全文 >>

简单试用自定义Mapnik数据源插件

如果想使用Mapnik接入我们的数据源出图，以及自定义一些数据展示，避免不了要做数据源插件开发，所以今天简单试了一下Mapnik插件开发，并在node-mapnik中加载使用的流程。

部署C++依赖环境

Mapnik插件需要使用C++语言开发，所以需要部署C++依赖环境。在MacOS上部署很方便，只需要使用brew install mapnik即可，在Ubuntu上稍微复杂，需要使用源码编译，具体参考Mapnik的部署文档。

因为我的机器上基础环境都有，所以只需要部署boost和mapnik即可。

部署boost

部署boost被坑了，mapnik最新版本(github下载的源码是3.1.0版本)无法使用boost最新版本(1.67.0)，可以使用boost 1.66.0版本。

下载boost 1.66.0源码后，编译和部署参考网上的教程即可：

1
2
3
4
5
6
7
cd boost_1_66_0
./bootstrap.sh --with-icu --with-libraries=all
./b2 threading=multi
./b2 install

部署mapnik

根据Mapnik的部署文档下载Mapnik的源码，并编译安装。后来验证使用这种方法编译的Mapnik版本是3.1.0，3.1.0相对于3.0.*有一些变化，会导致后边的Demo跑不过(没错，又被坑了!!!)，所以这里安装的是3.0.20版本。

下载源码及其它依赖：

1
2
3
git clone -b v3.0.20 https://github.com/mapnik/mapnik.git
cd mapnik
git submodule update --init

验证依赖环境，如果有未通过项则需要处理后才能正确编译：

1
./configure

可以根据本机配置选择并行编译还是普通编译(make)：

1
JOBS=4 make

将编译结果进行部署：

1
make install

验证部署是否成功：

1
mapnik-config -v

如果显示Mapnik版本，证明Mapnik部署已完成。

插件开发和编译

这里使用Mapnik提供的数据源插件开发Demo来做验证。

使用make命令编译，编译完成后会在目录下生成hello.input文件。
编译成功

在Ubuntu环境下编译报错can not be used when making a shared object; recompile with -fPIC，在makefile文件中加入CXXFLAGS += -fPIC即可
解决编译报错

node-mapnik中使用自定义插件

在node-mapnik中使用mapnik的register_datasource方法注册插件：

1
mapnik.register_datasource('/Users/paiconor/Desktop/mapnik/hello-world-input-plugin-master/hello.input');

针对该数据源配置一个XML：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?xml version="1.0" encoding="utf-8"?>
<Map srs="+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs" background-color="white">
    <Style name="style">
        <Rule>
            <PointSymbolizer />
            <TextSymbolizer face-name="DejaVu Sans Book" size="10" dx="5" dy="5">[key]</TextSymbolizer>
        </Rule>
    </Style>
    <Layer name="test" srs="+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs">
        <StyleName>style</StyleName>
        <Datasource>
            <Parameter name="type">hello</Parameter>
        </Datasource>
    </Layer>
</Map>

写测试代码加载该XML并输出图片：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var mapnik = require('mapnik');
var fs = require('fs');
// register fonts and datasource plugins
mapnik.register_default_fonts();
mapnik.register_default_input_plugins();
mapnik.register_datasource('/Users/paiconor/Desktop/mapnik/hello-world-input-plugin-master/hello.input');
var map = new mapnik.Map(256, 256);
map.load('testplugin.xml', function(err,map) {
    if (err) throw err;
    map.zoomAll();
    var im = new mapnik.Image(256, 256);
    map.render(im, function(err,im) {
      if (err) throw err;
      im.encode('png', function(err,buffer) {
          if (err) throw err;
          fs.writeFile('map.png',buffer, function(err) {
              if (err) throw err;
              console.log('saved map image to map.png');
          });
      });
    });
});

运行后生成map.png，证明自定义数据源插件测试成功。
测试成功

展开全文 >>

使用Mapnik发布简单的地图服务

Mapnik是一个开放源代码的地图学工具集，提供基于客户端与服务器端的地图渲染使用，以C++撰写。Mapnik的原始开发者，Artem Pavlenko将目标明确设置为通过使用子像素反锯齿功能来创建美丽的地图。Mapnik现在也有Cairo渲染后端。Mapnik使用Boost C++ Libraries来处理如存储器管理、访问文件系统、正规表达式与解析XML等的一般软件工作。地图的外观可以使用XML文件来定义，也可以通过C++、Python与Node.js等编程语言来建构。

本文将要介绍在Ubuntu服务器上部署node-mapnik，通过配置好的XML发布地图服务，并使用Openlayers显示该地图服务。

1
说明：下面介绍的各个步骤可以实现上述目标，但不一定是最简、最优流程，可能存在多余的过程，就如其它教程里要求编译mapnik、boost之类的，经验证不需要这步操作。

1.安装Node.js

如果没有安装Node.js，需要安装Node.js LTS版本(目前是8.11.3，最新版安装node-mapnik好像出问题了)。如果没有安装过可以使用命令进行安装：

1
2
apt-get install nodejs
apt-get install npm

安装之后验证版本：
安装Node.js
由于npm访问国外网站过慢，可以切换成淘宝npm镜像：

1
npm config set registry https://registry.npm.taobao.org

Node.js版本和npm版都不是最新的，需要进行更新，这里使用n模块进行升级：

1
npm install -g n

安装完成之后就可以通过命令安装latest、stable、lts和指定版本等，这里安装lts版本：

1
n lts

安装Node.js

安装完成之后发现node.js和npm版本没有发生变化，需要将原来的node删除，并创建一个软链接到n目录下的node，所在位置如下：
安装Node.js

1
2
3
4
rm /usr/bin/node
ln -s /usr/local/n/versions/node/8.11.3/bin/node /usr/bin/node
rm /usr/bin/npm
ln -s /usr/local/n/versions/node/8.11.3/bin/npm /usr/bin/npm

安装Node.js
npm升级到最新版本

1
npm i -g npm

安装Node.js

2.安装node-mapnik

全局安装node-gyp和node-pre-gyp：

1
2
npm install -g node-gyp
npm install -g node-pre-gyp

node-mapnik模块我没有全局安装，安装到当前目录下。首先创建文件夹并进入：
安装node-mapnik
安装node-mapnik模块：

1
npm install mapnik

如果出现安装失败的情况，有的是因为一些资源下载失败，尝试科学上网、不断重试直到安装成功。
安装node-mapnik
安装node-mapnik

安装成功后，我们验证一下模块是否可用，我们使用node-mapnik github上的示例代码进行测试：

1
2
var mapnik = require('mapnik');
new mapnik.Image.open('input.jpg').save('output.png');

使用vim创建test.js测试脚本，并写入上述代码，并保存：
安装node-mapnik
拷入input.jpg(可以使用xshell的rz，我用的是Windows10的Ubuntu子系统，直接把input.jpg拷贝到C:\Users\PaiConor\AppData\Local\Packages\CanonicalGroupLimited.Ubuntu18.04onWindows_79rhkp1fndgsc\LocalState\rootfs\home\node-mapnik目录下就可以了)，启动测试脚本，如果生成了output.png，则mapnik模块安装成功。
安装node-mapnik

3.配置Mapnik配图样式XML

根据Mapnik的XML配置格式，配了一个简单的地图：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<Map background-color="rgb(255,255,255)" srs="+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0.0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs +over">
  <Style name="My Style">
    <Rule>
      <PolygonSymbolizer fill="#f2eff9" />
      <LineSymbolizer stroke="rgb(255,0,0)" stroke-width="1" />
    </Rule>
  </Style>
  <Layer name="world" srs="+proj=longlat +ellps=GRS80 +no_defs">
    <StyleName>My Style</StyleName>
    <Datasource>
      <Parameter name="file">shapefile/aaa</Parameter>
      <Parameter name="type">shape</Parameter>
    </Datasource>
  </Layer>
</Map>

这里的shapefile数据是国家2000经纬度坐标系的，最开始地图也是这个空间参考，但是需要前端访问时对应到这个空间参考上，有些麻烦，所以直接修改地图空间参考为比较流行的Web墨卡托投影坐标系了，图层进行动态投影显示。

配好之后可以使用下面的脚本生成图片，验证配图效果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var mapnik = require('mapnik');
var fs = require('fs');
// register fonts and datasource plugins
mapnik.register_default_fonts();
mapnik.register_default_input_plugins();
var map = new mapnik.Map(4096, 4096);
map.load('../data/style.xml', function(err,map) {
    if (err) throw err;
    map.zoomAll();
    var im = new mapnik.Image(4096, 4096);
    map.render(im, function(err,im) {
      if (err) throw err;
      im.encode('png', function(err,buffer) {
          if (err) throw err;
          fs.writeFile('map.png',buffer, function(err) {
              if (err) throw err;
              console.log('saved map image to map.png');
          });
      });
    });
});

4.发布地图服务

Mapnik搞定的是地图渲染，但是发布瓦片服务，还需要使用TileStrata来进行。

安装TileStrata及其插件：

1
2
3
4
5
npm install tilestrata
npm install tilestrata-disk
npm install tilestrata-mapnik

安装完成后创建瓦片服务脚本app.js，并输入以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var tilestrata = require('tilestrata');
var disk = require('tilestrata-disk');
var mapnik = require('tilestrata-mapnik');
var strata = tilestrata();
//layer名称不能为空
strata.layer('map')
  .route('tile.png')    					//route方法中不能使用正则表达式
  .use(disk.cache({dir: './tilecache'}))    //设置瓦片缓存在当前目录的tilecache之目录中
  .use(mapnik({
    pathname: '../data/test.xml'
  }));
strata.listen(8099);

启动脚本：

1
node app.js

如果会计算某一级别行列号可以通过http://127.0.0.1:8099/map/{z}/{x}/{y}/tile.png模式验证瓦片服务是否发布成功，也可以通过下面的方法，使用Openlayers加载瓦片服务进行验证。

5.使用Openlayers访问瓦片服务

到Openlayers官网上下载了新版本编译成果，创建前端目录，将ol.js拷贝到js子文件夹下，将ol.css拷贝到css子文件夹下，并创建index.html，内容如下：

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
<!Doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
    <meta http-equiv=Content-Type content="text/html;charset=utf-8">
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <meta content=always name=referrer>
    <title>Mapnik地图服务示例</title>
    <link href="./css/ol.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="./js/ol.js" charset="utf-8"></script>
</head>
<body>
<div id="map" style="width: 100%"></div>
<script>
    var tileStrataMapLayer = new ol.layer.Tile({
        opacity: 0.6,
        source: new ol.source.XYZ({
            url: 'http://127.0.0.1:8099/map/{z}/{x}/{y}/tile.png'
        })
    });
    new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            }),
            tileStrataMapLayer,
        ],
        view: new ol.View({
            center: [106.81, 31.55],
            projection: 'EPSG:4326',
            zoom: 14
        }),
        target: 'map'
    });
</script>
</body>
</html>

这里使用Openlayers加载了Mapnik瓦片服务，并叠加了一个OSM图层，用于对比叠加效果，最终效果如下：
Openlayers访问瓦片服务

以上介绍的只是做了简单的地图发布，离最终高并发地图服务还有一段距离，需要继续研究和探索。

此篇博文参考think8848的博客，特此感谢！

2018年7月4日更新：
node-mapnik在6月30号发布了4.0版本，支持了最新的node.js版本(10.5.0)，以及Mapnik的pre-release master版本(3.1？)。

展开全文 >>

阿里云CDN加速配置

个人网站和博客搭建已经快一年了，最大的一块心病就是图片加载太慢了。。

想当初刚买到阿里云服务器兴冲冲的部署写好的个人网站，首次在浏览器上打开花了一分多钟才刷出图片来，心情真是down到谷底。当时以为是哪里没配置好，最后才发现买的阿里云服务器网络带宽是1M，下载图片太慢了。

2017年10月阿里云搞活动，给我发了个通知，CDN服务2年包月20G才9毛钱，当时还不知道CDN是什么，就是觉得便宜，买着玩吧。
购买CDN

后来用七牛云比较多，再加上网上的了解，知道CDN可以解决我的个人网站和博客图片加载速度慢的问题，就试了一下。官方配置文档在这里。

首先进入CDN控制台，在域名管理页面中添加域名。
域名管理
添加域名
因为博客使用的是Github Pages：http://conorpai.github.io，所以IP需要添加Github Pages的IP，使用ping命令获取其IP。
获取IP

添加域名完成之后，会分配CNAME，拷贝待用。
添加域名完成

进入域名管理控制台：
域名管理

修改baiguangnan.com的解析，将@.baiguangnan.com的记录类型由之前的A换成CNAME，并在记录值中添加之前拷贝的CNAME。
域名DNS解析

修改时可能会遇到一些冲突，我是把冲突的删掉了，暂时还不清楚后果是什么。。

同理，修改photos.baiguangnan.com的DNS解析：
域名DNS解析

保存之后就可以感受CDN加速的效果了(可能有一些延迟)。
CDN生效

因为之前申请了其它域名，但是只有baiguangnan.com做了备案，没有备案的域名不能使用CDN加速。。
未备案域名不能使用CDN加速

可以做一下对比：
未加速：http://conorpai.com
CDN加速：http://photos.baiguangnan.com

HTTPS网站的CDN加速

昨天帮哥们的网站做CDN加速，本来以为也很简单，但是由于他的网站做了HTTPS，需要做一些额外限制，找了一些教程终于搞定了，下面说一下方法。

第一步还是添加域名，添加完成之后点击域名后面的配置功能：
配置HTTPS
找到HTTPS设置，修改配置：
配置HTTPS
开启HTTPS设置，选择证书来源，并填入证书名称、公钥和私钥，然后确定即可。
配置HTTPS
最后配置回源，防止出现循环重定向问题。
配置HTTPS

至此配置完成，最后强推一波哥们的摄影博客https://photo.wandoer.com，大家多多关注。
摄影博客

展开全文 >>

试水C#成果反编译(二)

上一篇介绍了使用ILSpy和Reflexil插件对简单程序的反编译和破解。现在用一个真实软件为例，对其进行破解。

这里破解的软件是代码转换工具Converters，可以转换C#、Java、C++和VB.Net四种语言，功能比较强大，转换之后的代码可用度比较高。这个软件免费版功能受限，高级版要上百刀。在网上看到了这篇参考文章，所以也想试试对其进行破解。

首先用ILSpy打开CSharp to Java Converter软件
打开软件
可以看到，这个成果是做过混淆的，里面的类名称、函数名称和变量名称都变成了意义不明的代号。

因为ILSpy中的搜索不是很好用，所以需要将代码保存之后，用VS打开查找和定位相关代码。
保存代码
保存代码

我们想破解这个软件对用户授权的判断，就需要找一个突破口。在这里我以程序标题提示Free Edition为突破口，来查找授权判断代码。
突破口

全局搜索Free Edition，找到拼接程序标题的代码：
定位代码
定位代码
可以看出标题是否显示FreeEdition是由App._g13变量控制的，现在只需要找到App._g13变量在哪里赋值即可：
定位代码
可以看出在程序启动后，通过App.Copyright_Tangible_Software_Solutions_g30方法对App._g13进行赋值，定位Copyright_Tangible_Software_Solutions_g30方法：
定位代码
也就是说只需要把这个方法的返回值直接改为true即可。

返回ILSpy软件，搜索Copyright_Tangible_Software_Solutions_g30：
定位代码
打开Reflexil插件，先用Replace All with Code方法修改：
修改代码
修改代码
用这种方法修改的代码编译报错，所以这种方法行不通，考虑修改IL源码。

对于修改IL源码不是特别清楚的小伙伴，可以新建一个简单的工程，将写好后的代码编译并在ILSpy中打开，照着原样拷贝到这里即可。
修改代码
就是这里的6行代码。

清除所有
修改代码
依次创建
修改代码
修改代码
修改代码
由于第4行是一个跳转指令，所以最后创建
修改代码
修改代码
添加跳转指令
修改代码
默认添加是在最后一行，需要拖拽到相应位置
修改代码
修改代码

修改之后启动程序并没有达到想要的效果，使用ILSpy打开破解之后的程序，发现这里的代码不并是return true，有些不是很理解，在一个简单程序上做如下修改，却是正常的。
修改代码

憋了很久，打算硬着头皮试一下，猜想这6行代码里，ldc.i4.1是创建了一个数值为1的int变量，ret是返回，是不是只保留这两行就可以了呢？修改并验证：
修改代码
修改代码
发现代码正常了，启动软件测试：
验证结果
发现程序标题中的Free Edition已经没有了，原来Unlock the Premium Edition按钮也没有了，测试转换代码也没有行数之类的限制，破解生效了。

俗话说，知己知彼百战不殆，了解反编译和破解过程，是为了更好的保护自主知识版权，希望大家多多支持正版软件。

展开全文 >>

试水C#成果反编译(一)

对于反编译的了解，我之前还停留在将工作成果混淆防止反编译看到源码的阶段，今天看到了一篇文章，不但可以反编译C#成果，而且可以修改其中的部分代码并保存成新的成果来使用，所以打算试一下。

使用的工具是ILSpy加上Reflexil插件，下载地址：
https://github.com/icsharpcode/ILSpy/releases
https://github.com/sailro/Reflexil/releases，下载reflexil.for.ILSpy.2.2.AIO.bin.zip，AIO的意思是All In One。

下载后解压到同一个目录下，打开ILSpy软件，在View菜单中可以看到Reflexil v2.2菜单即可。
配置成功

建新一个简单的WinForm工程，简单的写几行代码，点击按钮弹出提示框，接下来要做的是修改提示框标题。
原始效果
代码如下：

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
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
namespace TestDecompile
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }
        private void ShowMessage(int x, int y)
        {
            MessageBox.Show(string.Format("{0}+{1}={2}", x, y, x + y));
        }
        private void button1_Click(object sender, EventArgs e)
        {
            ShowMessage(3, 4);
        }
    }
}

使用ILSpy打开exe，即可看到程序源码。
ILSpy反编译源码

对于简单的程序，可以将程序源码导出后重新编译，但是对于复杂的程序这样会比较麻烦，所以考虑直接修改exe。
ILSpy保存源码

点击View-Reflexil v2.2菜单，打开Reflexil界面，并且定位到要修改的ShowMessage函数。
准备修改

第一种方法是比较简单的方法，在Reflexil界面右键，点击Replace all with code，弹出如下界面：
准备修改
在ShowMessage中添加代码，然后点击左下角的Compile按钮，确认没有问题之后点击Ok按钮。
修改完成
修改完成之后，在程序的根节点上右键Save as，即可将修改结果保存成新的exe，默认在原文件名的基础上增加Patched字符。
保存修改
修改之后的效果：
修改效果

这种方式确实很方便，对于我们也很友好，但是在某些情况下修改代码之后编译失败，那就需要修改IL代码，即Reflexil界面中显示的那一堆。。
IL代码

关于IL相关的知识可以去网上再了解一下，在这里就不再重复了，接下来介绍如何通过修改IL代码实现一样的效果。
在IL代码中，索引是11的那一行，可以看出是调用了MessageBox的Show方法，之前的代码是在构建Show的参数，消息字符串，所以需要在Show之前传入第二个参数，并修改Show的实现方法。
首先，创建消息标题字符串：
创建标题字符串
创建标题字符串
创建完成之后默认是添加在最后一行，拖动到Show方法之前即可：
创建标题字符串
右键点击Show方法，点击Edit菜单：
修改Show方法
弹出对话框中点击Show方法后边的下拉按钮，在弹出列表中选择两个字符串参数的方法，选中之后Update即可。
修改Show方法
修改完成效果：
修改完成
重复之前保存exe方法，效果与之前一致。

如果想避免自己的成果被反编译和破解，最好使用混淆方法，目前我们的成果做了混淆，会导致ILSpy报错，效果如下：
代码混淆

下一篇将会介绍如何使用ILSpy和Reflexil对一个复杂软件进行破解。

展开全文 >>

利用无人机拼接正射影像图(二)

6.内业：照片拼接成正射影像图

经过外业照片采集之后，通过内业软件进行拼接，形成正射影像图。

内业正射影像图拼接软件有以下几种：

1.OpenDroneMap
2.PhotoScan
3.Pix4dmapper
4.ENVI OneButton

1.OpenDroneMap

OpenDroneMap是一款开源软件，可以对无人机照片进行拼接处理，生成正射影像图、DEM、纹理、点云等，实验证明拼接的效果不是很理想，而且没有UI操作界面用起来难度比较大。具体的拼接流程可以参考这篇文章。

2.PhotoScan

PhotoScan可以使用GPU加速大大提高拼接效率，GPU加速设置在菜单Tools-Perferences中：
GPU加速设置
下面说一下具体的拼接流程：
1）新建Workspace
点击Workspace组件中工具栏第一个按钮新建Workspace。
新建Workspace
2）添加照片
点击菜单Workflow-Add Photos添加照片。
添加照片
3）排列照片
点击菜单Workflow-Align Photos。
排列照片
4）生成密集点云
点击菜单Workflow-Build Dense Cloud。由于有GPU加速，想试一下最高级的效果，不开GPU加速需要2天时间，开了只要20分钟，但是最高级效果在接下来生成三角网过程中报错，因为没有足够大的内存，所以这里选中等级别。
生成密集点云
5）生成三角网
点击菜单Workflow-Build Mesh。
生成三角网
6）生成纹理
点击菜单Workflow-Build Texture。
生成纹理
7）生成正射影像图
点击菜单Workflow-Build Orthomosaic，生成正射影像图前，需要将Workspace生成的成果保存。
生成正射影像图
8）导出正射影像图
点击菜单File-Export-Export Orthomosaic-Export JPEG/TIFF/PNG。
导出正射影像图
导出正射影像图

3.Pix4dmapper

Pix4dmapper在前期设置之后，整个处理过程是完整的，而且会生成报告，体验比较好。
下面说一下具体的拼接流程：
1）新建项目
新建项目
2）添加照片
添加照片
添加照片
3）选择输出坐标系
这里没有找到4326的WGS84 经纬度坐标系，使用的是3857的WGS84 Web墨卡托投影。
选择输出坐标系
4）选择处理模板
选择处理模板
5）新建项目完成
新建项目完成
6）项目设置
点击左下角“处理选项”即可对项目参数进行设置，这里包括设置GPU加速。
项目设置
7）开始处理
开始处理
8）处理结果
处理完成之后，在项目目录下就保存了输出成果。
处理结果
正射影像图在如下位置：
处理结果

4.ENVI OneButton

我申请了该软件的试用许可，但是还没有收到回复，等收到了试用许可再实验效果。

测试正射影像图效果

目前来看OpenDroneMap成果不理想，PhotoScan和Pix4dmapper成果差不多，Pix4dmapper略好些。
和GoogleEarth影像叠加效果：
添加照片
放大之后和GoogleEarth影像对比效果：
添加照片

可以看出，还是有一些偏差的，如果需要提高精度，需要进行下一步：影像校正。

7.内业：正射影像图校正

使用我们的软件或ArcMap都可以进行影像校正，在这里以ArcGIS为例演示校正效果。
1）在ArcGIS工具栏上添加“地理配准”工具条
2）为了方便校准，创建矢量图层，在GoogleEarth影像中找到比较明确的地物点，勾绘成矢量成果。
3）将正射影像图和矢量成果加载到ArcMap中，使用地理配准工具条，向地图中添加影像校正配准点：
影像校正
所有配准点：
影像校正
4）导出校正后的影像

可以对比一下校正前后的效果：
校正前
校正后

展开全文 >>

利用无人机拼接正射影像图(一)

最近小试牛刀，实验用大疆无人机拍摄照片拼接正射影像图，在这里记录一下心得。

基本作业流程

1.内业：了解作业区域实地情况
2.内业：设计飞行航线
3.内业：无人机准备
4.外业：飞行前准备
5.外业：照片拍摄
6.内业：照片拼接成正射影像图
7.内业：正射影像图校正

1.内业：了解作业区域实地情况

使用一些地图资源，初步了解作业区域实地情况，比如地势地貌、植被分布、是否在限飞区域内等，这些信息对接下来的航线设计有参考作用，如果在限飞区域，需要申请限飞区解禁。

2.内业：设计飞行航线

飞行航线设计与实施，除了手动控制以外，还有以下几种软件可以进行辅助：

2.1 DJI GS Pro地面站

这款软件是大疆官方提供的地面站软件，用于航线设计和实施等操作，基础功能免费，高级功能收费。而且该软件目前只有iPad版本，我手头上的御Pro由于遥控器限制，用起来比较麻烦，但是其它型号建议使用这款官方软件。
DJI GS PRO

2.2 Altizure

非官方软件，如果对无人机操控比较熟练，可以试用。
Altizure

2.3 Pix4D Capture

最开始知道Pix4D是知道其桌面版软件Pix4Dmapper可以进行正射影像拼接，进而发现了其移动端软件，也具有航线设计功能，如果对无人机操控比较熟练，可以试用。
Pix4D Capture
Pix4D Capture
Pix4D Capture

3.内业：无人机准备

主要是电池充电，准备存储卡，并对无人机、遥控器、控制软件进行升级，控制软件连接无人机测试，控制软件参数设计，学习大疆飞行教程，了解安全须知，也可以进行模拟飞行，熟悉对无人机的操控。

4.外业：飞行前准备

无人机飞行前校准是安全飞行的重要一步，控制软件中需要进行校准的会给出提示，但每次飞行前都要进行指南针校准。
无人机飞起来到设计高度，最好环绕一周看一下周围有没有可能发生碰撞的山或树，以免飞行过程中炸机。

5.外业：照片拍摄

如果使用了软件辅助，则可以自动拍摄。我使用的是手动操作。拍摄过程中注意一下无人机电量，以免炸机。
DJI Go
DJI Go
DJI Go
DJI Go
DJI Go

下一篇继续介绍正射影像图拼接和校正。

展开全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

啥呀？谁呀？<br><br>迷路是特色，迷路不迷糊<br>梦想是在家抱着喵主写代码