如何将 Mapbox-GL 集成到 Power BI 自定义可视化开发中

时间:2020-12-22 01:00:11

标签: mapbox-gl powerbi-custom-visuals

我想使用 Mapbox-GL 作为强大的双向自定义视觉,例如:从 GeoJSON 添加数据,绘制多边形、折线和更多 GIS 功能。 和 html 中的代码没问题,但集成到 power bi 中出错。 code img in visual studio code myMapbox.js 代码:

function mapLoad() {
  var mapboxgl = require("mapbox-gl");
  mapboxgl.accessToken =
    "pk.eyJ1IjoibHVvamlhbmRhbiIsImEiOiJjanQ0aHlvMXMyc21zNDRvZGZ6OXY4MXE2In0.a4cxpcMdIShf0Xrm0rHv2w";

  var map = new mapboxgl.Map({
    container: "main", // container id
    style: "mapbox://styles/mapbox/streets-v11", // style URL
    center: [-74.5, 40], // starting position [lng, lat]
    zoom: 5, // starting zoom
  });

  //console.log("mapboxgl", mapboxgl);
}
export { mapLoad };

visual.ts 中的代码

import * as mp from "./js/myMapbox";
export class Visual implements IVisual {
  private settings: VisualSettings;
  private target: HTMLElement;

  constructor(options: VisualConstructorOptions) {
    this.target = options.element;         
    console.log("constructor");
  }

  public update(options: VisualUpdateOptions) {
    let dataBox = options.dataViews[0];
    this.target.innerHTML = `<div id='main' class='line' name='line' style='width: 100%; height:100%;'></div>`;

    try{
      //mapbox
      mp.mapLoad();
    }catch(error){
      console.log("出错",error);
    }
  }

  private static parseSettings(dataView: DataView): VisualSettings {
    return <VisualSettings>VisualSettings.parse(dataView);
  }

  /**
   * This function gets called for each of the objects defined in the capabilities files and allows you to select which of the
   * objects and properties you want to expose to the users in the property pane.
   *
   */
  public enumerateObjectInstances(options: EnumerateVisualObjectInstancesOptions): VisualObjectInstance[] | VisualObjectInstanceEnumerationObject {
    return VisualSettings.enumerateObjectInstances(this.settings || VisualSettings.getDefault(), options);
  }
}

并得到灰度图和错误:_typeof is not defined gray map typeof is not defined

谁能帮我完成这件事。 您的帮助将不胜感激。

0 个答案:

没有答案
相关问题