openlayers地图添加标志物

2017-06-14

openlayers是最好的开源地图引擎,我们开发主要在地图上标记兴趣点,画区域,任意图形,运动轨迹等等。在ol地图上画东西其实非常简单,只需要按以下步骤执行

Point

point是一个ol坐标点,例如根据经纬度来转为ol对应的坐标

var lonLat = [114.158648, 22.284701];
var transPoint = ol.proj.fromLonLat(lonLat);

Feature

接下来要把point放到feature上面

var carMarker = new ol.Feature({
    type: "icon",
    geometry: new ol.geom.Point(transPoint)
})

每一个feature就是一个标志物,对标志物设置样式

var styles = {
    // 笔画
    'route': new ol.style.Style({
        stroke: new ol.style.Stroke({
            width: 6, color: [237, 212, 0, 0.8]
        })
    }),
    // 图片icon
    'icon': new ol.style.Style({
        image: new ol.style.Icon({
            anchor: [0.5, 1],
            src: 'https://openlayers.org/en/v4.2.0/examples/data/icon.png'
        })
    }),
    // 圆点
    'geoMarker': new ol.style.Style({
        image: new ol.style.Circle({
            radius: 7,
            snapToPixel: false,
            fill: new ol.style.Fill({color: 'black'}),
            stroke: new ol.style.Stroke({
                color: 'white', width: 2
            })
        })
    })
};

carMarker.setStyle(styles['icon']);

Source

上面新建一个标志物,然后需要放到对应的source里面,source.vector包裹这所有

var source = new ol.source.Vector({
    features: [routeFeature, geoMarker, startMarker, endMarker]
})

layer

一个layer是用来展示可视化source的数据,所以我们把source放到layer里面,在这里可以动态为feature设置不同的样式

var vectorLayer = new ol.layer.Vector({
    source: source,
    style: function (feature) {
        // hide geoMarker if animation is active
        if (animating && feature.get('type') === 'geoMarker') {
            return null;
        }
        return styles[feature.get('type')];
    }
});

Map

最后把layer放到map上面,整个步骤下来就可以实现标志物的绘制了

var map = new ol.Map({
    target: 'map',
    layers: [
        osmLayer, vectorLayer
    ],
    view: new ol.View({
        center: transPoint,
        zoom: 16
    })
});

 

标签: javascript

如果本文对您有所帮助,可以扫下面二维码给我支持,您的鼓励是我前进的动力!

微信

支付宝

目录

评论

*
*

正在加载验证码......

最新评论

  • 无评论
相关推荐
前端登录凭证存储方案
现在是前后端分离时代,接口登录凭证通常使用cookie,session,web storage来实现,三种方法区别可以阅...
React17.0生命周期调整
在即将到来的react17.0版本,react团队对生命周期做了调整,将会移除 componentWillMount,c...
webpack插件实现
webpack 插件是由「具有 apply 方法的 prototype 对象」所实例化出来的。这个 apply 方法在安...