openlayers基础（1）

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是图层在加载时的样式
extent:[102,29,104,31]地图范围
center:[104,06,30,67]地图中心
zoom:2 初始地图缩放
minZoom：1最小地图缩放
maxZoom:最大地图缩放