DEM数据Mapbox渲染

数据源

DEM数据

image.png

工具

• postgis
• mapbox

思路

• DEM数据入库（postgis）
• 栅格矢量化
• 网格发不成矢量切片
• mapbox渲染矢量切片

DEM数据入库

raster2pgsql -s 4326 -I -C -M F:\GisMap\nj\*.tif -F -t 256x256 nj_jwd | psql -h 192.168.25.95 -p 5432 -U postgres -d raster -W

栅格矢量化

create table nj_jwd_grids as SELECT
    (kv.record ).geom,
    (kv.record ).x,
    (kv.record ).y,
    (kv.record ).val,
    kv.filename
FROM
    (
        SELECT
            ST_PixelAsPolygons (kt.rast, 1, TRUE) AS record,kt.filename
        FROM
            nj_jwd kt
    ) kv;

image.png

矢量切片发布

参照之前的文章link

mapbox渲染

 map.on("load", function () {
        map.addSource("grid-source", {
            type: "vector",
            tiles: ["http://localhost:8000/MapApp/Tiles/raster/nj_jwd_dem_grid/{z}/{x}/{y}"]
        });
        map.addLayer({
            "id": "gird-layer",
            "type": "extrusion",
            "source": "grid-source",
            "source-layer": "nj_jwd_dem_grid",
            "minzoom": 14,
            "maxzoom": 17.5,
            "layout": {
                "visibility": "visible"
            },
            "paint": {
                "extrusion-base": 40, /*基础高度*/
                "extrusion-color":"#810f7c",/*颜色*/
                "extrusion-height": {"property": "val", "type": "identity"}, /*高度*/
                "extrusion-opacity": 1, /*不透明度(%)*/
//                "extrusion-pattern": "sion-material-32",/*纹理,如果需要贴图，加入此行参数*/
                "extrusion-translate": [0, 0], /*建筑物偏移*/
                "extrusion-translate-anchor": "map" /*建筑物偏移锚点：值域map-正北，viewport--视野*/
            }
        })
    });

image.png

不同的颜色不同的渲染方式，参照之前的文章：link

 map.on("load", function () {
        map.addSource("grid-source", {
            type: "vector",
            tiles: ["http://localhost:8000/MapApp/Tiles/raster/nj_jwd_dem_grid/{z}/{x}/{y}"]
        });
        map.addLayer({
            "id": "gird-layer",
            "type": "extrusion",
            "source": "grid-source",
            "source-layer": "nj_jwd_dem_grid",
            "minzoom": 14,
            "maxzoom": 17.5,
            "layout": {
                "visibility": "visible"
            },
            "paint": {
                "extrusion-base": 40, /*基础高度*/
                "extrusion-color": [
                    "step",
                    ["get", "val"],
                    "#edf8fb",
                    65,
                    "#cce0ee",
                    102,
                    "#aec5df",
                    138,
                    "#f28cb1",
                     174,
                      "#8b84bd",
                    210,
                        "#8b84bd",
                    246,
                        "#853795",
                    283,
                        "#810f7c"
                ], /*颜色*/
                "extrusion-height": {"property": "val", "type": "identity"}, /*高度*/
                "extrusion-opacity": 1, /*不透明度(%)*/
//                "extrusion-pattern": "sion-material-32",/*纹理,如果需要贴图，加入此行参数*/
                "extrusion-translate": [0, 0], /*建筑物偏移*/
                "extrusion-translate-anchor": "map" /*建筑物偏移锚点：值域map-正北，viewport--视野*/
            }
        })
    });

image.png