Simple implementation of making Tile Map by node mapnik

The node mapnik installation process is brief. We use geojson as the data source, and we can also use other data sources. In order to simply go to point.json

{
"type": "FeatureCollection",
"features": [{ "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 113.44397, 23.094416 ] } },...] } 

tile.xml needed to write mapnik.map

<Map srs="+init=epsg:4326">
 <Style name="light">
   <Rule> 
    <!-- Point style, default black--> 
      <PointSymbolizer file="../img/mass1.png" transform="scale(0.1)" allow-overlap="yes" ignore- 
       placement="yes" /> 
   </Rule> 
 </Style> 
 <Layer name="lightlayer" srs="+init=epsg:4326" > 
   <StyleName>light</StyleName>
 </Layer> 
</Map>

Tiles need to use x,y,z three parameters. Use mapnik's own class conversion, or use custom class conversion to realize special tiles. For example, baidu (Baidu's tile rule starts from the center, 0,0 default rule is 0,0 in the upper left corner) uses express as a network service, and directly uses the previous code app.js

const express = require('express')
const app = express()
const port = 3000
var mapnik = require('mapnik')
var fs = require('fs')
const fileh = './data/point.json'
mapnik.register_default_fonts()
mapnik.register_default_input_plugins()
var geojson = fs.readFileSync(fileh, 'utf-8');

app.get('/map/title/:x-:y-:z.png', (req, res) => {

    var vt = new mapnik.VectorTile(+req.params.z, +req.params.x, +req.params.y);
    vt.addGeoJSON(geojson, 'lightlayer', {});
    var tileSize = vt.tileSize;
    var map = new mapnik.Map(tileSize, tileSize);
    map.load('./test/tile.xml', function (err, map) {
        vt.render(map, new mapnik.Image(256, 256), function (err, image) {
            if (err) {
                res.writeHead(500, {
                    'Content-Type': 'text/plain'
                });
                res.end(err.message);
            } else {
                res.writeHead(200, {
                    'Content-Type': 'image/png'
                });
                res.end(image.encodeSync('png'));
            }
        });
    })
})

app.listen(port, () => console.log(`Example app listening on port ${port}!`))

Start node app.js, visit localhost:3000/map/title/0-0-0.png, x,y,z free replacement, add a regular update geojson task, listen to the json file to modify and replace the geojson variable, and the simple tile service is completed

 
 

Tags: Programming JSON xml network

Posted on Thu, 07 May 2020 10:18:39 -0700 by riespies