2020-09-03

最新推荐文章于 2022-01-26 12:06:36 发布

呆萌大肉丁

最新推荐文章于 2022-01-26 12:06:36 发布

阅读量142

点赞数

分类专栏：超图+vue 文章标签：前端

本文链接：https://blog.csdn.net/qq_44729462/article/details/108376924

版权

超图+vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在超图服务中叠加天地图的底图

第一步

创建一个空白的图层

第二步：

设置一些超图使用天地图时候的属性，这边需要注意的就是超图中的一些放大属性和放大后的分辨率之类的属性，其中分辨率级别的属性使用控制最大的放大级别，其次的分辨率属性列表中是用来控制显示的分辨率的。

//这边的两个属性就是设置分辨率的
                var matrixIds = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18'];
                var resolutions = [0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125, 0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625, 0.0006866455078125, 0.00034332275390625, 0.000171661376953125, 8.58306884765625e-005, 4.291534423828125e-005, 2.1457672119140625e-005, 1.0728836059570313e-005, 5.36441802978515625e-006];
                baseLayer = new SuperMap.Layer.WMTS({
                    name: "vec", //自定义图层名称
                    url: "http://t0.tianditu.com/img_c/wmts?tk=1d109683f4d84198e37a38c442d68311", //天地图的卫星图
                    layer: "img",  //服务中的图层名称
                    style: "default",  //风格描述
                    matrixSet: "c",  //标识符矩阵集
                    format: "tiles",  //瓦片格式 
                    requestEncoding: "KVP",
                    // 分辨率级数
                    matrixIds: matrixIds,
                    zoomOffset: 1,
                    buffer: 0,
                    maxExtent: new SuperMap.Bounds(-180, -90, 180, 90),
                    tileSize: new SuperMap.Size(256, 256),
                    resolutions: resolutions//分辨率，必须设置

                });

第三步

将创建好的图层添加到地图中去

   dealLayers01(layerVale) {
                map.addLayers([baseLayer, layer, roadLayer, biaoqianLayer])
                // map.addLayers([baseLayer,layer,vectorLayer,JiangSuRoadLayer,lineLayer,polygonLayer]);
                // map.setCenter(new SuperMap.LonLat(118.805297,32.062694), 2);
                // 服务器
                map.setCenter(new SuperMap.LonLat(118.59, 32.04), 11);

                // 本地调试
                // map.setCenter(new SuperMap.LonLat(13208054.45, 3773675.72), 12);

                // this.addStateRoadMap();

            },

具体的一些属性可以在超图的官方网站去查询api文档