当前位置：首页 > VUE

vue地图实现卫星图

2026-01-22 21:21:14VUE

使用高德地图实现卫星图

高德地图提供了卫星图图层，可以通过Vue组件轻松实现。需要注册高德开发者账号并获取API key。

安装依赖：

npm install @amap/amap-jsapi-loader

组件代码示例：

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

<script>
import AMapLoader from '@amap/amap-jsapi-loader'

export default {
  data() {
    return {
      map: null
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: '你的高德key',
        version: '2.0',
        plugins: ['AMap.TileLayer']
      }).then((AMap) => {
        this.map = new AMap.Map('map-container', {
          viewMode: '3D',
          zoom: 15,
          center: [116.397428, 39.90923]
        })

        // 添加卫星图层
        const satellite = new AMap.TileLayer.Satellite()
        satellite.setMap(this.map)
      })
    }
  }
}
</script>

<style>
#map-container {
  width: 100%;
  height: 500px;
}
</style>

使用百度地图实现卫星图

百度地图同样支持卫星图功能，需要先申请百度地图开发者密钥。

安装依赖：

npm install vue-baidu-map

组件代码示例：

<template>
  <baidu-map 
    :center="center" 
    :zoom="zoom" 
    :map-type="mapType"
    style="width: 100%; height: 500px">
  </baidu-map>
</template>

<script>
import { BaiduMap } from 'vue-baidu-map'

export default {
  components: {
    BaiduMap
  },
  data() {
    return {
      center: {lng: 116.404, lat: 39.915},
      zoom: 15,
      mapType: 'earth' // 设置为earth显示卫星图
    }
  }
}
</script>

使用Leaflet实现卫星图

Leaflet是一个轻量级地图库，可以配合各种瓦片地图服务实现卫星图。

安装依赖：

npm install leaflet

组件代码示例：

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

<script>
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'

export default {
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      const map = L.map('leaflet-map').setView([39.90923, 116.397428], 15)

      // 使用高德卫星图
      L.tileLayer('https://webst{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {
        subdomains: ['01', '02', '03', '04'],
        attribution: '高德地图'
      }).addTo(map)
    }
  }
}
</script>

<style>
#leaflet-map {
  width: 100%;
  height: 500px;
}
</style>

使用Mapbox GL实现卫星图

Mapbox提供了高质量的卫星地图服务，需要注册获取access token。

安装依赖：

npm install mapbox-gl

组件代码示例：

vue地图实现卫星图

<template>
  <div id="mapbox-container"></div>
</template>

<script>
import mapboxgl from 'mapbox-gl'
import 'mapbox-gl/dist/mapbox-gl.css'

export default {
  mounted() {
    mapboxgl.accessToken = '你的mapbox token'
    const map = new mapboxgl.Map({
      container: 'mapbox-container',
      style: 'mapbox://styles/mapbox/satellite-v9',
      center: [116.397428, 39.90923],
      zoom: 15
    })
  }
}
</script>

<style>
#mapbox-container {
  width: 100%;
  height: 500px;
}
</style>