Skip to main content

资源管理器-resourceService

resourceService是框架内置的资源管理器,是用来管理有复用价值资源的工具。提供了资源的加载、更新和删除操作,支持从配置文件或者构造参数构建资源,提供了资源ID级别的事件监听。对于项目中具有复用价值的资源(比如色标,图片,样式等),可以使用资源管理器统一管理,方便取用。可以在项目或模块入口提前加载这些资源,如果是相同的资源应该只在一个地方加载。

预定义的资源类型

QE中预定义的资源类型有如下几种:

  • images: 图片资源
  • stopRules: 分段规则资源,如调色板
  • featureStyles: 矢量样式资源
  • jsonFiles: json文件资源
  • rawFiles: 二进制文件资源
  • texts: 字符串资源
  • 除了上面这些预定义的资源类型外,QE也支持用户去扩展新类型的资源,请查看相应高级教程。

    资源加载

    在使用资源之前,我们需要将资源提前加载进内存。有两种方式可以构建资源,使用配置文件或者构造参数构建资源。

    配置文件构建

    从资源配置对象信息加载资源

    首先需要定义资源集合配置对象,该对象符合预定义的资源集合配置对象接口IResourceConfigPredefined,该对象中的key就是资源的类型,每一个二级对象中的key表示具体资源的唯一ID。

    const resourceConfig: IResourceConfigPredefined = {
      //这里是资源的类型 
      "images": {
        //这里是资源的ID
        "plane": "demos/images/plane.png",
        "level1": "demos/images/level1.jpg",
        "level2": "demos/images/level2.jpg",
        "level3": "demos/images/level3.jpg",
        "level4": "demos/images/level4.jpg",
      },
      "stopRules": {
        "image-warning": {
          "stops": [
            {
              "value": "一级",
              "stop": "level1#res"
            },
            {
              "value": "二级",
              "stop": "level2#res"
            },
            {
              "value": "三级",
              "stop": "level3#res"
            },
            {
              "value": "四级",
              "stop": "level4#res"
            }
          ],
          "fieldName": "level",
          "action": "unique"
        },
        "color-precp": "demos/styles/precp.color.rules.json",
        "color-temp": "demos/styles/temp.color.rules.json"
      },
      "featureStyles": {
        "tempStyle": "demos/styles/temp.feature.style.json",
        "preStyle": {
          "polygon": {
            "fill": true,
            "color": "image-warning#res"
          }
        }
      },
      "jsonFiles": {
      }
    }
    
    如果配置的值是资源路径的形式,绝对路径请以/开头,否则认为是相对于静态资源目录下的目录(consts.resourcePath中配置静态资源目录,默认是public)

    然后从刚配置的资源配置对象信息加载资源

    import { resourceService } from "quickearth";
    resourceService.loadResourceFromConfig(resourceConfig)
    

    从一个配置地址请求资源

    也可以将资源集合配置对象保存在一个json文件中,然后通过json文件地址加载所有资源。

    demo.config.json内容如下,保存的就是之前配置的资源集合对象。

    {
      //这里是资源的类型 
      "images": {
        //这里是资源的ID
        "plane": "demos/images/plane.png",
        "level1": "demos/images/level1.jpg",
        "level2": "demos/images/level2.jpg",
        "level3": "demos/images/level3.jpg",
        "level4": "demos/images/level4.jpg",
      },
      "stopRules": {
        "image-warning": {
          "stops": [
            {
              "value": "一级",
              "stop": "level1#res"
            },
            {
              "value": "二级",
              "stop": "level2#res"
            },
            {
              "value": "三级",
              "stop": "level3#res"
            },
            {
              "value": "四级",
              "stop": "level4#res"
            }
          ],
          "fieldName": "level",
          "action": "unique"
        },
        "color-precp": "demos/styles/precp.color.rules.json",
        "color-temp": "demos/styles/temp.color.rules.json"
      },
      "featureStyles": {
        "tempStyle": "demos/styles/temp.feature.style.json",
        "preStyle": {
          "polygon": {
            "fill": true,
            "color": "image-warning#res"
          }
        }
      },
      "jsonFiles": {
      }
    }
    
    import { resourceService } from "quickearth";
    resourceService.loadResourceFromConfigPath("demos/styles/demo.config.json")
    
    构造参数构建资源

    因为是预定义的资源类型,这些资源的构造参数框架已经内置,所以只需提供资源描述信息IResourceInfo便可构建资源。

    加载一个资源实例

    提供一个资源描述信息来加载资源,因为要加载的这个资源是分级规则,所以它的resourceType"stopRules",key表示资源ID,这里requestInfo是一个url地址字符串。

    import { resourceService } from "quickearth";
    const resourceInfo: IResourceInfo = {
      requestInfo: "demos/styles/precp.color.rules.json",
      resourceType: "stopRules",
      key: "color-precp",
    }
    resourceService.loadResource(resourceInfo)
    

    加载一组资源实例

    当然也可以通过一次提供多个资源描述信息来一次加载多个资源。

    const resourceInfos: IResourceInfo[] = [{
      requestInfo: "demos/styles/precp.color.rules.json",
      resourceType: "stopRules",
      key: "color-precp"
    },{
      requestInfo: "demos/images/plane.png",
      resourceType: "images",
      key: "plane"
    }, ...]
    resourceService.loadResources(resourceInfos);
    
    添加一个资源实例

    如果已经是一个资源实例,推荐直接使用addResource添加到资源中。

    下面这个示例,我们定义了一个格点风场标签的样式,并将它存进资源管理器中。

    const windLabelStyle: IGridLabelStyleOptions = {
      text: {
        data: "#decimal",
        offset: [0, 15],
        color: "orange"
      },
      image: {
        data: "image-wind#res",
        angle: "#degree2arc|1",
        color: "color-wind#res"
      }
    }
    resourceService.addResource("style-wind-label", {
      instance: windLabelStyle,
      resourceType: resourceTypePreDefined.jsonFiles
    });
    

    然后,在设置图层样式的时候,便可以使用资源加载器直接获取到。

    const windLabelLayer = new LGridLabelLayer({
      name: "风向风速"
    }).setDrawOptions("style-wind-label#res").setDataSource(windProvider);
    map.addLayer(windLabelLayer);
    

    资源更新

    资源更新的方法和上面几种资源构建的方法是一样的。只需设置updateIfExists为true。因为如果资源管理器中已经存在相同ID的资源,可以通过参数updateIfExists来决定是否覆盖掉原有的资源。updateIfExists默认为否,即不更新。

    资源获取

    资源加载器#res

    在上面的示例中,其实我们已经使用了,setDrawOptions("style-wind-label#res")中#res就是资源加载器,表示获取资源ID为style-wind-label的资源。资源加载器就是用来获取资源管理器中的资源的。

    获取资源实例

    获取资源实例指获取到具体的资源数据。通过资源ID,即可获取到资源实例,如下示例中,资源ID为raw-rh的资源中存储着相对湿度的二进制数据,我们这里获取到数据后,直接构建数据源显示到图层。

    //获取资源ID为raw-rh的资源实例
    const rhRes = resourceService.getResource("raw-rh").instance;
    const provider = new QEGridDataProvider(rhRes);
    const gridLabelLayer = new LGridLabelLayer({
      debugShowPerformance: true, name: "相对湿度"
    })
    .setDataSource(provider)
    .setDrawOptions(labelStyleOptions);
    map.addLayer(gridLabelLayer);
    

    还有一个常见的应用是获取资源管理器中的分级规则构建colorScale。

    const colorScale = BitmapColorScaleGL.createFromStopRules(resourceService.getResource("color-temp").instance, 256, false, 0, -2, 50);     //根据颜色分段规则创建colorScale
    const style: IPixelLayerStyleOptions = {          //绘制样式配置
      colorScale: colorScale,                         //格点颜色使用colorScale的方式
      ...
    }
    

    资源移除

    移除一个资源实例很简单,通过资源ID即可。

    import { resourceService } from "quickearth";
    resourceService.removeResource("color-temp");
    

    资源的事件监听

    资源管理器中还提供了资源增加、更新、加载以及删除的事件监听,我们可以在需要的时候注册回调函数,系统会在相应资源被增加,被更新,被加载以及被删除的时候自动触发我们注册的回调函数。

    whenResourceAdded 添加指定资源第一次增加的监听(删除后再添加也算第一次增加)

    import { resourceService } from "quickearth";
    resourceService.whenResourceAdded("style-wind-label", (resource: IResourceObject) => {
    	//当第一次添加资源ID为style-wind-label的资源时,执行下面代码
      	...
    })
    

    whenResourceUpdated 添加指定资源被更新后的回调

    whenResourceLoaded 添加指定资源被加载后的回调

    whenResourceRemoved 添加指定资源被移出后的回调