场景
Vue+Leaflet实现加载OSM显示地图：
Vue+Leaflet实现加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客
在上面加载显示OSM的基础上，怎样显示stamen的地图。
Stamen地图
Stamen地图是一个设计和构建地图和数据可视化的工作室，于2001年成立于旧金山；
利用新兴数字媒体创造了引人注目的交互式设计和数据可视化项目。
Stamen design工作室设计开发了一套可以制作地图街景桌面壁纸的工具，
Map–>Image 一个让你把地图上某个区域制作为图片的线上工具，搭配上一些特殊效果，
使街景有更不一样的风味。
官网
注：
博客：
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>官方说明
效果
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/136122.html
