上一篇已经讲了，怎么加载瓦片地图。
这篇就看看怎么简单的渲染矢量点线面数据。
最简单的，绘制点线面注记。
效果长这样：
新建一个文件FeatureOL.HTML。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>openlayer渲染矢量要素</title><link rel="stylesheet" href="ol/ol.css"><script src="ol/ol.js"></script><script src="jquery-1.7.2.js"></script><style type="text/css">#map,html,body {height: 100%;width: 100%;}.content {width: 100px;}</style>
</head><body>
<div id="map"></div>
</body>
<script type="text/javascript">//页面var view = new ol.View({// 设置中心点坐标，因为加载的腾讯瓦片地图的坐标系是墨卡托投影坐标系（'EPSG:3857'），所以要对经纬度坐标点进行投影，ol.proj.transform既是openlayer自带的坐标系转换函数，支持WGS84和墨卡托投影的互换。center: ol.proj.transform([116.400146,40.250184], 'EPSG:4326', 'EPSG:3857'),// 比例尺级数为9zoom: 9});var layers = [// 加载腾讯瓦片底图new ol.layer.Tile({source: new ol.source.XYZ({url: "http://rt{0-3}.map.gtimg.com/realtimerender?z={z}&x={x}&y={-y}&type=vector&style=0"})}) ];//地图var map = new ol.Map({target: 'map',//指向divlayers: layers,view: view});//设置风格，点线面注记var style=new ol.style.Style({image: new ol.style.Circle({fill: new ol.style.Fill({color: 'rgba(192, 192, 192, 0.5)'}),stroke: new ol.style.Stroke({color: 'rgba(192, 0, 0, 1)',width: 2}),radius: 10,}),stroke: new ol.style.Stroke({color: 'rgba(192, 0, 0, 1)',width: 2}),fill: new ol.style.Fill({color: 'rgba(192, 192, 192, 0.5)'}),text: new ol.style.Text({font: '20px Microsoft YaHei',text: '测试注记',offsetX: 20,offsetY: 20,fill: new ol.style.Fill({color: 'rgba(192, 0, 0, 1)'}),stroke: new ol.style.Stroke({color: 'rgba(255, 255, 255, 1)', width: 1}),})})// 新建点var point = new ol.Feature(new ol.geom.Point(ol.proj.transform([116.400146,40.250184], 'EPSG:4326', 'EPSG:3857')));// 新建线var line = new ol.Feature(new ol.geom.LineString([ol.proj.transform([116.400146,40.250184], 'EPSG:4326', 'EPSG:3857'), ol.proj.transform([117.400146,41.250184], 'EPSG:4326', 'EPSG:3857')]));// 新建面var polygon = new ol.Feature(new ol.geom.Polygon([[ol.proj.transform([116.400146,40.250184], 'EPSG:4326', 'EPSG:3857'), ol.proj.transform([116.400146,41.250184], 'EPSG:4326', 'EPSG:3857'),ol.proj.transform([117.400146,41.250184], 'EPSG:4326', 'EPSG:3857'),ol.proj.transform([116.400146,40.250184], 'EPSG:4326', 'EPSG:3857')]]));// 创建矢量资源var source=new ol.source.Vector({features: [point,line,polygon]});// 创建矢量图层var layer=new ol.layer.Vector({source:source,style:style});// 将图层添加至地图map.addLayer(layer);</script>
<style type="text/css">* {margin: 0px;padding: 0px;}#map {width: 100%;height: 100%;}
</style>
</html>一般来说，地图要素的注记与几何属性是不分离的，所以注记需要提取要素中的属性字段。
本文只是简单示例渲染矢量要素，注记的动态展示，会在后面渲染查询geojson要素的时候介绍。
