@gvol-org/daassdk.mapbox NPM

快速上手

script 引入

html 部分

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Mapbox测试</title>
  <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link href="../node_modules/mapbox-gl/dist/mapbox-gl.css" rel="stylesheet">
  <script src="../node_modules/mapbox-gl/dist/mapbox-gl.js"></script>
  <style>
    #mapbox {
      width: 100%;
      height: 100%;
    }
  </style>
  <script src="../daassdk/daassdk.mapbox.js"></script>

</head>

<body>
  <div id="mapbox"></div>
</body>

js 部分

加载数据服务

<script>
    //创建map实例
    mapboxgl.accessToken ="mapboxgl的token";
    const map = new mapboxgl.Map({
      container: 'mapbox',
      projection: { name: "globe" },
    });

   let instance = daassdk.useMapbox(map);
   instance.addLayer({
    name: 'yingxiang',
    baseUrl: "https://tiles.geovis.online/base/v1/vec/{z}/{x}/{y}",
    tmsIds: "w",
    format: 'png',
    token: "Datacloud的地图服务的token",
    minimumLevel: 0,
    maximumLevel: 18,
  });
  
</script>

支持tif文件加载

//需要引入geotiff进行tif文件解析
    <script src="https://cdn.jsdelivr.net/npm/geotiff"></script>
    const pool = new GeoTIFF.Pool();
    const response = await fetch('./Qingdao.tif');//tif文件目录
    const arrayBuffer = await response.arrayBuffer();
    const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer);
    const image = await tiff.getImage()
    const width = image.getWidth();
    const height  = image.getHeight();
    const bound  = image.getBoundingBox()

tif文件有以下两种数据内容：

当前为无色域的tif文件加载需要从外部传入色域

   const rasters =await image.readRasters({
        samples: [0],
        window: [0, 0, width, height],
        pool
    });

    // 此处使用实例方法传入参数options  单波段tif文件数据 需要从外部传入色域
    instance.addGeoTiffData({
        data: rasters[0],
        width,
        height,
        bound,
        clampLow: false,
        clampHigh: false,
        domain: [10, 65000],
        colorScale: "viridis",
    })

当前为有色域的tif文件加载需要使用addGeoTiffRGBData方法

   const rasters =await image.readRGB({
        pool
    });

       // 此处使用实例方法传入参数options 当前为rpg有色域的数据不需要传入 colorScale domain参数
    instance.addGeoTiffRGBData({
        data: rasters,
        width,
        bound,
        height,
    })

通过 npm 安装

npm i mapbox-gl @gvol-org/daassdk.mapbox geotiff

    import "mapbox-gl/dist/mapbox-gl.css";
    import mapboxgl from "mapbox-gl";
    import { useMapbox } from '@gvol-org/daassdk.mapbox'

    // 初始化地球
    mapboxgl.accessToken ="mapboxgl的token";
    const map = new mapboxgl.Map({
            container: 'mapbox',//指定dom的id!
            projection: { name: "globe" },//是否渲染成3d球
        });
    let instance = useMapbox(map);
    instance.addLayer({
    name: 'yingxiang',
    baseUrl: "https://tiles.geovis.online/base/v1/vec/{z}/{x}/{y}",
    tmsIds: "w",
    format: 'png',
    token: "Datacloud的地图服务的token",
    minimumLevel: 0,
    maximumLevel: 18,
  });

支持tif文件加载

npm i geotiff 需先安装geotiff插件

//需要引入geotiff进行tif文件解析
    import * GeoTIFF from 'geotiff';
    const pool = new GeoTIFF.Pool();
    const response = await fetch('./Qingdao.tif');//tif文件目录
    const arrayBuffer = await response.arrayBuffer();
    const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer);
    const image = await tiff.getImage()
    const width = image.getWidth();
    const height  = image.getHeight();
    const bound  = image.getBoundingBox()

tif文件有以下两种数据内容：

当前为无色域的tif文件加载需要从外部传入色域

   const rasters =await image.readRasters({
        samples: [0],
        window: [0, 0, width, height],
        pool
    });


    //   有这些默认的色域可以选择colorscales:

    // | viridis   | inferno     | turbo      |
    // | rainbow   | jet         | hsv        |
    // | hot       | cool        | spring     |
    // | summer    | autumn      | winter     |
    // | bone      | copper      | greys      |
    // | ylgnbu    | greens      | ylorrd     |
    // | bluered   | rdbu        | picnic     | 
    // | portland  | blackbody   | earth      | 
    // | electric  | magma       | plasma     |

    // 此处使用实例方法传入参数options  需要从外部传入色域
    instance.addGeoTiffData({
        data: rasters[0],
        width,
        height,
        bound,
        clampLow: false,
        clampHigh: false,
        domain: [10, 650000],
        colorScale: "viridis",
    })

    // // 自定义色域
    // daassdk.addColorScale('myselfColor', ['rgba(92,58,16,0)','rgba(92,58,16,0)', '#fabd08', '#f1e93f', '#f1ff8f', '#fcfff7' ],[ 0, 0.05, 0.1, 0.25, 0.5, 1.0 ])  
    // const domain1 = [0, 90]
    // instance.addGeoTiffData({
    //     data: rasters[0],
    //     width,
    //     height,
    //     bound,
    //     domain: domain1,
    //     colorScale: "myselfColor",
    // })

当前为有色域的tif文件加载需要使用addGeoTiffRGBData方法

   const rasters =await image.readRGB({
        pool
    });

    // 此处使用实例方法传入参数options 当前为rpg有色域的数据不需要传入 colorScale domain参数
    instance.addGeoTiffRGBData({
        data: rasters,
        width,
        bound,
        height,
    })

@everything-registry/sub-chunk-380

1.0.2

1 year ago

1.0.1

1 year ago

1.0.0

1 year ago