openlayers画线

该博客介绍了如何利用OpenLayers库解析并显示GeoJSON文件中的线条数据,为读者展示了在地图上绘制地理线路的详细步骤。
摘要由CSDN通过智能技术生成

    //创建地图
    var map = new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            }),

        ],
        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);
        }
    });
  • geojson文件
{
   
  "type": "FeatureCollection",
  "features"
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值