Question

I am trying to add onClick() functionalities to geojson features of a leaflet map layer using the pointToLayer() function. As I then try to trigger those functionalities by clicking on a displayed circle, I am encountering this error:

  vue.js:973 Uncaught RangeError: Maximum call stack size exceeded
    at Function.getOwnPropertyDescriptor (<anonymous>)
    at defineReactive (vue.js:973)
    at Observer.walk (vue.js:897)
    at new Observer (vue.js:885)
    at observe (vue.js:953)
    at defineReactive (vue.js:982)
    at Observer.walk (vue.js:897)
    at new Observer (vue.js:885)
    at observe (vue.js:953)
    at defineReactive (vue.js:982)

I am thinking this might be due to the size of the geojson feature collection I am applying these functionalities (several hundreds, sometimes thousands of features defining points and lines of a grid model). The functionalities do indeed seem to work better for smaller geojson feature collections (smaller grid models).

If you have any help, advice, tip or correction, please let me know. Thanks!

Here is the code for the VueJS component responsible for this layer:

export const AddLoadLayer = {
mixins: [Layer],
props: {
    modelName: null,
    value: { required: true, default() { return [];}, }, 
},
data(){
    return {
        selectedNode: null,
        power: null,
        currentMarker: null,
        exists: null,
    }
},
methods: {
    async getLayer() {
        let geojson = await myAPI.rest('GET', `/api/models/${encodeURI(this.modelName)}/geojson/`);
        let pointToLayer = (feature, latlng) => {
            var circle = L.circle(latlng, {
                color: 'red',
                weight: 2,
                fillOpacity: 1,
                radius: 5
            });
            circle.bindPopup(this.$refs.popup);
            circle.on("click", () => this.selectedNode=feature.properties.id);
            circle.on("click", () => this.currentMarker=circle);
            circle.on("click", () => this.checkExists());

            for (let i=0; i<this.value.length; i++){
                if (this.value[i].node_id===feature.properties.id){
                    circle.setStyle({color: '#14e54c'});
                }
            }

            return circle;
            }
        return L.geoJson(geojson, {
            pointToLayer,
            //onEachFeature
        });
    },

//SOME OTHER METHODS


        checkExists(){
        this.exists=false;
        let nodeID=this.selectedNode;
        for (let i=0; i<this.value.length; i++){
                if (this.value[i].node_id===nodeID){
                    this.exists=true;
                }
            }
    },
},
watch: {
    modelName(val) {
        this.redraw();
    }
},

template: `<div style="display: none;">
    <div ref="popup">
        <div class="form-group" v-if="this.exists===false">
            Add Load with Power (kW):
            <input v-model:value.number="power" type="number" step="any" class="form-control form-control-sm" style="width: 100px" placeholder="Power" aria-label="Power">
        </div>
        <button  v-if="this.exists===false" type="button"  class="btn btn-primary btn-sm" @click="addLoad" > Add Load </button>
        <div class="form-group" v-if="this.exists===true">
            Update Load Power (kW):
            <input v-model:value.number="power" type="number" step="any" class="form-control form-control-sm" style="width: 100px" placeholder="Power" aria-label="Power">
        </div>
        <button v-if="this.exists===true" type="button"  class="btn btn-primary btn-sm" @click="updateLoad" > Update Load </button>
        <button v-if="this.exists===true" type="button"  class="btn btn-secondary btn-sm" @click="removeLoad" > Remove Load </button>
    </div>
</div>`

}

This is the code for redraw (the code is a method of the "Layer" mixin):

redraw() {
        // Redraw the layer by forcing a call to the map watcher
        // This induces a call to getLayer()
        let map = this.map;
        this.map = null;
        this.map = map;
    }

Answer 1

我被告知以下内容似乎有效：

从数据部分删除“currentMarker：null”


ViewJS将观察者应用于数据中包含的所有内容   部分，可能是某些Leaflet对象像标记一样使用   循环/递归模式导致此类堆栈溢出时   VueJS的观察者适用于他们。

VueJS - Leaflet - GeoJSON - RangeError: Maximum call stack size exceeded

1 个答案: