MapGO

# HTML 页面要素列表点击

# 适用需求

大屏或者其他 HTML 界面上的要素列表点击需要地图定位到该要素并且弹窗

# 解决方案

# 总体逻辑

页面点击时，把该要素的必要信息发送给地图，地图接收到信息后，筛选/添加点位并进行定位/高亮/弹窗

# 地图上有该要素

该要素在地图上有对应点位（该要素图层显示和隐藏都可以）

TIP

所有示例参数仅仅是为了展示参数，不是范式

示例如下：

假设地图接收到如下的必要参数：

{
  // 点位所在图层名称（也可以自行根据数据的其他参数获取到要素所在图层名称）（能知道就行）
  "layerID": "大气监测站",
  // 能唯一标识要素的属性key和对应的值（可为多个，只要能根据信息查找到唯一要素即可）
  "pointCode": "dqjcz00001"
}
  • 接收到消息后，调用图层筛选事件，找到对应的要素

筛选事件常用如下：
setLayersFilter (opens new window)
query (opens new window)
queryFeature (opens new window)
queryGraphicsLayer (opens new window)
queryUrlByGeometry (opens new window)

  • 在筛选的回调中，去执行定位和弹窗

注：一般直接调用图层的点击事件即可（注意拼装参数格式和图层点击回调关键参数保持一致）

# 地图上无该要素

一般适用于业务点位数据太多，地图只展示前*条数据，这时，列表数据和地图要素数据就是对不上的

# 传输参数要求

  • 该点位的经纬度（必须）
  • 该点位的其他必要业务属性信息（必须）
  • 该点位的渲染样式信息（可选，没有的话需要满足其他条件，请看下面）

注：

  • 经纬度用于打点和定位
  • 必要的业务属性信息用于渲染、展示以及弹窗
  • 渲染样式信息用于点位展示
    • 如果采用把向现有图层中添加数据的方式打点，可以不用带渲染信息
    • 如果采用单独打点的方式，需要传过去或者增加能让开发者代码中判断使用什么渲染的参数
{
  "lon": 119, // 经度
  "lat": 33, // 纬度
  "level": 1, // 业务数据 - 空气质量级别 （渲染字段）
  "attr1": "其他业务属性",
  "renderer": {
    ...
  }, // 如果是多条数据的话，渲染配置可以放到外面
}

注：渲染的详细配置敬请期待

# 代码主要逻辑

根据接收到的数据，使用添加数据/新建图层的方法在地图上打点、定位、弹窗

注：

←