openlayers使用天地图

jia_huining

于 2021-10-09 16:17:14 发布

阅读量1k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： openlayers 文章标签： vue.js javascript gis

本文链接：https://blog.csdn.net/jia_huining/article/details/120673537

openlayers 专栏收录该内容

2 篇文章

订阅专栏

这篇博客介绍了如何在网页应用中集成天地图服务，包括申请开发者Key、配置地图参数以及添加不同类型的底图。通过示例代码展示了如何创建地图实例、设置投影方式和中心点，并加载天地图的瓦片层，实现在线浏览地图的功能。

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

1. 在天地图官网上申请开发者Key

天地图Key申请

2. 调用在线的天地图

直接上源码：

const EPSG = 'EPSG:4490';

      this.map = new Map({

        target: 'map',

        controls: defaults({ attribution: false, zoom: true, rotate: false, collapsed: false }),

        view: new View({

          center: centerid,

          zoom: 8,

          projection: EPSG,

          multiWorld: true

        })

      });

      const tileLayer1 = new TileLayer({

        id: 'tileLayer',

        title: 'base',

        layerName: 'baselayer',

        source: new XYZ({

          url: 'http://t0.tianditu.com/DataServer?T=vec_w&tk=申请的key&x={x}&y={y}&l={z}',

          wrapX: true

        })

      });

      const tileLayer2 = new TileLayer({

        id: 'annotLayer',

        title: 'annot',

        layerName: 'annotlayer',

        source: new XYZ({

          url: 'http://t0.tianditu.com/DataServer?T=cva_w&tk=申请的key&x={x}&y={y}&l={z}',

          wrapX: true

        })

      });

      this.map.addLayer(tileLayer1);

      this.map.addLayer(tileLayer2);

3. url 中的 T 底图类型根据自己的需要设置

http://t0.tianditu.com/DataServer?T=cva_w

天地图API