openlayers

 // 天地图是将路网图层和注记图层分开发布的，我们还要单独请求注记图层，然后叠加在路网上面
        // 使用 ol.source.XYZ 加载切片，并将获取的数据初始化一个切片图层 ol.layer.Tile
        var TiandiMap_vec = new ol.layer.Tile({
   
   
            title: "天地图矢量图层",
            // 用 ol.source.XYZ 加载切片，并将获取的数据初始化一个切片图层 ol.layer.Tile。T=vec_c表示请求的是路网数据，x 表示切片的 x 轴坐标，y 表示切片的y轴坐标，z表示切片所在的缩放级别
            source: new ol.source.XYZ({
   
   
                url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=" + "261dae6ae5ff631786cb4ad53d0a9b8a",//261dae6ae5ff631786cb4ad53d0a9b8a为天地图密钥
                wrapX: false
            })
        });
        var Tianditu_cva = new ol.layer.Tile({
   
   
            title: "天地图矢量注记图层",
            source: new ol.source.XYZ({
   
   
                // cva_w 表示请求的切片类型是注记图层切片
                url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=" + "261dae6ae5ff631786cb4ad53d0a9b8a",//261dae6ae5ff631786cb4ad53d0a9b8a为天地图密钥
                wrapX: false
            })
        });
        //实例化Map对象加载地图
        var map = new ol.Map({
   
   
            //地图容器div的ID
            target: 'mapCon',
            controls: ol.control.defaults({
   
   
                /** @type {olx.control.AttributionOptions} */
                attributionOptions: ({
   
   
                    collapsible: true
                })
            }).extend([
          new ol.control.ZoomToExtent({
   
   
              extent: [
                813079.7791264898, 5929220.284081122,
                848966.9639063801, 5936863.986909639
              ]
          })
            ]),
            //地图容器中加载的图层
            layers: [TiandiMap_vec, Tianditu_cva],
            //地图视图设置
            view: new ol.View({
   
   
                //地图初始中心点
                center: [0, 0],
                //地图初始显示级别
                zoom: 2,
                projection: "EPSG:3857"
            })
        });

新版地址：https://map.tianditu.gov.cn/,老版：https://t0.tianditu.com

 url: "https://t0.tianditu.gov.cn/DataServer?T=vec_c&x=3233&y=673&l=12&tk=你的密钥"

天地图

天地图共有 8 个服务地址，子域名分别从 t0 到 t7，如下列表所示。使用时自己选择。

• http://t0.tianditu.gov.cn/DataServer?
• http://t1.tianditu.gov.cn/DataServer?
• http://t2.tianditu.gov.cn/DataServer?
• http://t3.tianditu.gov.cn/DataServer?
• http://t4.tianditu.gov.cn/DataServer?
• http://t5.tianditu.gov.cn/DataServer?
• http://t6.tianditu.gov.cn/DataServer?
• http://t7.tianditu.gov.cn/DataServer?
  旧后缀 tianditu.com，不支持 https。
  新后缀 tianditu.gov.cn，兼容 http 和 https
  注意：url: "https://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=261dae6ae5ff631786cb4ad53d0a9b8a"
  中T=表示投影类型，要标记与地图一致，否则会出现偏移问题
  

加载常见控件

openlayer 5 的地图容器默认（ol.control.defaults）加载了3个常用控件：缩放控件（ol.control.Zoom）、旋转控件（ol.control.Rotate）、图层数据源属性控件（ol.control.Attribution）

修改地图导航条关联控件的样式

缩放控件（ol.control.Zoom）的默认样式类为.ol-zoom,ol-zoom-out与ol-zoom-in分别为两个按钮的样式类名;缩放滑块控件（ol.control.ZoomSlider）的默认样式class为ol-zoomslider;ol.control.ZoomToExtent控件的默认样式class则为ol-zoom-extent

 /* 修改地图导航条关联样式 */
         /* 缩放滑块控件ZoomSlider的样式，放置到缩放按钮之间实现导航条功能*/
         #mapCon .ol-zoom .ol-zoom-out {
   
   
                margin-top: 204px;
            }   /*选择id为mapCon元素下class为ol-zoom的元素下的ol-zoom-out样式*/

            #mapCon .ol-zoomslider {
   
   
                background-color: transparent;
                top: 2.3em;
            }

            #mapCon .ol-touch .ol-zoom .ol-zoom-out {
   
   
                margin-top: 212px;
            }

            #mapCon .ol-touch .ol-zoomslider {
   
   
                top: 2.75em;
            }

            #mapCon .ol-zoom-in .ol.has-tooltip:hover[role=tooltip],
            #mapCon .ol-zoom-in .ol-has-tooltip:focus[role=tooltip] {
   
   
                top: 3px;
            }

            #mapCon .ol-zoom-out .ol-has-tooltip:hover[role=tooltip],
            #mapCon .ol-zoon-out .ol-has-out-tooltip:focus[role=tooltip] {
   
   
                top: 232px;
            }

            #mapCon .ol-zoom-extent {
   
   
                top: 280px;
            }

参数意义