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

前言

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

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

1. 安装

npm i @seniverse/loader --save

2. 使用

1. 在相关组件中，创建div标签作为地图容器。并按项目需要设置容器的尺寸样式。

  <div class="container">
    <div id="map-container"></div>
  </div>

2. 项目中引入loader

import SeniverseLoader from '@seniverse/loader'

3. 在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");
     })

4. 退出时销毁组件

    //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 | | 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-combo.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()

4. demo项目

React：https://cdn.sencdn.com/sdk/sdk-react-demo.zip

Vue3：https://cdn.sencdn.com/sdk/sdk-vue-demo.zip