我实际上正在开发基于传单的Power BI Custom Visual。 （https://leafletjs.com/）
我想在传单地图和表格中显示的数据之间实现交互性。目的是在地图上选择国家/地区，然后应过滤功率表中的所有相关数据
我一直在阅读这些文档：
https://github.com/Microsoft/PowerBI-visuals/blob/master/Visual/Selection.md
在互联网上找到的大多数示例都是针对条形图，矩阵或其他类型的视觉效果而设计的。我的传单地图以表格形式实现，我找不到任何有关如何实现交互性的示例。
我还尝试了使用选择管理器通过onclick函数管理选择（该函数还显示长而短的弹出窗口）。
map.on('click', clickdid); //sets click function
function clickdid(e) {
console.log(e);
debugger;
this.selectionManager.select(e.selectionId)
var latlng = e.latlng || e.layer.getLatLng(); //gets latitude and langitude
var popup = L.popup({ closeButton: false, autoClose: false, closeOnClick: false, closeOnEscapeKey: false });
L.popup()
.setLatLng(latlng)
.setContent("Coordonnées :" + e.latlng.toString())
.openOn(map); //shows longitude and latitude
}
map.addLayer(markers); //adds the empty clusters layer
module powerbi.extensibility.visual {
"use strict";
var L = typeof L !== 'undefined' ? L : window['L'];
var map: L.Map;
var markers;
var iconimg;
var showing = true;
var polygon;
var tile;
var geojsonLayer;
//exporting value from visual format tab
export function getValue<T>(objects: DataViewObjects, objectName: string, propertyName: string, defaultValue: T): T {
if (objects) {
let object = objects[objectName];
if (object) {
let property: T = <T>object[propertyName];
if (property !== undefined) {
return property;
}
}
}
return defaultValue;
}
export class pmap implements IVisual {
private readonly selectionIdBuilder: ISelectionIdBuilder;
private readonly selectionManager: ISelectionManager;
private readonly target: HTMLElement;
private readonly host: IVisualHost;
public showcs: boolean;
selectionIds: ISelectionId[];
constructor(options: VisualConstructorOptions) {
this.host = options.host;
this.selectionIdBuilder = options.host.createSelectionIdBuilder();
this.selectionManager = options.host.createSelectionManager();
this.showcs = true; //Activates the clusters
markers = new L.MarkerClusterGroup(); //creats the clusters container
this.target = options.element; //selects the target for adding Map div
// ...
map.on('click', clickdid); //sets click function
function clickdid(e) {
console.log(e);
debugger;
this.selectionManager.select(e.selectionId)
var latlng = e.latlng || e.layer.getLatLng(); //gets latitude and langitude
var popup = L.popup({ closeButton: false, autoClose: false, closeOnClick: false, closeOnEscapeKey: false });
L.popup()
.setLatLng(latlng)
.setContent("Coordonnées :" + e.latlng.toString())
.openOn(map); //shows longitude and latitude
}
map.addLayer(markers); //adds the empty clusters layer
} //ajoute les coordonnées à l'endroit cliqué
public update(options: VisualUpdateOptions) {
//GETTING "Show Clusters" setting
var propertyGroupName: string = "dpmap";
var propertyGroups: DataViewObjects = options.dataViews[0].metadata.objects;
this.showcs = getValue<boolean>(propertyGroups, propertyGroupName, "showCluster", true);
var jQuery = typeof jQuery !== 'undefined'
?jQuery
: window['$'];
map.eachLayer(function(l){ map.removeLayer(l)});
map.addLayer(tile);
map.removeLayer(markers);
markers = new L.MarkerClusterGroup();
const { columns, rows } = options.dataViews[0].table;
rows
.map(function (row, idx) {
let data = row.reduce(function (d, v, i) {
const role = Object.keys(columns[i].roles)[0]; // ;
d[role] = v;
return d;
}, {});
jQuery.ajax({
type: "GET",
url: data['choropleths'],
dataType: 'json',
success: function (response) {
geojsonLayer = L.geoJson(response).addTo(map);
//map.fitBounds(geojsonLayer.getBounds());
//$("#info").fadeOut(500);
}
});
//activating or deactiving clusters.
if (showing != this.showcs) {
if (this.showcs) {
map.addLayer(markers);
showing = this.showcs;
}
else {
map.removeLayer(markers);
showing = this.showcs;
}
}
}
}
}
我想实现地图和数据之间的交互性。它实际上是这样的：如果在power bi表上选择数据，则地图会显示所选数据
预期结果：我想在传单地图上选择一个位置，然后Power Bi表上的数据将适应地图上所选的数据。
让我知道是否应该添加任何其他信息。
