leaflet 加载百度离线瓦片

leaflet 加载百度瓦片 与 加载普通谷歌瓦片方法都一样,都是 L.map('cssid', mapOption);

mapOption 坐标系 crs 需要使用 900913 , layer中 tms 需要为true。

注意:普通谷歌瓦片的坐标系原点是 origin: [-180, 90] ,百度地图的瓦片坐标系原点是 origin: [0, 0]。

以下是主要代码:

const CRS_900913 = new L.Proj.CRS('EPSG:900913', '+proj=merc +a=6378206 +b=6356584.314245179 +lat_ts=0.0 +lon_0=0.0 +x_0=0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext  +no_defs', {
    resolutions: function () {
        // level = 19
        var res = [];
        res[0] = Math.pow(2, 18);
        for (var i = 1; i < 19; i++) {
            res[i] = Math.pow(2, (18 - i))
        }
        return res;
    }(),
    origin: [0, 0],
    bounds: L.bounds([20037508.342789244, 0], [0, 20037508.342789244])
});

// 自己下载的 百度离线瓦片地址
let encryptUrl = 'http://ip/{z}/{x}/{y}.png';

let tempLayer = this.L.tileLayer(encryptUrl, {
    minZoom: 0,
    maxZoom: 18,
    tms: true // 这里需要为true 否则 y 为负数
    });

let mapOptions = {
    crs: CRS_900913,
    center: this.L.latLng(Number(39.909187), Number(116.397451)),
    zoom: 6,
    minZoom: 0,
    maxZoom: 18,
    layers: tempLayer,
    };
        
this.L.map('cssid', mapOptions);

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
Vue离线瓦片地图是指使用Vue框架开发的可以在无网络连接的情况下加载和显示地图的应用程序。离线瓦片地图通常使用瓦片地图数据,将地图切分成小块瓦片,每个瓦片包含一部分地图数据。这些瓦片可以提前下载并存储在本地,以便在没有网络连接时进行加载和显示。 在Vue中使用离线瓦片地图可以通过以下步骤实现: 1. 获取离线瓦片地图数据:可以从第三方地图提供商或者开源地图项目中获取离线瓦片地图数据。常见的离线瓦片地图数据格式包括MBTiles、XYZ等。 2. 将离线瓦片地图数据存储在本地:将获取到的离线瓦片地图数据存储在本地的文件系统中,以便在应用程序中进行加载和显示。 3. 创建Vue组件:使用Vue框架创建一个地图组件,该组件负责加载和显示离线瓦片地图。 4. 加载离线瓦片地图:在Vue组件的生命周期钩子函数中,通过调用相应的方法加载离线瓦片地图数据,并将其显示在页面上。 5. 实现地图交互功能:根据需求,可以添加一些地图交互功能,例如缩放、平移、标记等。 下面是一个简单的示例代码,演示了如何在Vue中加载和显示离线瓦片地图: ```vue <template> <div> <div id="map"></div> </div> </template> <script> export default { mounted() { // 加载离线瓦片地图 this.loadOfflineMap(); }, methods: { loadOfflineMap() { // 在这里加载离线瓦片地图数据,并将其显示在id为map的元素上 // 可以使用第三方地图库,如Leaflet、OpenLayers等 // 示例代码: const map = L.map('map').setView([51.505, -0.09], 13); L.tileLayer('path/to/offline/tiles/{z}/{x}/{y}.png', { maxZoom: 18, }).addTo(map); }, }, }; </script> <style> #map { height: 400px; } </style> ``` 以上示例代码使用了Leaflet地图库来加载和显示离线瓦片地图数据。你可以根据具体需求选择适合的地图库和离线瓦片地图数据格式。
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值