//创建地图
var layer = new ol.layer.Vector({
source:new ol.source.Vector()
})
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
layer
],
view: new ol.View({
center: ol.proj.fromLonLat([117.108765, 36.668419]),
zoom: 8
}),
target: 'map'
});
// 加载矢量地图
function addGeoJSON(src) {
var layer = new ol.layer.Vector({
source: new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(src, { // 用readFeatures方法可以自定义坐标系
dataProjection: 'EPSG:4326', // 设定JSON数据使用的坐标系
featureProjection: 'EPSG:3857' // 设定当前地图使用的feature的坐标系
})
}),
style:new ol.style.Style({
stroke:new ol.style.Stroke({
color:'red',
size:10
})
})
});
map.addLayer(layer);
}
// 使用ajax获取矢量地图数据
$.ajax({
url: './trackPoints.geojson',
success: function(data, status) {
// 成功获取到数据内容后,调用方法添加到地图
addGeoJSON(data);
}
});
// 创建一个feature,并设置好在地图上的位置
var anchor = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([117.108765, 36.668419]))
})
// 设置样式,在样式中可以设置图标
anchor.setStyle(new ol.style.Style({
image:new ol.style.Icon({
src:'./锚点.png'
})
}))
// 添加到之前的创建的layer之中去
layer.getSource().addFeature(anchor)
openlayer的图标绘制
最新推荐文章于 2024-06-14 23:30:00 发布