高德地图添加瓦片图层

最新推荐文章于 2024-07-12 10:19:55 发布

哈里波提

最新推荐文章于 2024-07-12 10:19:55 发布

阅读量6.2k

点赞数 2

分类专栏：笔记文章标签：前端 vue.js

本文链接：https://blog.csdn.net/haliboti/article/details/122495908

版权

笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

高德地图添加瓦片图层

1、准备图层图片

2、将图片根据使用地图切割为相应的瓦片

工具：高德切图工具地址：高德地图切图工具: 高德地图切图工具

也可使用付费工具：MapCutter

下载zip文件，运行exe程序即可

index为演示代码

index.html运行结果

3、在项目中调用

此代码是在本地调用，若为线上地址更改getTileUrl的地址即可。

 var googleMapLayer = new AMap.TileLayer({
            getTileUrl: 'tiles/[z]/tile-[x]_[y].png',
            opacity: 1,
            zIndex: 99,
        });

        var map = new AMap.Map('container', {
            resizeEnable: true,
            center: [125.029449462891, 43.9982109069824],
            zoom: 15,
            layers: [
                new AMap.TileLayer(),
                googleMapLayer
            ]
        });