基于Vue3+arcgis js4.28加载天地图

注意：开发前先要申请一个个人天地图key

一、加载经纬度投影类型（这里的坐标系是4490）

1、引入依赖

import Map from '@arcgis/core/Map';

import MapView from '@arcgis/core/views/MapView';

import WebTileLayer from '@arcgis/core/layers/WebTileLayer.js';

import TileInfo from '@arcgis/core/layers/support/TileInfo.js';

2、通过WebTileLayer和TileInfo初始化矢量底图与矢量注记

const tileInfo = new TileInfo({

        dpi: 90.714285714274, //解析度，即像素

        rows: 256,

        cols: 256,

        compressionQuality: 0, //压缩像素值

        origin: {

            x: -180,

            y: 90,

        },

        spatialReference: {

            wkid: 4490,

        },

        lods: [

            //定义平铺方案的细节级别数组

            {

                level: 2,

                levelValue: 2,

                resolution: 0.3515625,

                scale: 147748796.52937502,

            },

            {

                level: 3,

                levelValue: 3,

                resolution: 0.17578125,

                scale: 73874398.264687508,

            },

            {

                level: 4,

                levelValue: 4,

                resolution: 0.087890625,

                scale: 36937199.132343754,

            },

            {

                level: 5,

                levelValue: 5,

                resolution: 0.0439453125,

                scale: 18468599.566171877,

            },

            {

                level: 6,

                levelValue: 6,

                resolution: 0.02197265625,

                scale: 9234299.7830859385,

            },

            {

                level: 7,

                levelValue: 7,

                resolution: 0.010986328125,

                scale: 4617149.8915429693,

            },

            {

                level: 8,

                levelValue: 8,

                resolution: 0.0054931640625,

                scale: 2308574.9457714846,

            },

            {

                level: 9,

                levelValue: 9,

                resolution: 0.00274658203125,

                scale: 1154287.4728857423,

            },

            {

                level: 10,

                levelValue: 10,

                resolution: 0.001373291015625,

                scale: 577143.73644287116,

            },

            {

                level: 11,

                levelValue: 11,

                resolution: 0.0006866455078125,

                scale: 288571.86822143558,

            },

            {

                level: 12,

                levelValue: 12,

                resolution: 0.00034332275390625,

                scale: 144285.93411071779,

            },

            {

                level: 13,

                levelValue: 13,

                resolution: 0.000171661376953125,

                scale: 72142.967055358895,

            },

            {

                level: 14,

                levelValue: 14,

                resolution: 8.58306884765625e-5,

                scale: 36071.483527679447,

            },

            {

                level: 15,

                levelValue: 15,

                resolution: 4.291534423828125e-5,

                scale: 18035.741763839724,

            },

            {

                level: 16,

                levelValue: 16,

                resolution: 2.1457672119140625e-5,

                scale: 9017.8708819198619,

            },

            {

                level: 17,

                levelValue: 17,

                resolution: 1.0728836059570313e-5,

                scale: 4508.9354409599309,

            },

            {

                level: 18,

                levelValue: 18,

                resolution: 5.3644180297851563e-6,

                scale: 2254.4677204799655,

            },

            {

                level: 19,

                levelValue: 19,

                resolution: 2.6822090148925781e-6,

                scale: 1127.2338602399827,

            },

            {

                level: 20,

                levelValue: 2,

                resolution: 1.341104507446289e-6,

                scale: 563.61693011999137,

            },

        ],

    });

    const vec_c = new WebTileLayer({

        //天地图矢量底图

        urlTemplate:

            'https://{subDomain}.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILECOL={col}&TILEROW={row}&TILEMATRIX={level}&tk=自己的key',

        subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],

        tileInfo: tileInfo,

        spatialReference: {

            wkid: 4490,

        },

        copyright: '天地图矢量底图',

    });

    const cva_c = new WebTileLayer({

        //天地图矢量注记

        urlTemplate:

            'https://{subDomain}.tianditu.gov.cn/cva_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILECOL={col}&TILEROW={row}&TILEMATRIX={level}&tk=自己的key',

        subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],

        tileInfo: tileInfo,

        spatialReference: {

            wkid: 4490,

        },

        copyright: '天地图矢量注记',

    });

3、把矢量底图与矢量注记添加到map中

const map = new Map({

        basemap: {

            baseLayers: [vec_c, cva_c],

        },

    });

4、把map添加到MapView中

const view = new MapView({

        container: viewDiv.value,

        map: map,

        spatialReference: { wkid: 4490 },

        center: [114.384697, 30.669599],

        zoom: 13,

    });

二、加载球面墨卡托投影类型（这里的坐标系是3857）

1、引入依赖

import Map from '@arcgis/core/Map';

import MapView from '@arcgis/core/views/MapView';

import WebTileLayer from '@arcgis/core/layers/WebTileLayer.js';

2、初始化矢量底图与矢量注记

const tk = '自己的key';

    const vec_w_url =

        'http://{subDomain}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}';

    const cva_w_url =

        'http://{subDomain}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}';

    //天地图矢量底图

    const vec_w = new WebTileLayer({

        urlTemplate: `${vec_w_url}&tk=${tk}`,

        subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],

        copyright: '天地图矢量底图',

    });

    //天地图矢量注记

    const cva_w = new WebTileLayer({

        urlTemplate: `${cva_w_url}&tk=${tk}`,

        subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],

        copyright: '天地图矢量注记',

    });

3、矢量底图与矢量注记添加到map中

const map = new Map({

        basemap: {

            baseLayers: [vec_w, cva_w],

        },

    });

4、map添加到MapView中

const view = new MapView({

        container: viewDiv.value,

        map: map,

        spatialReference: { wkid: 3857 },

        center: [114.384697, 30.669599],

        zoom: 13,

    });