new mars3d.layer.GeoJsonLayer({的pupup配置参考

new mars3d.layer.GeoJsonLayer({的pupup配置可选项以及相关效果参考：

说明：popup按属性字段配置，可以是字符串模板或数组

1.popup仅配置{type}{name}等属性的的时候，指显示json文件内数据的type与name，效果如下

相关代码：

  const graphicLayer = new mars3d.layer.GeoJsonLayer({
    name: "标绘示例数据",
    url: "//data.mars3d.cn/file/geojson/mars3d-draw.json",
    popup: "{type} {name}",
    queryParameters: {
      token: "mars3d" // 可以传自定义url参数，如token等
    },
    symbol: {
      merge: true,
      styleOptions: {
        // 高亮时的样式
        highlight: {
          type: "click",
          opacity: 0.9
        }
      }
    },
    flyTo: isFlyTo
  })
  map.addLayer(graphicLayer)

2.popup配置 'all'的时候，可以显示json文件的所有属性，常用于测试知道数据有哪些属性

相关代码：

  const graphicLayer = new mars3d.layer.GeoJsonLayer({
    name: "标绘示例数据",
    url: "//data.mars3d.cn/file/geojson/mars3d-draw.json",
    popup: "all",
    queryParameters: {
      token: "mars3d" // 可以传自定义url参数，如token等
    },
    symbol: {
      merge: true,
      styleOptions: {
        // 高亮时的样式
        highlight: {
          type: "click",
          opacity: 0.9
        }
      }
    },
    flyTo: isFlyTo
  })
  map.addLayer(graphicLayer)

3.popup配置数组的时候，效果如下：

相关代码：

  const graphicLayer = new mars3d.layer.GeoJsonLayer({
    name: "标绘示例数据",
    url: "//data.mars3d.cn/file/geojson/mars3d-draw.json",
    popup: [
      { field: "id", name: "编码" },
      { field: "name", name: "名称" },
      { field: "type", name: "类型" },
      {
        type: "html",
        html: "<label>视频</label><video src='http://data.mars3d.cn/file/video/lukou.mp4' controls autoplay style=\"width: 300px;\" ></video>"
      }
    ],
    queryParameters: {
      token: "mars3d" // 可以传自定义url参数，如token等
    },
    symbol: {
      merge: true,
      styleOptions: {
        // 高亮时的样式
        highlight: {
          type: "click",
          opacity: 0.9
        }
      }
    },
    flyTo: isFlyTo
  })
  map.addLayer(graphicLayer)

4.popup不展示不需要的属性的时候，可以使用bindPopup实现。

相关代码：

graphicLayer.bindPopup(function (event) {
const attr = { ...event.graphic.attr }
// 删除不展示的属性
delete attr.layer_name

// 增加自定义属性
attr["类型"] = event.graphic.type
attr["来源"] = "我是layer上绑定的Popup"
attr["备注"] = "我支持鼠标交互"

return mars3d.Util.getTemplateHtml({ title: "矢量图层", template: "all", attr: attr })

})

5. popup上加单击按钮操作的时候，可以bindPopup

  geoJsonLayer = new mars3d.layer.GeoJsonLayer({
    name: "标绘示例数据",
    url: "//data.mars3d.cn/file/geojson/mars3d-draw.json"
  })
  map.addLayer(geoJsonLayer)

  // 在layer上绑定Popup单击弹窗
  geoJsonLayer.bindPopup(
    function (event) {
      const attr = event.graphic.attr
      return "我是layer上绑定的自定义模版Popup<br />" + attr.type
    },
    {
      template: `<div class="marsBlackPanel animation-spaceInDown">
                        <div class="marsBlackPanel-text">{content}</div>
                        <span class="mars3d-popup-close-button closeButton" >×</span>
                      </div>`,
      horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
      verticalOrigin: Cesium.VerticalOrigin.CENTER
    }
  )