# 图层

# 图层信息

# 查询图层要素

API参考

描述:

该接口用于查询要素图层(包括接口图层、要素图层、GeoJSON 图层、WFS 图层)中所包含的要素,通过一定的查询条件,返回符合该条件的查询结果。

定义:

  /**
  * 查询图层要素
  * @param {string} layerName               查询图层名
  * @param {(string|Object)} queryCondition 查询字段名/查询字段组合对象
  * @param {(string|number)} value          查询字段值
  **/
  function queryGraphicsLayer(layerName, queryCondition, value, callback) {

  }

示例:

1: 单字段查询

  queryGraphicsLayer('layer1', 'pointCode', '001', function(graphics){
    //graphics为查询结果,格式为数组。
  })

2:多字段查询

  queryGraphicsLayer('layer1', {
    codeControlLevel: 1,
    codeWaterLevel: 2
  }, null, function(graphics){
    //graphics为查询结果,格式为数组。
  })

注:单字段查询也可以使用多字段查询的方式进行

# 图层弹窗

API参考

描述:

该接口用于显示图层要素信息的弹窗,该弹窗是一个已经写好的 HTML 页面

在注册了图层事件之后,可在该事件中调用显示弹窗接口。注册图层事件接口参见:注册图层事件 (opens new window)

定义:

  /**
  * 查询图层要素
  * @param {string} title      弹窗标题
  * @param {string} content    弹窗内容
  * @param {number} longitude  弹窗显示位置:经度
  * @param {number} latitude   弹窗显示位置:纬度
  * @param {Object} options    弹窗设置
  * @example  options = {
      wkid: 4326        空间参考
      width: 500        弹窗宽度
      height: 215       弹窗高度
      idadjust: true    是否自动调节(弹窗大小超过屏幕时,自动调节至能显示完整弹窗的位置)
      offsetX: 0        横向偏移量
      offsetY: 0        纵向偏移量
    }
  **/
  function showInfoWindow(title, content, longitude, latitude, options) {

  }

示例:

