场景
Vue+Leaflet实现加载OSM显示地图:
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122317394
在上面加载显示OSM的基础上,怎样显示stamen的地图。
Stamen地图
Stamen地图是一个设计和构建地图和数据可视化的工作室,于2001年成立于旧金山;
利用新兴数字媒体创造了引人注目的交互式设计和数据可视化项目。
Stamen design工作室设计开发了一套可以制作地图街景桌面壁纸的工具,
Map–>Image 一个让你把地图上某个区域制作为图片的线上工具,搭配上一些特殊效果,
使街景有更不一样的风味。
官网
注:
博客:
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。
实现
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 { 100%; height: 400px; } </style>
官方说明
效果