OpenLayers（一）

来源：互联网发布：华为交换机telnet端口编辑：程序博客网时间：2024/05/20 01:44

OpenLayers是一个用于开发WebGIS客户端的Js类库包，用于实现标准格式发布的地图数据访问。目前OpenLayers有两种版本，即较老版本ol2和经过底层重写架构过的ol3。根据项目需要，我学习的是ol3版本。

基本概念

Map

ol3的核心部件是Map(ol.Map)。Map通常要呈现出来，在页面中用div元素来容纳Map，而这个容纳Map的元素叫做target容器

<div id="map"></div><script>  var map = new ol.Map({target: 'map'});</script>

View

ol.view负责地图的中心点，放大，投影的设置。ol.view实例常见的属性有    投影projection，该投影决定center的坐标系及分辨率的单位。如果没有指定，默认的投影是球墨卡托（EPSG:3857),以米为地图单位    zoom是用来指定地图的分辨率，主要的缩放级别有        -maxZoom | 28        -zoomFactor | 2        -maxResolution | 由投影在像素瓦片的有效程度来计算

map.setView(new ol.View({    center: [0, 0],    zoom: 2  }));

Source

ol3使用ol.source.Source子类获取远程数据图层，可以获取免费或者商业的地图瓦片Tile服务以及矢量数据

var osmSource = new ol.source.OSM();

Layer

图层包含了数据的可视化显示部分，ol3有三种基本的图层类型    -ol.layer.Tile    用于显示（预渲染）瓦片资源，是由特定分辨率的缩放级别组织的瓦片图片网格组成    -ol.layer.Image    用于显示（支持渲染服务）图片，这些图片可用于任意范围和分辨率    -ol.layer.Vector    用于显示在客户端渲染的矢量数据

    var osmLayer = new ol.layer.Tile({source: osmSource});    map.addLayer(osmLayer);

创建一个简单的地图

<div id="map" style="width: 100%, height: 400px"></div><script>  new ol.Map({    layers: [      new ol.layer.Tile({source: new ol.source.OSM()})    ],    view: new ol.View({      center: [0, 0],      zoom: 2    }),    target: 'map'  });</script>

0 0