mapbox加载天地图

最新推荐文章于 2024-08-20 10:49:35 发布

肆爪

最新推荐文章于 2024-08-20 10:49:35 发布

阅读量3.8k

点赞数 3

分类专栏： mapbox 文章标签： javascript

本文链接：https://blog.csdn.net/du_5pet/article/details/114522691

版权

本文将介绍如何利用JavaScript库Mapbox实现在Web应用中加载天地图，包括配置地图源、设置图层和控制项等关键步骤，帮助开发者实现自定义地理信息展示。

摘要由CSDN通过智能技术生成

//天地图
var vecUrl = "http://t0.tianditu.com/vec_w/wmts?tk=你的天地图token";
var cvaUrl = "http://t0.tianditu.com/cva_w/wmts?tk=你的天地图token";
//使用严格模式
"use strict";
//实例化source对象
var tdtVec = {
    //类型为栅格瓦片
    "type": "raster",
    'tiles': [
        //请求地址
        vecUrl + "&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles"
    ],
    //分辨率
    'tileSize': 256
};
var tdtCva = {
    "type": "raster",
    'tiles': [
        cvaUrl + "&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles"
    ],
    'til