vue中使用node-gdal

川长思鸟来 2021-07-25 21:02 740阅读 0赞

网上说使用node-gdal需要提前装vs，node-gyp等c/c++运行环境什么的，折腾了一两天，后面发现貌似不装这些运行环境，直接安装也是可以使用的，咱也不知道为什么，反正它就能运行成功。

安装：

cnpm i -S gdal

安装大概5分钟

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

注意：是安装gdal,不是node-gdal

## 创建shp文件：（用w，并且需要“esri shapefile”） ##

参考：[https://www.jianshu.com/p/d4b55ed59cd3][https_www.jianshu.com_p_d4b55ed59cd3]

var gdal = require('gdal');
    
    gdal.config.set('SHAPE_ENCODING', 'CP936');
        var dataset = gdal.open('b.shp', "w", 'ESRI Shapefile');
        var ref = gdal.SpatialReference.fromEPSGA(4326);
        dataset.layers.create('b', ref, gdal.Point);
        var layer = dataset.layers.get(0);
        layer.fields.add(new gdal.FieldDefn('name', gdal.OFTString));
        var feature = new gdal.Feature(layer);
        //给字段赋值
        feature.fields.set('name', '测试');
        //构造图形并赋值
        var pt = new gdal.Point(118.5, 32.1)
        feature.setGeometry(pt);
        layer.features.add(feature);
        layer.flush();

## 读取shp文件：（用r，可以不用加driver） ##

注意路径，不要用"../../"之类的，会报错

//r只读  r+读取修改增加  w可写
        var dataset = gdal.open("public/shp/mypoint.shp", 'r');
        //获取数据集中第一个图层
        var layer = dataset.layers.get(0);
        var fields = layer.fields.getNames()
        var featureCount = layer.features.count()
        var srs = layer.srs.toWKT()
        console.log('srs', srs)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2][]

## 栅格图片的读取/创建-以png/tif为例 ##

var dataset = gdal.open('public/tif/tilelayer_sichuan.tif');
        var band = dataset.bands.get(1)
        var rows = band.size.x;
        var cols = band.size.y;
    
        var pixels_band1 = dataset.bands.get(1).pixels
        var pixels_band2 = dataset.bands.get(2).pixels
        var pixels_band3 = dataset.bands.get(3).pixels
    
        var tif_dataset = gdal.open('mytif3.png', 'w', 'GTiff', rows, cols, 3, gdal.GDT_UInt8)//生成png格式图片
        //var tif_dataset = gdal.open('mytif3.tif', 'w', 'GTiff', rows, cols, 3, gdal.GDT_UInt8)//生成tif格式图片
    
        var tif_pixels1 = tif_dataset.bands.get(1).pixels
        tif_pixels1.write(0, 0, rows, cols, new Uint8Array(pixels_band1.read(0, 0, rows, cols)))
    
        var tif_pixels2 = tif_dataset.bands.get(2).pixels
        tif_pixels2.write(0, 0, rows, cols, new Uint8Array(pixels_band2.read(0, 0, rows, cols)))
    
        var tif_pixels3 = tif_dataset.bands.get(3).pixels
        tif_pixels3.write(0, 0, rows, cols, new Uint8Array(pixels_band3.read(0, 0, rows, cols)))
    
    
        tif_dataset.flush()

ndvi计算（会报错）

//创建栅格图片
        var dataset = gdal.open('public/tif/tilelayer_sichuan.tif');
        var band = dataset.bands.get(1)
        var rows = band.size.x;
        var cols = band.size.y;
    var tif_dataset = gdal.open('mytif3.tif', 'w', 'GTiff', rows, cols, 3, gdal.GDT_UInt8)
    
    //假设波段1为近红外波段，波段2为红外波段
        var jinhongwai = dataset.bands.get(1).pixels.read(0, 0, rows, cols)
        var hongwai = dataset.bands.get(2).pixels.read(0, 0, rows, cols)
    
        //分子=近红外-红外
        var fenzi = jinhongwai.map((item, i) => {
            return item - hongwai[i]
        })
    
        //分母=近红外+红外
        var fenmu = jinhongwai.map((item, i) => {
            return item + hongwai[i]
        })
    
        // ndvi = 分子 / 分母 范围[-1, 1]
    
        var ndvi = fenzi.map((item, i) => {
            return item / fenmu[i]
        })
    
        var tif_pixels1 = tif_dataset.bands.get(1).pixels;
        tif_pixels1.write(0, 0, rows, cols, new Uint8Array(ndvi))
    
        tif_dataset.flush()

