0

我正在VUE3中创建一个页面，其中包含传单和传单绘制库。我正在使用目前最新的传单版本“ ^1.7.1 ”和传单绘制版本“ ^1.0.4 ”。地图正在创建，没有任何问题。

虽然我使用的是最新版本，但当我尝试执行new L.Control.Draw()它抛出的行时，错误“ Uncaught Error: Leaflet.draw 0.2.3+ requires Leaflet 0.7.0+.”

我的 package.json 文件中的依赖项。

  "dependencies": {
    "core-js": "^3.6.5",
    "leaflet": "^1.7.1",
    "leaflet-css": "^0.1.0",
    "leaflet-draw": "^1.0.4",
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0"
  },

下面是我的vue文件。

<template>
    <div class="h-full flex-1" id="main-map"></div>
</template>

<script>

require('leaflet')
const L = window.L
require('leaflet-draw')
import { onMounted } from '@vue/runtime-core'
import DRAW_OPTIONS from './data/drawingOptions'


export default {
    setup() {
        onMounted(() => {
            let mymap = L.map('main-map').setView([51.505, -0.09], 10);
            L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
                attribution: 'attribution-here',
                maxZoom: 18,
                id: 'mapbox/streets-v11',
                tileSize: 512,
                zoomOffset: -1,
                accessToken: 'access-token-here'
            }).addTo(mymap);

            console.log(L.version) // this prints in console "1.7.1"
            var drawControl = new L.Control.Draw(DRAW_OPTIONS)
            console.log(L.version) // this prints in console "1.7.1"
            mymap.addControl(drawControl);              
        })

        return {
        }
    }
}
</script>

此外，我尝试导入 L 形式的“传单”，如“ import L from "leaflet";”，似乎没有任何改变。我完全删除了我的node_modules目录并重新安装了所有依赖项，它也没有帮助。

作为另一个调试步骤，我打开了文件node-modules/leaflet-draw/dist/leaflet.draw.js并搜索了版本比较所在的位置，并添加了一个console.debug(L.version)，令我惊讶的是，它打印了0.6.4。

initialize: function(t) {
                console.log(L.version); // this prints in console "0.6.4"
                if (L.version < "0.7") throw new Error("Leaflet.draw 0.2.3+ requires Leaflet 0.7.0+. Download latest from https://github.com/Leaflet/Leaflet/");
                L.Control.prototype.initialize.call(this, t);
                var e;
                this._toolbars = {}, L.DrawToolbar && this.options.draw && (e = new L.DrawToolbar(this.options.draw), this._toolbars[L.DrawToolbar.TYPE] = e, this._toolbars[L.DrawToolbar.TYPE].on("enable", this._toolbarEnabled, this)), L.EditToolbar && this.options.edit && (e = new L.EditToolbar(this.options.edit), this._toolbars[L.EditToolbar.TYPE] = e, this._toolbars[L.EditToolbar.TYPE].on("enable", this._toolbarEnabled, this)), L.toolbar = this
            },

只是出于好奇，我尝试注释掉引发错误的行，然后页面加载时没有任何错误，但未创建绘制控件。

我对此感到筋疲力尽。我想知道是否有人遇到过这个问题，或者可以用他们的宝贵专业知识帮助我。

4

0 回答 0