Question

我制作了带有openlayers的地图，该地图在baseLayer顶部的vectorLayer中渲染了交互点。当我在本地运行它时，它工作正常：

但是，当我构建一个生产程序包（使用vue-cli-service构建）并在服务器上运行它时，该地图仍然会出现，但要点却没有。我记录了生产中地图所拥有的图层数，可以看到该图层在那里，所以我假设这是CSS的问题。我尝试过更改该点的颜色和字体大小，但仍然没有显示。我还为地图容器指定了高度。我看过其他问题，但它们似乎是关于点在任何环境中均未显示，或者整个地图未在生产中而不是在图层中呈现。其他人有没有经历过？

我的js文件：

/* exported calculateMap */

import 'ol/ol.css';
import Feature from 'ol/Feature';
import {Point} from 'ol/geom';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style';
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';
import OSM from 'ol/source/OSM';
import {fromLonLat} from 'ol/proj';
import Select from 'ol/interaction/Select';
import {click, pointerMove} from 'ol/events/condition';

var map = null;
var selectedIds = [];

var selectClick = new Select({
    condition: click,
});

var selectPointerMove = new Select({
    condition: pointerMove,
});

function handleClick(e) {
    var features = e.target.getFeatures()
    if (features.array_.length >= 1) {
        var id = features.array_[0].values_.id
        console.log("clicked id: " + id)
    } else {
        id = null
    }

    selectedIds.push(id);
}

function createFeatureForDate(source, date) {
    console.log("picking measurement closest to date: " + date)
    var measurement = source['measurements'][0]
    return new Feature({
        'geometry': new Point(
            fromLonLat([source.xCoor, source.yCoor])
        ),
        'size': '8',
        'id': source['id'],
        'name': source['name'],
        'height': measurement['height'],
        'volume': measurement['volume']
    });
}

function getFeatures(date, sources) {
    var features = [];
    sources.forEach(function(source) {
        console.log(`looking at source: ${JSON.stringify(source)}`)
        features.push(createFeatureForDate(source, date));
    });
    console.log(`created features with ${features.length} features`)
    return features
}

function makeVectorLayer(date, sources) {
    console.log("make vector layer")
    var styles = {
        '8': new Style({
          image: new CircleStyle({
            radius: 4,
            fill: new Fill({color: 'blue'}),
            stroke: new Stroke({color: 'red', width: 3})
          })
        })
    };

    var vectorSource = new VectorSource({
        features: getFeatures(date, sources),
        wrapX: false
    });
    console.log("source made")
    return new VectorLayer({
        source: vectorSource,
        style: function(feature) {
            return styles[feature.get('size')];
        }
    });
}

export function calculateMap(sources, ids) {
    console.log("previous ids: " + selectedIds + ", new: " + ids)
    selectedIds = ids
    var date = Date.now;
    console.log("calculate map")
    var vectorLayer = makeVectorLayer(date, sources);

    console.log(`vector layer is: ${JSON.stringify(vectorLayer)}`)

    if (map == null) {
        console.log("map is null")
        const centerLonLat = [-99.881972, 39.024467];
        const centerWebMercator = fromLonLat(centerLonLat);
        console.log('center is:', centerWebMercator);
        var baseLayer = new TileLayer({source: new OSM()});

        map = new Map({
            target: 'mapOL',
            layers: [baseLayer, vectorLayer],
            view: new View({
                center: centerWebMercator,
                zoom: 4
            })
        })
        map.addInteraction(selectClick);
        map.addInteraction(selectPointerMove);
        selectClick.on('select', function(e) {
            handleClick(e);
        });
    } else {
        // set new vector layer
        console.log("reloading map")
        var layerGroup = map.getLayerGroup();

        var layers = layerGroup.getLayers();
        if (layers.getLength > 1) {
            console.log("length more than one")
            map.removeLayer(layers[1]); 
        }

        map.addLayer(vectorLayer);
    }

    console.log(`map has layers: ${map.getLayers().getLength()}`)

    return map
}

我的Vue文件：

<template>
  <div id="mapOL" class="mapOL">
  </div>
</template>

<script>

import {calculateMap} from '../data/map';

export default {
    name: "map-openlayers",
    methods: {
        callCalculateMap: function(sources, selectedIds) {
            calculateMap(sources, selectedIds);
        }
    },
    props: {
        sources: Array
    },
    data() {
        return {
            selectedIds: []
        }
    },
    watch: {
        sources: function(sources) {
            console.log("calculating map with sources: " + sources)
            this.callCalculateMap(sources, this.selectedIds);
        },
        selectedIds: function() {
            // get source by ID
            var latestId = this.selectedIds[this.selectedIds.length - 1]
            var source = this.sources.find(s => {
                return s.id == latestId
            })
            if (source != null) {
                this.$emit('selectSource', source);
            } else {
                console.log("Couldn't find source with id: " + latestId)
                console.log(JSON.stringify(this.sources, null, '  '))
                this.sources.forEach(function(element) {
                    console.log(element.id)
                });
                this.$emit('selectSource', null);
            }
            
        }
    },
    mounted() {
        this.callCalculateMap(this.sources, this.selectedIds);
    }
}
</script>

<style scoped lang="stylus">
    @import "~ol/ol.css"
    #mapOL
        height 500px
</style>

OpenLayers 6 VectorLayer无法在Vue生产中渲染

0 个答案: