openlayers+vue加载各种地图

最新推荐文章于 2025-03-05 19:31:48 发布

-錦墨。

最新推荐文章于 2025-03-05 19:31:48 发布

阅读量581

点赞数

分类专栏： Openlayers+Vue 文章标签： vue.js 前端

本文链接：https://blog.youkuaiyun.com/weixin_43405921/article/details/121796358

版权

Openlayers+Vue 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用天地图API加载不同类型的图层，包括影像图、文字注记、矢量图及其对应的注记。通过具体的代码示例展示了如何配置URL模板以获取天地图的服务数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

一、天地图

一、天地图

      // 天地图影像
      let map_img = new TileLayer({
        source: new XYZ({
          url: "https://t6.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk="+token,
        }),
      });
      // 天地图影像文字注记
      let map_cta1 = new TileLayer({
        source: new XYZ({
          url: "http://t4.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk="+token,
        }),
      });
      // 天地图矢量
      let map_vec = new TileLayer({
        source: new XYZ({
          url: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk="+token,
        }),
      });
      // 天地图矢量文字注记
      let map_cta1 = new TileLayer({
        source: new XYZ({
          url: "http://t4.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk="+token,
        }),
      });