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"
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
OpenLayers是一个强大的开源JavaScript库,用于构建交互式的Web地图应用。要使用OpenLayers在地图上画一条线(Polyline),你可以按照以下步骤操作: 1. 引入OpenLayers库:首先在HTML文件中引入OpenLayers的CDN链接,或者本地包含其文件。 ```html <script src="https://cdn.jsdelivr.net/npm/openlayers@6.6.1/dist/OpenLayers.js"></script> ``` 2. 初始化地图:创建一个`<div>`容器,并设置地图的视口大小。 ```html <div id="map" style="width: 100%; height: 500px;"></div> ``` 3. 创建地图实例:在JavaScript中,初始化地图并设置投影和分辨率。 ```javascript const map = new ol.Map({ target: 'map', view: new ol.View({ center: [0, 0], // 设置中心点 zoom: 2, // 设置初始缩放级别 projection: 'EPSG:4326', // 使用WGS84坐标系 }), }); ``` 4. 添加在线层或地形数据:通常我们会添加一个WMS或TMS服务作为底图。 ```javascript const layer = new ol.layer.Tile({ source: new ol.source.OSM(), // 或者使用其他在线地图服务 }); map.addLayer(layer); ``` 5. 创建线条矢量层:使用`ol.format.GeoJSON`将线条数据转换为OpenLayers可以理解的格式。 ```javascript const lineFeature = { type: 'Feature', geometry: { type: 'LineString', coordinates: [[0, 0], [10, 10]], // 线条起点和终点坐标 }, }; const lineSource = new ol.source.Vector({ url: 'data/lines.geojson', // 如果是本地文件,路径改为本地 format: new ol.format.GeoJSON(), features: [ol.format.GeoJSON.writeFeature(lineFeature)], }); const lineLayer = new ol.layer.Vector({ source: lineSource, style: new ol.style.Stroke({ color: 'blue', width: 2, }), }); map.addLayer(lineLayer); ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值