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.attrreturn "我是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})