場景

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>

官方說明

效果

?

總結

以上是生活随笔為你收集整理的Vue+Leaflet实现加载Stamen显示地图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。