@gvol-org/daassdk.mapbox
v1.0.2
Published
是一套基于Datacloud 地图API的应用程序接口，您可以使用该套SDK简单快捷的调用Datacloud的地图服务。
Downloads
4
Keywords
Readme
快速上手
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,
})