OpenLayers基础地图加载

1.它的官方网站http://www.openlayers.org下载他的压缩包，解压后可以看到其中的一些目录和文件。目前使用它的两个文件，及ol.js和ol.css

ol.js其中还有OpenLayers的地图实现，而ol.css包括地图样式

引用网络资源

<!–  <link rel=”stylesheet” href=”http://openlayers.org/en/v3.16.0/css/ol.css” type=”text/css”>
    <script src=”http://openlayers.org/en/v3.16.0/build/ol.js”></script>–>

引用本地资源
    <!–应用OL –>
    <link rel=”stylesheet”  href=”./CSS/ol.css”/>
    <script src=”./Scripts/ol.js”></script>

2.加载地图

<div id=”map” class=”map” tabindex=”0″></div>
    <button id=”zoom-out”>Zoom out</button>
    <button id=”zoom-in”>Zoom in</button>
    <script>

//加载地图
        var map = new ol.Map({
            layers: [
              new ol.layer.Tile({
                  source: new ol.source.OSM()
              })
            ],
            target: ‘map’,
            controls: ol.control.defaults({
                attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
                    collapsible: false
                })
            }),
            view: new ol.View({
                center: [0, 0],
                zoom: 2
            })
        });            

        document.getElementById(‘zoom-out’).onclick = function () {
            var view = map.getView();
            var zoom = view.getZoom();            
            view.setZoom(zoom – 1);
        };

        document.getElementById(‘zoom-in’).onclick = function () {
            var view = map.getView();
            var zoom = view.getZoom();
            view.setZoom(zoom + 1);
        };
    </script>

转载自：https://blog.csdn.net/lu18225857116/article/details/51505528