openlayers入门_ol-debug.js文件

1、下载openlayers的js文件和css文件

        鉴于网络限制的原因，在github上搭建个仓库，存放openlayers的js和css文件，便于使用。

        https://github.com/GoldMemory/openlayers

        貌似openlayers在版本5及其版本5之后，提供的案例是 webpack版本的，不过照着葫芦画瓢，js版本的同样适用。

2、基本地图显示

       在页面里引入在上面链接里下载的ol.js和ol.css。

<script type="text/javascript" src="ol/ol.js"></script>  
<link rel="stylesheet" href="ol/ol.css">

            var map = new ol.Map({
                target: 'map',
                layers: [
                    new ol.layer.Tile({
                        source: new ol.source.OSM()
                    })
                ],
                view: new ol.View({
                    center: ol.proj.fromLonLat([37.41, 8.82]),
                    zoom: 4
                })
            });

3、arcgis 切片地图

var url = 'https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/' +
    'Specialty/ESRI_StateCityHighway_USA/MapServer';
var layers = [
    new ol.layer.Tile({
        source: new ol.source.OSM()
    }),
    new ol.layer.Tile({
        extent: [-13884991, 2870341, -7455066, 6338219],
        source: new ol.source.TileArcGISRest({
            url: url
        })
    })
];
var map = new ol.Map({
    layers: layers,
    target: 'map',
    view: new ol.View({
        center: [-10997148, 4569099],
        zoom: 4
    })
});