tnbapp/src/views/home/map.vue

<template>
  <div class="home">
    <div id="map" class="map-home" />
  </div>
</template>

<script>
import { Map, View } from 'ol'
import * as olProj from 'ol/proj'
import TileLayer from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ'
import { Vector as VectorLayer } from 'ol/layer'
import { Vector as VectorSource } from 'ol/source'

export default {
  name: 'Home',
  components: {},
  data() {
    return {
      openMap: null
    }
  },
  mounted() {
    this.initMap()
    this.setMarker()
  },
  methods: {
    initMap() {
      this.openMap = new Map({
        target: 'map',
        layers: [
          new TileLayer({
            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}'
            })
          })
        ],
        view: new View({
          // 将西安作为地图中心
          center: olProj.fromLonLat([108.945951, 34.465262]),
          zoom: 1
        }),
        controls: []
      })
    },
    setMarker() {
      const _style = new Style({
        image: new sCircle({
          radius: 10,
          stroke: new Stroke({
            color: '#fff'
          }),
          fill: new Fill({
            color: '#3399CC'
          })
        })
      })

      const _feature = new Feature({
        geometry: new Point(olProj.fromLonLat([108.945951, 34.465262]))
      })
      _feature.setStyle(_style)

      const _marker = new VectorLayer({
        source: new VectorSource({
          features: [_feature]
        })
      })

      this.openMap.addLayer(_marker)
    }
  }
}
</script>

<style lang="scss" scoped>
.map-home {
  width: 100vw;
  height: 100vh;
}
</style>