无法通过vue在传单中加载pixiOverlay

问题描述

我的传单地图渲染太慢，我发现pixiOverlay可以替代它，但我无法使其运行。任何示例都会有所帮助。

以下是我的组成部分

<template>
  <div ref="mapElement" style="height: 400px;"></div>
</template>

<script>
  // import {
  //   LMap,//   LTileLayer
  // } from 'vue2-leaflet';
  import * as PIXI from 'pixi.js';
  import 'leaflet-pixi-overlay';
  import L from 'leaflet';

  export default {
    name: 'HelloWorld',components: {
      // LMap,// LTileLayer,},data() {
      return {
        // url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',// zoom: 3,// center: [47.413220,-1.219482],// bounds: null,map: L.map
      };
    },methods: {
      draw() {
        // this.map = L.map('map',{
        //   center: [30,30],//   zoom: 13,// });

        var loader = new PIXI.loaders.Loader();
        loader.add('marker','img/marker-icon.png');
        loader.load(function(loader,resources) {
          var markerTexture = resources.marker.texture;
          var markerLatLng = [51.505,-0.09];
          var marker = new PIXI.Sprite(markerTexture);
          marker.anchor.set(0.5,1);

          var pixiContainer = new PIXI.Container();
          pixiContainer.addChild(marker);

          var firstDraw = true;
          var prevZoom;

          var pixiOverlay = L.pixiOverlay(function(utils) {
            var zoom = utils.getMap().getZoom();
            var container = utils.getContainer();
            var renderer = utils.getRenderer();
            var project = utils.latLngToLayerPoint;
            var scale = utils.getScale();

            if (firstDraw) {
              var markerCoords = project(markerLatLng);
              marker.x = markerCoords.x;
              marker.y = markerCoords.y;
            }

            if (firstDraw || prevZoom !== zoom) {
              marker.scale.set(1 / scale);
            }

            firstDraw = true;
            prevZoom = zoom;
            renderer.render(container);
          },pixiContainer);

          pixiOverlay.addTo(this.map);
        });
      },zoomUpdated(zoom) {
        this.zoom = zoom;
      },centerUpdated(center) {
        this.center = center;
      },boundsUpdated(bounds) {
        this.bounds = bounds;
      },mounted() {
      this.map = L.map(this.$refs['mapElement']).setView([51.505,-0.09],13);

      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
        maxZoom: 18,}).addTo(this.map);

      this.draw();
    },}
</script>

我尝试使用生命周期挂钩。我之前遇到的错误是找不到容器（现已解决）。我现在得到的错误是“无法读取null属性”

更新1

<template>
<div ref="map" style="height: 400px;">

</div>
</template>

<script>

import * as PIXI from 'pixi.js';
import 'leaflet-pixi-overlay';
import L from 'leaflet';

export default {
    name: 'HelloWorld',data() {
        return {
            
            map: L.map
        };
    },methods: {
        draw() {
            let loader = new PIXI.Loader()
            loader.add('marker','https://pixijs.io/examples/examples/assets/bunny.png')
            loader.load((loader,resources) => {
                let markerTexture = resources.marker.texture
                let markerLatLng = [51.505,-0.09]
                let marker = new PIXI.Sprite(markerTexture)
                marker.anchor.set(0.5,1)

                let pixiContainer = new PIXI.Container()
                pixiContainer.addChild(marker)

                let firstDraw = true
                let prevZoom

                let pixiOverlay = L.pixiOverlay(utils => {
                    let zoom = utils.getMap().getZoom()
                    let container = utils.getContainer()
                    let renderer = utils.getRenderer()
                    let project = utils.latLngToLayerPoint
                    let scale = utils.getScale()

                    if (firstDraw) {
                        let markerCoords = project(markerLatLng)
                        marker.x = markerCoords.x
                        marker.y = markerCoords.y
                    }

                    if (firstDraw || prevZoom !== zoom) {
                        marker.scale.set(1 / scale)
                    }

                    firstDraw = true
                    prevZoom = zoom
                    renderer.render(container)
                },pixiContainer)

                pixiOverlay.addTo(this.map)
            })
        },zoomUpdated(zoom) {
            this.zoom = zoom;
        },centerUpdated(center) {
            this.center = center;
        },boundsUpdated(bounds) {
            this.bounds = bounds;
        },mounted() {
        this.map = L.map(this.$refs.map).setView([51.505,13)

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
            maxZoom: 18,}).addTo(this.map)

        this.draw()
    }

}
</script>

Error

解决方法

我认为问题所在是：

pixiOverlay.addTo(this.map);

因为您在另一个函数中调用this，所以this没有引用您的组件，这意味着它可能是未定义的或具有另一个值。

您可以使用箭头功能解决此问题：

...
  loader.load((loader,resources) => {
    ...
    var pixiOverlay = L.pixiOverlay((utils) => {
        ...
    },pixiContainer)

    pixiOverlay.addTo(this.map);
  });
...

JSFiddle