openlayer简单实用（1）最近由于项目开发需要，使用了openlayer来进行GIS地图的简单开发工作。本文将介绍

一、前言

最近由于项目开发需要，使用了openlayer来进行GIS地图的简单开发工作。本文将介绍使用openlayer实现以下功能：

地图底图渲染
展示聚合图层
在地图上点击点位图标，弹窗显示信息
点击点位信息列表，地图上联动

二、具体实现

1、地图底图渲染

（1）简单实用

一个map里必不可少的参数是target--dom节点（DOM的ID值），view视图， layers图层

    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
        })
    });

（2）静态地图

强大的openlayer除了支持上面例子那样，通过加载地图服务来渲染地图外，还支持将以一张静态图片为地图底图。 实现的关键API是： ol.source.ImageStatic ，图片无论是本地地图还是url地址，亦或是 base64，使用都是一样的。

2、展示聚合图层

渲染聚合图层

聚合图层添加要素 features: 使用ol.Feature 生成多个要素，每个要素使用 ol.geom.Point 生成相应的位置信息

3、在地图上点击点位图标，弹窗显示信息

给map对象上绑定 click事件，通过 forEachFeatureAtPixel 获取点击处的feature

4、点击点位信息列表，地图联动

this.map.getView().setCenter([parseFloat(lng), parseFloat(lat)]);
this.map.getView().setZoom(MAX_ZOOM);

openlayer简单实用（1）