openlayers基礎（1）

建立一個新的webGis專案

根據新建的asp.net空網站

在官方網站中下載壓縮包，解壓完成後將檔案新增到專案中去

還需要在頁面中進行匯入

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

openlayers在進行地圖載入的過程

ol.Map:地圖容器類，是Openlayers的核心部分,可以說是圖層必須擁有的東西

一個ol.Map要對應上一個div標籤

ol.layer.Title,ol.source.Title,ol.View

</div>
    <div id="mapCon" style="width: 100%; height: 90%; position: absolute;">
    </div>

target: 'mapCon',表示ol.Map所對應的DIV

ol.Map最終展示自這個DIV中，也就是說一個ol.Map要對應一個div，所以一個頁面可以擁有很多個div

擁有很多個圖層

<p>地圖1</p>
<div id="map1" style="width: 100%;height: 400px"></div>
<p>地圖2</p>
<div id="map2" style="width: 100%;height: 400px"></div>
 

new ol.Map({
        layers: [
            new ol.layer.Tile({source: new ol.source.OSM()})
        ],
        view: new ol.View({
            center: [0, 0],
            zoom: 2
        }),
        target: 'map1'
    });

    // 建立第二個地圖
    new ol.Map({
        layers: [
            new ol.layer.Tile({source: new ol.source.OSM()})
        ],
        view: new ol.View({
            center: [0, 0],
            zoom: 2
        }),
        target: 'map2'
    });
 

ol.Map的三個主要引數就是target，layers，view

target是繫結DIV的作用

layers是在容器中載入的圖層，是一個數組

ol.layer.Title是定義圖層的方法

view是圖層在載入時的樣式