npm package: @gvol-org/daassdk.mapbox
Description: 是一套基于Datacloud 地图API的应用程序接口，您可以使用该套SDK简单快捷的调用Datacloud的地图服务。
Latest version: 1.0.2

# 快速上手

## script 引入

### html 部分

```js

<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 部分

##### 加载数据服务

```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文件加载

```js
//需要引入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文件加载 需要从外部传入色域
```js 
   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方法
```js
   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

```js

    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插件

```js
//需要引入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文件加载 需要从外部传入色域
```js 
   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方法
```js
   const rasters =await image.readRGB({
        pool
    });

    // 此处使用实例方法传入参数options 当前为rpg有色域的数据不需要传入 colorScale domain参数
    instance.addGeoTiffRGBData({
        data: rasters,
        width,
        bound,
        height,
    })

````