openlayer的图标绘制


    //创建地图
    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的图标绘制)