Estoy trabajando en un servicio en Blazor que usa un mapa de JavaScript y necesito agregar un complemento a ese mapa. Tengo una etiqueta de secuencia de comandos que hace referencia a la biblioteca en mi archivo _Layout.cshtml y luego en el componente que muestra el mapa que uso
@inject IJSRuntime JS
Y entonces
protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { origo = await JS.InvokeAsync<IJSObjectReference>("Origo", "index.json"); } }Pero luego me quedo atascado cuando tengo que agregar el complemento al mapa, en HTML simple, para agregar el complemento se vería así
origo.on('load', function (viewer) { var draw = Draw({ drawTools: { "Polygon": ["freehand", "box"], "LineString": ["freehand"] } }); viewer.addComponent(draw); });Supongo que tengo que hacer una nueva IJSObjectReference para la función on en origo, pero ¿cómo hago un equivalente de la función anónima que se necesita para agregar el complemento al mapa? ¿Es posible?
Hice algo con un componente similar que funcionó. Creé un archivo JS con una función de exportación. No puedo estar seguro del código exacto en esta función, porque no tengo idea de qué complemento está usando y cómo se inicializa.
import "..."; //Import the JS library of the plugin export function initPlugin() { //Initialize origo here... origo = ... origo.on('load', function (viewer) { var draw = Draw({ drawTools: { "Polygon": ["freehand", "box"], "LineString": ["freehand"] } }); viewer.addComponent(draw); }Luego, desde su código de afeitar:
protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { jsStacksEditorImported = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./myscript.js"); await jsStacksEditorImported.InvokeAsync<IJSObjectReference>("initPlugin"); } }