openlayers

webGIS openlayer使用方法

by giser · 2019-04-03

在我们这开发组中用的最多的就是地图，使用的第三方地图也是非常多的，常用的地图控制就是openlayer，一个openlayer最核心就是ol.Map，之后在ol.Map构造方法中进行view，layer，target，control等操作，在初学openlayer需要导入两个文件:ol.css以及ol.js，进行相关操作，代码如下所示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>地图2</title>
        <link rel="stylesheet" href="openlayers/ol.css" />
        <script type="text/javascript" src="openlayers/ol.js" ></script>        
    </head>
    <body>
        <p>地图1</p>
        <div class="map" id="map" style="width: 100%"></div>
        <p>地图2</p>
        <div class="map2" id="map2" style="width: 100%"></div>
        <script>
            //创建地图
            var map=new ol.Map({
                //设置logo，其中logo参数src以及href是必填项，不可忽略任何一个
                //logo:{src:"img/hevttc_logo.jpg",href:"http://www.hevttc.edu.cn/"},
                //logo:false,//不显示logo图片
                //logo:'img/hevttc_logo.jpg',//只显示图片，点击时没有超链接
                layers:[
                    //创建一个使用open Street Map 地图源的瓦片图层
                    new ol.layer.Tile({source: new ol.source.OSM()})
                ],
                //设置显示地图的视图
                view:new ol.View({
                    center:[0,0],//显示地图的显示中心

                    zoom:2//定义地图的显示层级是2

                }),
                //让id为map的div作为地图的容器
                target:'map'
            });
            var map2=new ol.Map({
                layers:[
                    new ol.layer.Tile({source: new ol.source.OSM()})
                ],
                view:new ol.View({
                    center:[0,0],
                    zoom:2
                }),
                target:'map2'
            })
        </script>
    </body>
</html>

转载自：https://blog.csdn.net/Technology_liu/article/details/80802082

相关推荐

Tags: openlayers

You may also like...