WebGIS实战练习一（加载天地图）

最新推荐文章于 2024-05-09 10:44:47 发布

我就要学C++

最新推荐文章于 2024-05-09 10:44:47 发布

阅读量1.6k

点赞数 1

分类专栏：笔记文章标签： javascript webgl

本文链接：https://blog.csdn.net/qq_33069557/article/details/105500621

版权

笔记专栏收录该内容

16 篇文章 4 订阅

订阅专栏

小白刚学webgis，记录一下代码和软件的使用，供以后翻阅，有志同道合的giser可以一起讨论交流，指出错误指出谢谢大家。
1，在vs中创建网站，在引用下新建css和libs两个文件，css下引入ol.css和ol.css.map，libs下新建ol5文件夹并在ol5中引入ol.js和ol.js.map，再添加一个html页，代码如下。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>加载显示天地图</title>
    <link href="../../css/ol.css" rel="stylesheet" type="text/css" />
    <script src="../../libs/ol5/ol.js" type="text/javascript"></script>
    <style>
        #map{
            width:100%;
            height:100%;
            position:absolute;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script type="text/javascript">
        "use strict";//严格模式参考： https://www.runoob.com/js/js-strict.html
        //实例化map对象并加载地图
        var map = new ol.Map({
            target: "map",//获取div的id
            loadTilesWhileInteracting: true,//将在地图交互的时候加载瓦片，增加流程度
            layers: [
                new ol.layer.Tile({
                    title: "天地图矢量图层",
                    source: new ol.source.XYZ({
                        url: "http://t6.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=8e51a15e6c3e6fffb55ac16a2fe5c070",
                        crossOrigin: "anonymous",
                        warpX: false
                    })
                }),
                new ol.layer.Tile({
                    title: "天地图矢量注记图层",
                    source: new ol.source.XYZ({
                        url: "http://t6.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=8e51a15e6c3e6fffb55ac16a2fe5c070",
                        attributions: "天地图的属性描述",
                        crossOrigin: "anonymous",
                        warpX: false
                    })
                })
            ],
            view: new ol.View({
                center: [0, 0],
                zoom: 3
            })
        });
    </script>

</body>
</html>

运行效果如下：
在这里插入图片描述
解析如下：
1.

new ol.source.XYZ

是写给谷歌和天地图的类，参考这个文章！
2.

crossOrigin

解决图片跨域问题，参考这个文章！
3.
zoom: 3
表示地图的缩放级别是3。
还有一种添加图层的写法，内容如下：

  <script>
        //实例化图层的方法（add方法）
        var map = new ol.Map({
            target: "map",
            layers: [],
            view: new ol.View({
                center: [0, 0],
                zoom: 3
            })
        });
        var TitleLayer1 = new ol.layer.Tile({
            title: "天地图矢量图层",
            source: new ol.source.XYZ({
                url: "http://t6.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=8e51a15e6c3e6fffb55ac16a2fe5c070",
                warpX: false
            })
        });
        var TitleLayer2 = new ol.layer.Tile({
            title: "天地图矢量注记图层",
            source: new ol.source.XYZ({
                url: "http://t6.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=8e51a15e6c3e6fffb55ac16a2fe5c070",
                warpX: false
            })
        });
        //加载瓦片内容到图层中
        map.addLayer(TitleLayer1);
        map.addLayer(TitleLayer2);
    </script>

我就要学C++

关注

1
点赞
踩
13

收藏

觉得还不错? 一键收藏
2
评论
WebGIS实战练习一（加载天地图）

小白刚学webgis，记录一下代码和软件的使用，供以后翻阅，有志同道合的giser可以一起讨论交流，指出错误指出谢谢大家。1，在vs中创建网站，在引用下新建css和libs两个文件，css下引入ol.css和ol.css.map，libs下新建ol5文件夹并在ol5中引入ol.js和ol.js.map，再添加一个html页，代码如下。<!DOCTYPE html><html...
复制链接

扫一扫