Leaflet初始化是否去除右下⾓标志
⼀、引⼊leaflet
<link rel="stylesheet" href="unpkg/leaflet@1.6.0/dist/leaflet.css" />
<script src="unpkg/leaflet@1.6.0/dist/leaflet.js"></script>
或者
<!--integrity:--⼦资源完整性 (SRI) 是⼀项安全功能,-->
<!--可让浏览器验证其抓取的⽂件 (例如,从⼀个 CDN) 是在没有意外操作的情况下传递的。-->
<!--它的⼯作原理是允许您提供⼀个获取的⽂件必须匹配的加密散列/哈希。-->
<!--crossorigin-->
<!--该枚举属性指定在加载相关图⽚时是否必须使⽤CORS。可取的值包括以下两个:-->
<link rel="stylesheet" href="unpkg/leaflet@1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<script src="unpkg/leaflet@1.6.0/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script>
或者
下载到本地引⼊同第⼀个
下载插件leaflet.ChineseTmsProviders.js.在leaflet下引⼊(
主要⾕歌地图、⾼德地图、天地图和 OSM 地图
百度地图的⽡⽚组织⽅式是不同的。
百度从中⼼点经纬度(0,0)度开始计算⽡⽚,
⽽⾕歌地图是从左上⾓经纬度(-180,90)度开始计算⽡⽚;
如果直接使⽤百度⽡⽚地图服务会请求不到⽡⽚,
因此需要转换⼀下。借助 leaflet-tileLayer-baidu 这个插件(我没⽤过)
但是天地图更改了,需要修改为⼀下
TianDiTu: {
Normal: {
Map: "t{s}.v/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=您的密钥",
Annotion: "t{s}.v/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=您的密钥"    },
Satellite: {
Map: "t{s}.v/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=您的密钥",
Annotion: "t{s}.v/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=您的密钥"    },
Terrain: {
Map: "t{s}.v/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=您的密钥",
Annotion: "t{s}.v/cta_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cta&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=您的密钥"    },
Subdomains: ['0', '1', '2', '3', '4', '5', '6', '7']
}
⼆、在html页⾯新建<div>设置好宽⾼
在<script>标签内声明变量
图中所画来源于
leaflet.ChineseTmsProviders.js。⾃⼰选择要加载的地图类型,把对应数据写上去。maxzoom,minzoom。代表地图最⼤最⼩缩放等级
再次声明⼀个变量。
这是初始化地图语法
var map = L.map('map',{
center:[31.59, 120.29],//地图中⼼经纬度
zoom:13,//当前缩放等级
minZoom:5,//最⼩缩放等级
maxZoom:15,//最⼤缩放等级
layers:[nomal1],
dragging:true,//是否允许拖拽
attributionControl: false,//是否去除右下⾓标志
zoomControl:false//是否显⽰地图缩放图例
});
3tiles运⾏项⽬地图初始化完成

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。