天地图使用示例

// 天地图是将路网图层和注记图层分开发布的，我们还要单独请求注记图层，然后叠加在路网上面
        // 使用 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，如下列表所示。使用时自己选择。

加载常见控件

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;
           }

参数意义

参数

含义

wrapX: false

对于-180°和180°子午线上的矢量编辑图形时，false不会重复平铺，true会重复

crossOrigin: "anonymous"

不允许跨域显示