以下已成功

注意：write的时候，要将数组包装成typeArray类型，并且注意有小数点的数据要用浮点型。之前一个查了很久的bug就是把tif数据中的像元值类型设为了整型，事实上应该用浮点型才可以

定义空间参考

![20201023112220731.png][]

给新的数据集设置地理仿射变换。

直接把原来的数据集的geoTransform赋值给新数据集的geoTransform就好了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 3][]

然后，把生成的pop\_gdp6加载到Arcgis中，发现nodata区域的值为1，那么现在【空间分析】-【条件分析】-【设为空函数】，把value=1的值设为nodata

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 5][]

然后把\_pop\_gdp6导出为tif

在\_pop\_gdp6上右键【数据】-【导出数据】

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 6][]

导出后，将其在geoserver中发布

注意：如果发布的图层是下面这样一片黑，说明没有给它添加样式。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 7][]

在style中给它添加样式后，就会正常，如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 8][]

现在可以前端加载了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 9][]

加载代码如下：

<template>
      <div id="map"></div>
    </template>
    <script>
    import "ol/ol.css";
    import Map from "ol/Map";
    import View from "ol/View";
    import TileLayer from "ol/layer/Tile";
    import TileWMS from "ol/source/TileWMS";
    import OSM from "ol/source/OSM";
    import { defaults as defaultControls } from "ol/control";
    import ZoomSlider from "ol/control/ZoomSlider";
    
    export default {
      name: "",
      data() {
        return {
          map: null,
        };
      },
      mounted() {
        this.initMap();
      },
      methods: {
        // 初始化地图
        initMap() {
          let view = new View({
            projection: "EPSG:4326",
            center: [104, 32],
            zoom: 7,
          });
          let layer = new TileLayer({
            source: new OSM(),
            visible: true,
            zIndex: 1,
            name: "OSM",
          });
          this.map = new Map({
            layers: [],
            target: "map",
            view: view,
            controls: defaultControls().extend([new ZoomSlider()]),
          });
          this.map.addLayer(layer);
    
          // 加载 GeoServer 发布的 wms 服务
          let wmsLayer = new TileLayer({
            extent: [
              // 边界
              103.8361315977032,
              31.98576887717054,
              105.00874802964982,
              33.04999219355907,
            ],
            source: new TileWMS({
              url: "http://localhost:8090/geoserver/naturalResources/wms",
              // Layers需要指定要显示的图层名
              params: { LAYERS: "naturalResources:_pop_gdp6", TILED: true },
              // serverType明显为geoserver
              serverType: "geoserver",
              // Countries have transparency, so do not fade tiles:
              transition: 0,
            }),
            visible: true,
            zIndex: 2,
            className: "wms",
          });
          this.map.addLayer(wmsLayer);
        },
      },
    };
    </script>
    <style scoped>
    #map {
      height: 100vh;
      width: 100vw;
    }
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/cfc113480ec74ec2bb9ec50797c4af77.png
[https_www.jianshu.com_p_d4b55ed59cd3]: https://www.jianshu.com/p/d4b55ed59cd3
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201007162322856.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2]: /images/20210725/c1e8e2eaa19e48fe8f4033ccfca9e7eb.png
[20201023112220731.png]: /images/20210725/13c5564c6ca64347973f6e59334d75c2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 3]: /images/20210725/b70b426f36ed49cdb0580a65c0e51676.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 4]: /images/20210725/be75f51fa5f0428b927ca574977885f2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 5]: /images/20210725/80a863a36e9b4eb2af646d41ad575ebc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 6]: /images/20210725/40e98995db5b4000b93b7dffb1f6fffc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 7]: /images/20210725/29b517fd595d4b26b5b95cfd9dc705f7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 8]: /images/20210725/3b356683976b46b98d143ed58587b194.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 9]: /images/20210725/3ab8917fe54d446b806ac9890b61b4f5.png