1
2
3
4
5

import { Point } from "ol/geom";
import { Feature } from "ol";
import { Style,Icon} from "ol/style";
import VectorLayer from "ol/layer/Vector";
import { Vector as VectorSource } from "ol/source";

1
2
3
4
5
6
7
8

 let feature = new Feature({geometry: new Point(fromLonLat([113.56762000, 34.82407000]))})
 let mark = new VectorLayer({
                source: new VectorSource({
                    features: [feature]
                }),
              
            })
  this.map.addLayer(mark)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

  const iconFeature = new Feature({
                geometry: new Point(fromLonLat([113.56762000, 34.82407000])),
            });

            const iconStyle = new Style({
                image: new Icon({
                    anchor: [0.5, 46],
                    anchorXUnits: "fraction",
                    anchorYUnits: "pixels",
                    src: require("@/assets/marker-icon.png"),
                }),
            });

            iconFeature.setStyle(iconStyle);

            let pointLayer = new VectorLayer({
                source: new VectorSource({
                    features: [iconFeature],
                }),
            });

            this.map.addLayer(pointLayer);

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100

<template>
    <div>
        <div id="map">
        </div>
    </div>
</template>

<script>
import Map from 'ol/Map';
import View from 'ol/View';
import XYZ from 'ol/source/XYZ';
import { Tile as TileLayer } from 'ol/layer';
import { fromLonLat, transform } from "ol/proj";
import { Point } from "ol/geom";
import { Feature } from "ol";
import { Style,Icon} from "ol/style";
import VectorLayer from "ol/layer/Vector";
import { Vector as VectorSource } from "ol/source";
export default {
    name: 'HelloWorld',
    data() {
        return {
            map: null,

        }
    },
    mounted() {

        this.init();
    },
    methods: {
        init() {
            let baseLayer = new TileLayer({
                visible: true,
                name: "电子图",
                source: new XYZ({
                    url: 'https://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
                    crossOrigin: "anonymous",
                }),
            });
            this.map = new Map({
                target: 'map',
                layers: [baseLayer],
                view: new View({
                    center: fromLonLat([113.56762000, 34.82407000]),
                    zoom: 16
                })
            });

            this.setPoint()
        },
        setPoint() {
            const iconFeature = new Feature({
                geometry: new Point(fromLonLat([113.56762000, 34.82407000])),
            });

            const iconStyle = new Style({
                image: new Icon({
                    anchor: [0.5, 46],
                    anchorXUnits: "fraction",
                    anchorYUnits: "pixels",
                    src: require("@/assets/marker-icon.png"),
                }),
            });

            iconFeature.setStyle(iconStyle);

            let pointLayer = new VectorLayer({
                source: new VectorSource({
                    features: [iconFeature],
                }),
            });

            this.map.addLayer(pointLayer);


        },
        addMark() {
            let feature = new Feature({
                geometry: new Point(fromLonLat([113.56762000, 34.82407000]))})
          
            let mark = new VectorLayer({
                source: new VectorSource({
                    features: [feature]
                }),
              
            })
            this.map.addLayer(mark)
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#map {
    width: 1920px;
    height: 1080px;
}
</style>