vue2使用openlayers6天地图为底图

最新推荐文章于 2025-05-08 10:34:34 发布

原创

最新推荐文章于 2025-05-08 10:34:34 发布 · 861 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #地图 #openlayers

本文档详细介绍了如何在Vue2项目中利用OpenLayers6库，结合天地图服务，实现地图底图的加载。通过学习，开发者可以掌握前端地图应用的基本配置和使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

传送门：

1.openlayers6
2. 天地图
3. openlayers中文文档

npm install ol

<!--仅底图-->
<template>
  <div class="map-container" id="map"></div>
</template>
<script>
import 'ol/ol.css'
import { Map, View } from "ol";//地图,视图
import { defaults as defaultControls } from 'ol/control'; // 引入默认控件集合
import Zoom from 'ol/control/Zoom'; 
import XYZ from "ol/source/XYZ"
import TileLayer from "ol/layer/Tile"; //可以理解为图层 
export default {
  data() {
    return {
      map: null,
    };
  },
  methods: {
    createMap () {
      // 创建天地图矢量图层
      var tdtVecLayer = new TileLayer({
          source: new XYZ({
              url: 'http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=个人天地图key'
          }),