心知气象SDK加载器使用文档
前言
由于SDK功能更新迭代周期较短，如果客户端直接使用SDK的lib版，需要频繁升级版本。
为开发调试方便，减少用户侧使用成本，我们推荐使用加载器的形式使用SDK的相关功能。
1. 安装
npm i @seniverse/loader --save2. 使用
- 在相关组件中，创建div标签作为地图容器。并按项目需要设置容器的尺寸样式。
<div class="container">
<div id="map-container"></div>
</div>- 项目中引入loader
import SeniverseLoader from '@seniverse/loader'- 在dom渲染成功后，加载气象图层。
//React componentDidMount(){...}中
//Vue onMounted(() => {...})中
//配置
const config = {}
new SeniverseLoader(config).load().then((sdk) => {
//sdk加载成功后，配置其相应行为回调函数。详见下方文档
sdk.mounted = () => {
sdk.onClick = (longitude, latitude) => {
console.log("经度:", longitude, " 纬度:", latitude);
};
//...
};
//挂载图层
sdk.mount("#map-container");
})- 退出时销毁组件
//React componentWillUnmount(){...}中
//Vue onUnmounted(() => {...})中
sdk.unmount();3. 初始化配置
1. config
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| version | string | sdk版本号。当sdk版本升级时，只需要修改该字段 | |
| apiKey | x | 后台提供的数据接口密钥。 如果不想密钥暴露，可使用代理模式，见proxy字段。 |
|
| mapConfig | {} | 地图配置 | |
| mapConfig.layers | [] | 图层配置。 当前支持：["wns_100m", "ghi", "tem", "pre", "rhu", "vis"]。 wns_100m：100米风速； ghi：辐射 tem：气温 pre：降水 rhu：湿度 vis：能见度 图层选择列表与数据面板元素顺序与本数组相同。 |
|
| mapConfig.tileConfig | {} | mapbox样式及token配置 | |
| mapConfig.tileConfig.boundaryStyle | string | 区域边界样式id | |
| mapConfig.tileConfig.terrainStyle | string | 地形底图样式id | |
| mapConfig.tileConfig.accessToken | string | mapbox的accessToken | |
| mapConfig.indicator | {} | x | 点击图层时，标记的样式 |
| mapConfig.indicator.outer | string | 外环颜色。css兼容的颜色例如'#fff' | |
| mapConfig.indicator.inner | string | 内环颜色。css兼容的颜色例如'#3C7EFF' | |
| mapConfig.indicator.width | number | 环的宽度 | |
| mapConfig.indicator.radius | number | 圆的半径 | |
| panel | boolean | 是否显示下方数据控制面板 | |
| proxy | {} | 代理模式配置。 | |
| proxy.dataUrl | string | 获取特定经纬度气象数据接口地址 会附带两个参数： locations :纬度经度，以冒号连接，latitude+':'+longitude key：配置了apiKey时才有 默认地址：//api.seniverse.com/v4?fields=weather_15m&locations=34.08906131584996:101.86523437500001&key=xxxxx |
|
| proxy.tiffUrl | string | 依据分块信息获取图块的地址 地址中需带有参数: {element}，{batch}，{forecast}，{z}，{x}，{y} key：配置了apiKey时才有 sdk将替换这些参数 默认地址： "//data.seniverse.com/layers/tiles/{element}/{batch}/{forecast}/{z}/{x}/{y}.tiff?key=" |
|
| proxy.metaUrl | string | 预报元素及批次信息 参数key：配置了apiKey时才有 默认值："//data.seniverse.com/layers/tiles/meta.json?key=" |
|
| contents | {} | 自定义弹窗相关配置 | |
| contents.markerContent | (paras) => $el | 自己添加的marker点击时的弹窗内容。 paras参数包含：latlng:经纬度 创建marker时传入的自定义extra内容 emitter：事件emitter，用来主动触发内置事件，例如关闭弹窗等。详见demo |
|
| contents.indicatorContent | (paras) => $el | 点击图层时的弹窗内容。 paras参数包含： latlng：经纬度 emitter：事件emitter，用来主动触发内置事件，例如关闭弹窗等。详见demo |
|
| contents.onMarkerClose | marker弹窗关闭时的回调 | ||
| contents.onMarkerClick | (paras) =>{} | 点击marker时的响应事件。参数与markerContent相同 |
2. 方法及回调
let sdk;
new SeniverseLoader(config).load().then((obj) => {
sdk=obj;
// 1.创建成功后的回调
sdk.mounted = () => {
//2.点击地图的事件
sdk.onClick = (longitude: number, latitude: number) => {
console.log("经度:", longitude, " 纬度:", latitude);
};
//3.手动添加marker
sdk.addMarker({
latitude:39.36827, //纬度
longitude:109.37988, //经度
id:'string', //mark的id
minZoom: 1, //可选，zoom达到一定级别时隐藏,默认1
outer: "#fff", //可选，外环颜色,默认#fff
inner: "orange", //可选，内部环颜色,默认orange
width: 2, //可选，环的宽度,默认2
opacity: 1, //可选，透明度,默认1
radius: 6, //可选，半径,默认6
extra:{ //用户自定义信息，会回传给弹窗及点击事件
idxxx:'xxxxxxx',
content:'任意内容',
}
})
}
//挂载组件
sdk.mount("#map-container");
})
//销毁组件
sdk.unmount();
//放大
sdk.zoomIn()
//缩小
sdk.zoomOut()