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)
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值