Angular中Leaflet地图渲染异常，求修复方案及Mapbox替代建议

问题描述 #

• Leaflet地图无法正常渲染，求修复方法
• 同事建议改用Mapbox，但找不到对应的npm安装代码，还有其他替代方案吗？

地图显示异常截图：

我的代码 #

.ts组件代码 #

import { Component, OnInit } from '@angular/core';
import * as L from 'leaflet';
@Component({
  selector: 'app-leaflet-map',
  standalone: true,
  imports: [],
  templateUrl: './leaflet-map.component.html',
  styleUrl: './leaflet-map.component.css'
})
export class LeafletMapComponent implements OnInit {


  ngOnInit(): void {
    this.configMap();
  }

  //variables
  map: any;

  //configMap
  configMap(){
     this.map=L.map('map', {
      center: [51.505, -0.09],
      zoom: 8
     });

     L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(this.map);
  }
}

.css样式代码 #

.map-container{
    height: 400px;
    #map{
        height: 100%;
    }
}

解决方案 #

一、修复Leaflet地图渲染问题 #

按以下步骤排查：

1. 检查HTML模板结构
   确保leaflet-map.component.html里存在对应挂载容器：

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

   没有这个结构的话，Leaflet找不到DOM元素，无法完成渲染。

2. 修复CSS语法问题
   你的CSS用了SCSS嵌套写法，但如果组件样式文件是普通.css格式，嵌套语法不生效，导致#map没有高度。改成普通CSS写法：

   .map-container {
     height: 400px;
   }
   #map {
     height: 100%;
   }
   

   要保留嵌套语法的话，把样式文件后缀改成.scss，并确保项目已配置SCSS支持。

3. 导入Leaflet官方样式
   Leaflet需要自带CSS才能正常显示标记、控件等元素，二选一导入即可：

   • 在angular.json的styles数组中添加：

     "styles": [
       "./node_modules/leaflet/dist/leaflet.css",
       "src/styles.css"
     ]
     

   • 或者在组件样式文件顶部导入：

     @import "leaflet/dist/leaflet.css";
     

4. 确认Leaflet安装正确
   执行命令重新安装依赖：

   npm install leaflet --save
   

   检查node_modules目录下是否存在leaflet文件夹，确保导入路径无误。

二、Mapbox相关方案 #

1. Mapbox的npm安装命令
   直接执行：

   npm install mapbox-gl --save
   

   使用时需配置Mapbox Access Token：

   import mapboxgl from 'mapbox-gl';
   
   mapboxgl.accessToken = '你的Mapbox密钥';
   const map = new mapboxgl.Map({
     container: 'map',
     style: 'mapbox://styles/mapbox/streets-v12',
     center: [-0.09, 51.505],
     zoom: 8
   });
   

2. 其他替代瓦片服务
   不想用Mapbox的话，可选择这些免费/低成本瓦片源：

   • OpenStreetMap人文风格瓦片：https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png
   • 高德地图瓦片（需申请开发者密钥）：https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}
   • MapTiler：免费额度内可使用，提供多种风格瓦片

内容的提问来源于stack exchange，提问作者Yuki1997