最终效果需要类似于这种
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);