openlayers初始化加载一个地图(ol6)

2021-03-23 21:02:42 阅读：172 来源： 互联网

标签：初始化 ol ol6 map 地图 openlayers key new

初始化加载OSM地图，附带注释:

<!DOCTYPE HTML
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>初始化一张地图</title>
    <link href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js" type="text/javascript"></script>
    <style type="text/css">
        #map {
            width: 100%;
            height: 95%;
            position: absolute;
        }
    </style>
</head>

<body>
    <!-- 定义地图容器，记录地图容器ID -->
    <div id="map"></div>
    <script type="text/javascript">
        //初始化地图
        let map = new ol.Map({
            target: 'map',//地图容器div的ID
            controls: ol.control.defaults({
                attributionOptions: ({
                    collapsible: true
                })
            }).extend([
                new ol.control.ZoomToExtent({
                    extent: [
                        113.39977,29.972804,
                        115.432671,30.8558
                    ]
                })
            ]),
            //地图容器中加载的图层
            layers: [
                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=872a282f7273dd7ed7aaccbe1768b427",//tk为天地图key，注意参考的同学替换为自己的key，频繁使用他人的key会导致禁ip
                        wrapX: false
                    })
                })
            ],
            //地图视图设置
            view: new ol.View({     
                projection:"EPSG:4326",//设置坐标系为4326 地理坐标系         
                center: [114.422904,30.551875], //地图初始中心点             
                zoom: 16 //地图初始显示级别
            })
        });
    </script>

</body>

</html>

注释：

①、在初始化地图前需要给地图指定一个容器，如上文创建了一个id为map的div，在实例化map的时候指定target对应map

②、extent:[左下坐标，右上坐标],可以自动定位到extent范围内

③、注意tk为天地图key，注意参考的同学替换为自己的key，频繁使用他人的key会导致禁ip

④、wrapX:禁止平铺，有兴趣的同学可以打开看看效果

⑤、projection:projection坐标系定义为wgs84坐标系，大家可以尝试修改成3857墨卡托投影效果

标签：初始化,ol,ol6,map,地图,openlayers,key,new
来源： https://blog.csdn.net/qq_32238753/article/details/115142540

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

openlayers初始化加载一个地图(ol6)