嘿，这事儿好办！Leaflet的L.geoJSON()提供了非常灵活的样式自定义能力，你只需要给它传入style配置项，就能轻松替换掉默认的蓝色轮廓啦～

基础修改：全局统一样式 #

最简单的方式就是直接定义一个全局样式函数，给所有国家设置统一的轮廓和填充样式：

this.http.get('assets/world.geo.json-master/countries.geo.json').subscribe((json: any) => {
  console.log(json);
  // 传入style配置项自定义样式
  L.geoJSON(json, {
    style: (feature) => {
      return {
        color: '#e74c3c', // 轮廓颜色（这里设为红色）
        weight: 2, // 轮廓线的粗细
        fillColor: '#fadbd8', // 填充颜色
        fillOpacity: 0.3 // 填充区域的透明度
      };
    }
  }).addTo(map);
});

关键样式属性说明： #

• color: 控制轮廓线的颜色，支持十六进制、RGB、颜色名称等格式
• weight: 轮廓线的宽度，单位是像素
• fillColor: 多边形内部的填充颜色
• fillOpacity: 填充区域的透明度，取值范围0（完全透明）到1（完全不透明）

进阶：根据要素属性动态设置样式 #

如果想给不同国家（比如不同大洲的国家）设置不同样式，可以利用GeoJSON要素自带的properties属性来做判断：

L.geoJSON(json, {
  style: (feature) => {
    // 假设你的GeoJSON里每个国家都有`region`属性标识所属大洲
    switch(feature.properties.region) {
      case 'Asia':
        return {color: '#27ae60', fillColor: '#d5f5e3', weight: 2};
      case 'Europe':
        return {color: '#2980b9', fillColor: '#d6eaf8', weight: 2};
      default:
        return {color: '#95a5a6', fillColor: '#f1f2f6', weight: 1};
    }
  }
}).addTo(map);

交互增强：鼠标hover时改变样式 #

如果想要提升交互体验，还可以通过onEachFeature绑定鼠标事件，实现hover时高亮轮廓的效果：

L.geoJSON(json, {
  style: (feature) => {
    return {color: '#34495e', weight: 1, fillColor: '#ecf0f1', fillOpacity: 0.4};
  },
  onEachFeature: (feature, layer) => {
    // 鼠标进入图层时的样式
    layer.on('mouseover', () => {
      layer.setStyle({
        weight: 3,
        color: '#f39c12',
        fillOpacity: 0.7
      });
    });
    // 鼠标离开时恢复原样式
    layer.on('mouseout', () => {
      layer.setStyle({
        weight: 1,
        color: '#34495e',
        fillOpacity: 0.4
      });
    });
  }
}).addTo(map);

这样就能完全摆脱默认的蓝色样式，按照你的需求自定义地图的视觉效果啦～

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