@seniverse/loader NPM

心知气象SDK加载器使用文档

前言

由于SDK功能更新迭代周期较短，如果客户端直接使用SDK的lib版，需要频繁升级版本。

为开发调试方便，减少用户侧使用成本，我们推荐使用加载器的形式使用SDK的相关功能。

1. 安装

npm i @seniverse/loader --save

2. 使用

在相关组件中，创建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+':'+longitudekey：配置了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()