WebGIS二次开发-4-加载天地图矢量图层

团子WebGIS

已于 2023-02-16 13:46:02 修改

阅读量410

点赞数

分类专栏： WebGIS 学习 javascript 文章标签： javascript es6 前端 Powered by 金山文档

于 2023-02-16 09:59:04 首次发布

本文链接：https://blog.csdn.net/bguihiub/article/details/129055344

版权

WebGIS 同时被 3 个专栏收录

22 篇文章 4 订阅

订阅专栏

学习

17 篇文章 3 订阅

订阅专栏

javascript

12 篇文章 1 订阅

订阅专栏

http://develop.smaryun.com:81/API/JS/OL5InterfaceDemo/index.htm

天地图是国家地理信息公开的地理数据，属于第三方地图。使用OpenLayer的接口对接，调用对应的接口获取数据。

8a5c2b00e94b49659861e064c37f778d

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/include-openlayers-local.js"></script>
</head>
<body>
    <div id="map_container">

    </div>
    <script>
        const TianDiMap_vec = new ol.layer.Tile({
            title:"天地图矢量图层",
            source:new ol.source.XYZ({
                url:'http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=' +
            '8a5c2b00e94b49659861e064c37f778d',
                wrapX:false
            })
        })
        const TianDiMap_cva = new ol.layer.Tile({
            title:"天地图矢量注记图层",
            source:new ol.source.XYZ({
                url:'http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=' +
            '8a5c2b00e94b49659861e064c37f778d',
                wrapX:false
            })
        })
        const map = new ol.Map({
            target:'map_container',
            layers:[TianDiMap_vec,TianDiMap_cva],
            view:new ol.View({
                projection:'EPSG:4326',
                center:[0,0],
                zoom:1
            })
        })
    </script>
</body>
</html>