showInfoWindow('', '<iframe src="../html/popup/risk-source-popup.html" style="width: 100%;
               height: 100px;"></iframe>', 98, 23, options)

注:一般来说该接口传入的弹窗均为已经写好的 HTML 页面,在这种情况下 title 参数传空。title 参数仅在 content 不为 iframe 时(这时的弹窗为系统自带样式,一般无法满足可视化需求),并且需要显示标题时才会添加。

# 图层操作

# 图层显隐

API参考

描述:

该接口用于修改图层的显隐状态。

定义:

事件订阅处

  /**
  * 查询图层要素
  * @param {string} layerName  图层名称
  * @param {bool} visible      图层显隐(true/false)
  */
  subscribeEvent('change-layer-visibility', function(data) {
    ```data.layerName
       data.visible```
  })

示例:

  publishEvent('change-layer-visibility', {
    layers: [{
      layerName: '城市浓度', // 图层名称
      visible: true // 显隐性
    }],
    otherLayers: false // 其他图层的可见性 (可选,不配置,不修改其他图层的显隐性)
  });

# 图层数据更新

API参考

描述:

该接口用于更新图层数据,包括接口图层、关联接口的 GeoJSON 图层

定义:

事件订阅处

  /**
  * 查询图层要素
  * @param {string} layerName  图层名称
  * @param {Object} params     要更新的图层接口字段
  */
  subscribeEvent('update-layer', function(data) {
    ```data.name
       data.params
       data.visible```
  })

示例:

  publishEvent('update-layer', [{
    name: 'layer1', // 图层名称
    params: {
      monitorTime: '2020-03-06 10:00:00' // key为该图层接口地址中配置的可变参数,value为新值
      controlLevels: 2,
    },
    visible: true // 更新完后该图层的显隐性
  }]);

注:params 中的参数字段需要该图层在图层列表配置中也添加相同的字段,对应地图可视化配置平台中的添加参数字段功能,配置步骤如下图 接口参数配置

# 图层渲染修改

API参考

描述:

该接口用于修改图层渲染信息,包括接口图层、要素图层、GeoJSON 图层、WFS 图层均可使用该接口。

定义:

事件订阅处

  /**
  * 查询图层要素
  * @param {string} layerName  图层名称
  * @param {Object} renderer   新的图层渲染信息
  */
  subscribeEvent('change-layer-renderer', function(data) {
    ```data.layerName
       data.renderer```
  }

示例:

  publishEvent('change-layer-renderer', {
    layerName: 'layer1',
    renderer: renderer
  })

注 1:具体 renderer 结构参见:图层渲染 (opens new window)(渲染节点下的所有示例)

注 2:更新 Echarts 图层的渲染信息时,需要传入包含 renderType、option 和 rendererInfo 节点的完整渲染信息。其余图层则只需传入 renderInfo 节点下的数据即可

# 图层列表更新

API参考

描述:

该接口用于更新整个图层列表,之前的图层将会被全部移除。

定义:

事件订阅处

  /**
  * 查询图层要素
  * @param {Object} config   新的图层列表配置内容
  */
  subscribeEvent('update-layers', config)

示例:

  publishEvent('update-layers', {
    "layers": [
      "name": "地表水",
      "visible": true,
      "children": [
        {
          ```
          ```
        }
      ]
    ]
  })

注 1:完整图层列表配置内容参见:图层列表配置内容 (opens new window)

注 2:完整图层列表配置文件也可通过地图可视化配置平台配置

# 定位

# 定位至图层要素

API参考

描述:

该接口用于定位至符合某个查询条件的要素附近,包括接口图层、GeoJSON 图层、要素图层和 WFS 图层

定义:

  /**
  * 查询图层要素
  * @param {string} layerName               图层名称
  * @param {(Object|string)} queryCondition 查询字段名/查询字段组合对象
  * @param {(string|number)} value          查询字段值
  * @param {number} factor                  定位范围扩大倍数
  *                                        (默认为1.5,即定位范围为查询结果要素范围的1.5倍)
  * @param {requestCallback} callback       查询结果的回调函数,返回查询到的要素集合
  */
  function zoomToGraphicsLayer(layerName, queryCondition, value, factor, callback) {

  }

示例:

  zoomToGraphicsLayer('layer1', 'pointCode', '001', 1.5, function(graphics){
    console.log(graphics);
  })
  zoomToGraphicsLayer('layer1', {
    controlLevels: 1,
    codeWaterLevel: 2
  }, null, 1.5, function(graphics){
    console.log(graphics);
  })

注:单字段查询也可以使用多字段查询的方式进行

# 定位至要素

API参考

描述:

该接口用于定位要素附近,该要素可以是图层查询结果,也可以是注册图层事件获取的要素结果,包括接口图层、GeoJSON 图层、要素图层和 WFS 图层

定义:

  /**
  * 查询图层要素
  * @param {Graphic[]} graphics  要素集合(数组)
  * @param {number} factor       定位范围扩大倍数(默认为1.5,即定位范围为查询结果要素范围的1.5倍)
  */
  function zoomToGraphics(graphics, factor) {

  }

示例:

  zoomToGraphics(graphics, 1.5)

# 定位至经纬度(范围)

描述:

该接口用于定位某个经纬度或范围附近。

定义:

  /**
  * 查询图层要素
  * @param {(Array|Object)} extent  定位的经纬度数组或者范围对象
  * @param {number} wkid            空间参考(默认为4326)
  */
  function zoomToExtent(extent, wkid) {

  }

示例:

1.定位至范围

  zoomToExtent({
    xmin: 113
    ymin: 23
    xmax: 114
    ymax: 24,
    expandFactor: 1.5
  }, 4490)

注:其中 xmin 为定位范围的最小经度,ymin为最小纬度,xmax为最大经度,ymax为最大纬度,expandFactor 为范围扩展系数(默认为 1.5,即定位范围为输入范围的 1.5倍)

2.定位至经纬度

  zoomToExtent([113, 23, 0.1], 4326)

注:其中第一个参数为数组,其中依次为经度、纬度、范围扩展系数

# 其他

# 点位波纹效果

描述:

该接口用于生成某个点位的选中波纹效果图层,该图层实质是一个HTML图层,移除时调用removeCustomLayer( layerName )接口即可。

定义:

  /**
  * 查询图层要素
  * @param {string} layerName           选中波纹效果的图层名称
  * @param {(Graphic|Object)} graphic   空间参考(默认为4326)
  * @param {sting} colorIn              波纹圈内的颜色(rgba(255,0,0,0)或者16进制颜色)
  * @param {sting} colorOut             波纹圈外的颜色(rgba(255,0,0,0)或者16进制颜色)
  * @param {number} width               波纹整体宽度
  * @param {number} height              波纹整体高度
  * @param {Object} options             空间参考(默认为4326)
  * @param {boolean} isVisible          是否显示(默认为true)
  */
  function showPointRipplePoint(layerName, graphic, colorIn, colorOut, width, height, options, isVisible) {

  }

示例:

1.可以获取到graphic要素

  showPointRipplePoint('layer1', graphic, null, null, 40, 40, {
    pointerEvent: 'none',
    zindex: 2
  })

注:其中 graphic 可以是图层查询结果,也可以是注册图层事件获取的要素结果

2.可以获取到该位置的经纬度

  showPointRipplePoint('layer1', {
    geometry: {
      x: 113,
      y: 23
    }
  }, null, null, 40, 40, {
    pointerEvent: 'none',
    zindex: 2
  })

注 1:其中第二个参数下的 geometry 中的 x 和 y 分别为经度和纬度

注 2:其中 pointerEvent: 'none' 表示波纹效果不会影响其它图层的鼠标事件。zindex 表示该图层的 DOM 层级