Vue+Leaflet实现加载Stamen显示地图

场景

Vue+Leaflet实现加载OSM显示地图：

Vue+Leaflet实现加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客

在上面加载显示OSM的基础上，怎样显示stamen的地图。

Stamen地图

Stamen地图是一个设计和构建地图和数据可视化的工作室，于2001年成立于旧金山；

利用新兴数字媒体创造了引人注目的交互式设计和数据可视化项目。

Stamen design工作室设计开发了一套可以制作地图街景桌面壁纸的工具，

Map–>Image 一个让你把地图上某个区域制作为图片的线上工具，搭配上一些特殊效果，

使街景有更不一样的风味。

官网

maps.stamen.com

注：

博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客-C#,SpringBoot,架构之路领域博主
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、参考官网引入js的方式加载

<script type="text/javascript" src="https://stamen-maps.a.ssl.fastly.net/js/tile.stamen.js?v1.3.0"></script>

​

var layer = new L.StamenTileLayer("toner");
var map = new L.Map("element_id", {
    center: new L.LatLng(37.7, -122.4),
    zoom: 12
});
map.addLayer(layer);

 

2、直接使用瓦片地址的方式加载

代码

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

<script>
import 'leaflet/dist/leaflet.css'
import L from 'leaflet'
export default {
  name: "leafletLoadMapsStamen",
  data() {
    return {
 };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
  this.map = L.map("map");
  this.map.setView([34.03, -118.15], 13);
    var stamenLayer = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png', {
        attribution:
            '霸道的程序猿',
        minZoom: 1,
        maxZoom: 16
    }).addTo(this.map)
 },
  },
};
</script>

<style scoped>
.map {
  width: 100%;
  height: 400px;
}
</style>

官方说明

效果