openlayers

简介: 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;
           }

## 参数意义

参数 含义
wrapX: false 对于-180°和180°子午线上的矢量编辑图形时,false不会重复平铺,true会重复
crossOrigin: "anonymous" 不允许跨域显示
目录
相关文章
|
Java 应用服务中间件 nginx
fastdfs实现防盗链功能
fastdfs实现防盗链功能
278 12
|
域名解析 Cloud Native jenkins
【Drone+Gitlab】一条龙服务,直接起飞 — 从介绍->部署->配置->写.drone.yml流水线+常见的报错解决
gitlab+drone部署安装,编写.drone.yml流水线 drone是一个持续集成化工具,gitlab是一个代码仓库,.drone.yml流水线编写 fatal: unable to access,could not resolve host 克隆地址连接不上(修改默认clone克隆),没有Trusted选项,启动drone-server时添加(--env=DRONE_USER_CREATE=username:root,admin:true) .drone.yml文件中sed命令报错
2407 0
【Drone+Gitlab】一条龙服务,直接起飞 — 从介绍->部署->配置->写.drone.yml流水线+常见的报错解决
|
数据可视化 JavaScript 前端开发
推荐8个炫酷的数据可视化大屏项目
推荐8个炫酷的数据可视化大屏项目
4896 1
|
4月前
|
安全 JavaScript 前端开发
HarmonyOS NEXT~HarmonyOS 语言仓颉:下一代分布式开发语言的技术解析与应用实践
HarmonyOS语言仓颉是华为专为HarmonyOS生态系统设计的新型编程语言,旨在解决分布式环境下的开发挑战。它以“编码创造”为理念,具备分布式原生、高性能与高效率、安全可靠三大核心特性。仓颉语言通过内置分布式能力简化跨设备开发,提供统一的编程模型和开发体验。文章从语言基础、关键特性、开发实践及未来展望四个方面剖析其技术优势,助力开发者掌握这一新兴工具,构建全场景分布式应用。
476 35
|
JavaScript 前端开发 定位技术
OpenLayers入门(一)
OpenLayers入门(一)
1364 0
OpenLayers入门(一)
|
SQL 关系型数据库 数据库
pgAdmin4如何查看当前的scheme默认是哪个
pgAdmin4如何查看当前的scheme默认是哪个
240 4
|
11月前
vue3 + Ts 中 使用 class 封装 axios
【10月更文挑战第5天】
476 1
|
编解码 前端开发 JavaScript
OpenLayers入门-第一篇、基本概念与核心组件
OpenLayers入门-第一篇、基本概念与核心组件
537 3
|
12月前
|
JavaScript 前端开发 开发者
Layui layer 弹出层的使用【笔记】
本文介绍了Layui的layer弹出层组件的使用方法,包括如何通过在线CDN引入Layui的CSS和JS文件,以及如何使用layer.open(options)开启弹出层和layer.close(index)关闭弹出层。文章详细说明了弹出层类型的分类、options选项的参数配置,以及回调函数的使用。通过示例代码,展示了如何创建不同类型的弹出层,包括对话信息框、页面层、内联框架层、加载层和tips层。
|
Java 测试技术 项目管理
产品入门第三讲:Axure产品流程图绘制
产品入门第三讲:Axure产品流程图绘制
313 0
产品入门第三讲:Axure产品流程图绘制

热门文章

最新文章