/TXMapTitleLayer

基于leaflet扩展用于加载腾讯底图瓦片的leaflet插件,腾讯瓦片,leaflet地图

Primary LanguageJavaScript

开发背景

公司与腾讯合作开发景区电子语音导览项目，数据录入之后需要预览，然之前内部使用都是高德地图，使用的瓦片也是高德的，直接切换至腾讯地图时发现瓦片编号对应不上，导致瓦片加载错乱无法预览，后经查询发现腾讯地图的瓦片加载规则跟google，高德的不一样，需要重新针对腾讯地图瓦片定义瓦片加载规则，所以有了以下的插件

引入本插件

 <!-- 1.引入leaflet.js,依赖 -->
    <script src="./leaflet.js"></script>
 <!--2.引入leaflet.css -->
    <link rel="stylesheet" href="./leaflet.css">
 <!--3.引入插件js -->
    <script src="./TXMapTitleLayer.js"></script>

定义要插入的腾讯底图类型

    var map = L.map('map', {
                center: [23.12262, 113.324579],
                zoom: 10,
                maxZoom: 23,
                minZoom: 3,
            });
	var Normal = L.tileLayer.txMapTileLayer("Normal"); //调用 腾讯地图
	var Landform = L.tileLayer.txMapTileLayer("Landform"); //调用 地形地图
    var Satellite = L.tileLayer.txMapTileLayer("Satellite"); //调用 卫星地图

    Normal.addTO(map) //将底图瓦片添加到地图

移除腾讯底图

   	map.removeLayer(Normal) //移除即可