ol3对地图上某些特定的经纬度进行标注

最终效果需要类似于这种

1、首先我们需要一个最基本的地图,这一步骤可以浏览该分类下的上一篇随笔。

2、ol3支持的文件格式有.geojson,我们需要将坐标制作成符合这种格式的样子才能被ol3识别并显示在地图上。需要注意的是,必须确保经纬度数据的合法性,即纬度不能超过90度,经度不能超过180度。

geojson文件格式类似于json:

{"type": "FeatureCollection","features": [
{"type": "Feature","properties": {"name":"老厂"},"geometry": {"type": "Point","coordinates": [111,25]}},
{"type": "Feature","properties": {"name":"富邓线老胡家变"},"geometry": {"type": "Point","coordinates": [111,26]}}
]}

 可以同时描述多个点,也可以只描述一个点,还可以同时描述正方形,三角形,圆。每一个点或是其他图形,代表一个feature,而name代表这个feature的名字。

3、可以通过读取geojson文件,或者是在前端将数据拼接成这种格式,然后添加到地图上:

同样的,类似于离线地图,这里也需要我们将这些点,或是其他图形,制作成一个layer,即图层。图层有两种属性,一个是source,一个是style。
var vectorLayer2 = new ol.layer.Vector({ source: new ol.source.Vector({ url: "map/yz_coordinate2.geojson",//这里采用文件的形似,加载了这样一个文件 format: new ol.format.GeoJSON()//识别文件类型 }), style: new ol.style.Style({ image: new ol.style.Circle({//这里采用的是圆点 points: 5, radius: 1, fill: new ol.style.Fill({ color: 'red'//设置颜色为红色,fill是设置圆内属性,还有另一个s***是设置圆边界 }) }) }) });

4、最后,将这个layer添加入我们的地图中。

map.addLayer(vectorLayer2);
原文地址:https://www.cnblogs.com/yxth/p/6496989.html