解决页面不显示的问题

shuishen

2021-07-14 492113ab01dfcc4e8a58560de42d8dbceb770005

 src/components/map/main.vue

@@ -49,7 +49,8 @@

import Feature from 'ol/Feature.js'
import Point from 'ol/geom/Point.js'
import { Icon, Style } from 'ol/style.js'
import LineString from 'ol/geom/LineString.js'
import { Icon, Style, Fill, Stroke } from 'ol/style.js'

export default {
    name: 'Map',
@@ -64,6 +65,10 @@
                source: new VectorSource()
            }),
            carAddlayer: new VectorLayer({ // 图标图层
                zIndex: 22,
                source: new VectorSource()
            }),
            peopleLineAddlayer: new VectorLayer({ // 图标图层
                zIndex: 22,
                source: new VectorSource()
            }),
@@ -92,7 +97,7 @@
            controls: defaults().extend([
                new FullScreen(),
                new ScaleLine(),
                // new MousePosition(),
                new MousePosition(),
                new Rotate(),
                new Attribution()
            ]),
@@ -117,6 +122,8 @@
        ol2d.addLayer(this.gunAddlayer)
        ol2d.addLayer(this.peopleAddlayer)
        ol2d.addLayer(this.carAddlayer)
        ol2d.addLayer(this.peopleLineAddlayer)
        this.addLines()
    },
    methods: {
        init3D (val) {
@@ -158,6 +165,43 @@
            iconFeature.setStyle(iconStyle)

            this[type].getSource().addFeature(iconFeature)
        },

        addLines () {

            // 点坐标
            var lineCoords = [
              [115.87471898408013, 28.720924466928977],
              [115.87471898408013, 28.724163802651635],
              [115.87401037939081, 28.72456871961697],
              [115.87147964835748, 28.7246699488583],
              [115.86925260504815, 28.7246699488583],
              [115.86621572780817, 28.7246699488583],
              [115.8635837675335, 28.72578347051296]
              ];// 线里点的集合

            // 要素
            // var lineCoords = [[featureInfo.lineString[0][0],featureInfo.lineString[0][0]],[featureInfo.lineString(0),featureInfo.lineString(0)]];
            var feature_LineString = new Feature({
                geometry: new LineString(lineCoords)
            });


            feature_LineString.setStyle(new Style({
                //填充色
                fill: new Fill({
                    color: 'rgba(255, 255, 255, 0.2)'
                }),
                //边线颜色
                stroke: new Stroke({
                    color: 'rgb(252, 94, 32)',
                    width: 5
                })
            }))


            this.peopleLineAddlayer.getSource().addFeature(feature_LineString)

        }
    }
}