openlayers3画线画点

一、画点
（1）单个点
//1.创建Featrue,设置geometry属性
var saoguan = new ol.Feature({
geometry:new ol.geom.Point(ol.proj.fromLonLat([arrx,arry]))
});
//2.设置此点的样式
saoguan.setStyle(new ol.style.Style({
image:new ol.style.Icon({
color:’white’,
src:’../images/img182.png’
})
}))
//3.传入source
var source = new ol.source.Vector({
features:[saoguan]
});
//4.传入layer,设置点
var layer = new ol.layer.Vector({
source: source
});
//5.设置底图layer
var rasterLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
url:’http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i345013117!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0’
})
});
//6.最后将地图layer和点layer一并传入map中
var map = new ol.Map({
layers: [layer],
target: document.getElementById(‘rcp1_map’),
view: new ol.View({
center: ol.proj.fromLonLat(PlanAirLine[0]),
zoom: 3,
minZoom: 2,
maxZoom: 13,
}),
controls: ol.control.defaults({
attribution: false
}),
});
二、一组点一组线
iP.init=function(PlanAirLine,RealAirLine,arrx,arry){
var PlanAirPoint=[],RealAirPoint=[];
//计划航线、实际航线点数组
for (i = 0, ii = PlanAirLine.length; i < ii; ++i) {
PlanAirPoint.push(
new ol.Feature({
geometry:new ol.geom.Point(ol.proj.fromLonLat(PlanAirLine[i])),
})
)
PlanAirPoint[i].setStyle(new ol.style.Style({
image:new ol.style.Icon({
color:’white’,
src:’../images/img167.png’
})
}))
}
if(RealAirLine==[]){
}else{
for (i = 0, ii = RealAirLine.length; i < ii; ++i) {
RealAirPoint.push(
new ol.Feature({
geometry:new ol.geom.Point(ol.proj.fromLonLat(RealAirLine[i])),
})
)
RealAirPoint[i].setStyle(new ol.style.Style({
image:new ol.style.Icon({
color:’white’,
src:’../images/img166.png’
})
}))
}
}
//1.创建Featrue,设置geometry属性
var saoguan = new ol.Feature({
geometry:new ol.geom.Point(ol.proj.fromLonLat([arrx,arry]))
});
//2.设置此点的样式
saoguan.setStyle(new ol.style.Style({
image:new ol.style.Icon({
color:’white’,
src:’../images/img182.png’
})
}))
//1.设置一个feature
var geom = new ol.geom.LineString(PlanAirLine);
var geom2 = new ol.geom.LineString(RealAirLine);
geom.transform(‘EPSG:4326’, ‘EPSG:3857’);
geom2.transform(‘EPSG:4326’, ‘EPSG:3857’);
var feature = new ol.Feature({
geometry:geom
});
var feature2 = new ol.Feature({
geometry:geom2
});
//2.设置style
feature.setStyle(new ol.style.Style({
stroke: new ol.style.Stroke({
width: 2,
color:[2,87,189,.5]
})
}));
feature2.setStyle(new ol.style.Style({
stroke: new ol.style.Stroke({
width: 2,
color:[255, 0, 0, .5]
})
}));
//3.传入source
var source = new ol.source.Vector({
features:[feature,saoguan,feature2]
});
var source2 = new ol.source.Vector({
features:PlanAirPoint
});
var source3 = new ol.source.Vector({
features:RealAirPoint
});
//4.传入layer,设置点
var layer = new ol.layer.Vector({
source: source
});
var layer2 = new ol.layer.Vector({
source: source2
});
var layer3 = new ol.layer.Vector({
source: source3
});

    //5.设置底图layer
    var rasterLayer =  new ol.layer.Tile({   
           //source: new ol.source.OSM(),
          // title: "天地图路网", 
          // source: new ol.source.XYZ({
                // url: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}"
          // })
          // source: new ol.source.BingMaps({  
                // key: 'AkjzA7OhS4MIBjutL21bkAop7dc41HSE0CNTR5c6HJy8JKc7U9U9RveWJrylD3XJ',  
                // imagerySet: 'Road'  
            // })  
          // source: new ol.source.Stamen({  
                // layer: 'watercolor'  
          // })  
            source: new ol.source.XYZ({  
                url:'http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i345013117!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0'  
            })     


       });
    //6.最后将地图layer和点layer一并传入map中
    var map = new ol.Map({  
      layers: [rasterLayer,layer,layer2,layer3],  
      target: document.getElementById('rcp1_map'),  
      view: new ol.View({  
        center: ol.proj.fromLonLat(PlanAirLine[0]),  
        zoom: 3,
        minZoom: 2,
        maxZoom: 13, 
       }), 
        controls: ol.control.defaults({ 
          attribution: false
        }),  
    });
      var tian_di_tu_annotation = new ol.layer.Tile({
        title: "天地图文字标注",
        source: new ol.source.XYZ({
            url: 'http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}'
        })
     });
     //map.addLayer(tian_di_tu_annotation);
    }

转载自：https://blog.csdn.net/BoBoLUI/article/details/52919139