天阙可视化大屏

Appearance

On this page

自定义POI

使用步骤

  1. 地图配置-POI图层设置-自定义POI编辑
javascript
(data,comp)=>{
  console.log('data',data)
  const {selectedPoi=false,cluster=false,point_count=0,address=''}=data
  if(cluster){
      return `<div style="color:#ffffff;background-color:red;padding:5px;">聚合数：${point_count} 是否选中：${selectedPoi}</div>`
  }
  return `<div style="color:#ffffff;background-color:green;padding:5px;">${address} 是否选中：${selectedPoi}</div>`
}

(data,comp)=>{
  console.log('data',data)
  const {selectedPoi=false,cluster=false,point_count=0,address=''}=data
  if(cluster){
      return `<div style="color:#ffffff;background-color:red;padding:5px;">聚合数：${point_count} 是否选中：${selectedPoi}</div>`
  }
  return `<div style="color:#ffffff;background-color:green;padding:5px;">${address} 是否选中：${selectedPoi}</div>`
}

参数说明:

聚合状态data:

javascript
{
    cluster: true, 
    cluster_id: 13,
    point_count: 6, 
    point_count_abbreviated: 6, 
    selectedPoi: false
}

{
    cluster: true, 
    cluster_id: 13,
    point_count: 6, 
    point_count_abbreviated: 6, 
    selectedPoi: false
}

普通状态data

javascript
{
    address: "杭州余杭区东湖街道东湖中路5号", location: "120.21201, 30.2084", 
    iconName: "gis-user", 
    selectedPoi: false, 
    id: "cae37475-f8a6-4de2-9193-41f7e9419404"
}

{
    address: "杭州余杭区东湖街道东湖中路5号", location: "120.21201, 30.2084", 
    iconName: "gis-user", 
    selectedPoi: false, 
    id: "cae37475-f8a6-4de2-9193-41f7e9419404"
}

2.在地图事件中调用

javascript
(data,comp)=>{
  const pois=[
    {
      "address":"杭州余杭区东湖街道东湖中路1号",
      "location":"120.179882, 30.298777",
    },
    {
      "address":"杭州余杭区东湖街道东湖中路2号",
      "location":"120.186781, 30.288549",
    },
    {
      "address":"杭州余杭区东湖街道东湖中路3号",
      "location":"120.202592, 30.280565",
    },
    {
      "address":"杭州余杭区东湖街道东湖中路4号",
      "location":"120.228463, 30.302768",
    },
    {
      "address":"杭州余杭区东湖街道东湖中路5号",
      "location":"120.21201, 30.2084",
    },
    {
      "address":"杭州余杭区东湖街道东湖中路6号",
      "location":"120.219552, 30.295534",
    },
  ]
  comp.poiLayerAdd('wanggeyuan', pois, {                
      clean: true,                
      append: false,                
      cleanAndAppen: false,                
      marker: false,
      customPoi:true,//核心配置
  })
}

(data,comp)=>{
  const pois=[
    {
      "address":"杭州余杭区东湖街道东湖中路1号",
      "location":"120.179882, 30.298777",
    },
    {
      "address":"杭州余杭区东湖街道东湖中路2号",
      "location":"120.186781, 30.288549",
    },
    {
      "address":"杭州余杭区东湖街道东湖中路3号",
      "location":"120.202592, 30.280565",
    },
    {
      "address":"杭州余杭区东湖街道东湖中路4号",
      "location":"120.228463, 30.302768",
    },
    {
      "address":"杭州余杭区东湖街道东湖中路5号",
      "location":"120.21201, 30.2084",
    },
    {
      "address":"杭州余杭区东湖街道东湖中路6号",
      "location":"120.219552, 30.295534",
    },
  ]
  comp.poiLayerAdd('wanggeyuan', pois, {                
      clean: true,                
      append: false,                
      cleanAndAppen: false,                
      marker: false,
      customPoi:true,//核心配置
  })
}

demo地址：http://tianque.oicp.net:28182/tq-bigscreen-web/#/build/1480445296539344897

Last updated: