openlayers加载geojson数据 *

1. 获取GeoJSON数据，可以通过http请求获取，也可以自己定义json数据。很多小伙伴json是经纬度的坐标，不用急，往下看
   注意格式

var geojsonObject = {
        'type': 'FeatureCollection',
        'crs': {
          'type': 'name',
          'properties': {
            'name': 'EPSG:3857'
          }
        },
        'features': [{
          'type': 'Feature',
          'geometry': {
            'type': 'Point',
            'coordinates': [0, 0]
          }
        }, {
          'type': 'Feature',
          'geometry': {
            'type': 'LineString',
            'coordinates': [[4e6, -2e6], [8e6, 2e6]]
          }
        }, {
          'type': 'Feature',
          'geometry': {
            'type': 'LineString',
            'coordinates': [[4e6, 2e6], [8e6, -2e6]]
          }
        }, {
          'type': 'Feature',
          'geometry': {
            'type': 'Polygon',
            'coordinates': [[[-5e6, -1e6], [-4e6, 1e6], [-3e6, -1e6]]]
          }
        }, {
          'type': 'Feature',
          'geometry': {
            'type': 'MultiLineString',
            'coordinates': [
              [[-1e6, -7.5e5], [-1e6, 7.5e5]],
              [[1e6, -7.5e5], [1e6, 7.5e5]],
              [[-7.5e5, -1e6], [7.5e5, -1e6]],
              [[-7.5e5, 1e6], [7.5e5, 1e6]]
            ]
          }
        }, {
          'type': 'Feature',
          'geometry': {
            'type': 'MultiPolygon',
            'coordinates': [
              [[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6], [-3e6, 6e6]]],
              [[[-2e6, 6e6], [-2e6, 8e6], [0, 8e6], [0, 6e6]]],
              [[[1e6, 6e6], [1e6, 8e6], [3e6, 8e6], [3e6, 6e6]]]
            ]
          }
        }, {
          'type': 'Feature',
          'geometry': {
            'type': 'GeometryCollection',
            'geometries': [{
              'type': 'LineString',
              'coordinates': [[-5e6, -5e6], [0, -5e6]]
            }, {
              'type': 'Point',
              'coordinates': [4e6, -5e6]
            }, {
              'type': 'Polygon',
              'coordinates': [[[1e6, -6e6], [2e6, -4e6], [3e6, -6e6]]]
            }]
          }
        }]
      };

1. 创建矢量图层Source 

2. var vectorSource = new ol.source.Vector({
           features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
         });

3. 很多小伙伴的json文件是经纬度的，但是map初始化的时候默认是3857的投影，这就对不上了，加载不显示，如下的geojson文件，坐标是经纬度的4326

   {
       "type": "FeatureCollection",
       "name": "R1Z",
       "crs": {
           "type": "name",
           "properties": {
               "name": "EPSG:4326"
           }
       },
       "features": [
           {
               "type": "Feature",
               "properties": {
                   "OBJECTID": 1,
                   "EntityHand": 5295,
                   "UserID": 0,
                   "alt": 45,
                   "Shape_Leng": 0.0056963466905999996
               },
               "geometry": {
                   "type": "LineString",
                   "coordinates": [
                       [
                           116.4093,
                           39.47819
                       ],
                       [
                           116.4069,
                           39.4730
                       ]
                   ]
               }
           }
           
       ]
   }

    

如果geojson不显示，那多半是投影的问题，可以自己设定下投影 转换，使用{featureProjection: 'EPSG:3857'}将json转成3857的投影进行读取

var source=new ol.source.Vector({
    features: (new ol.format.GeoJSON({featureProjection: 'EPSG:3857'})).readFeatures(geojsonObject)
});

 

3.创建图层并绑定Source，给个显眼的样式

 var vectorLayer = new ol.layer.Vector({
        source: vectorSource,
        style: new ol.style.Style({
                        stroke: new ol.style.Stroke({
                            color: 'red',
                            width: 5,
                        }),
                    })
      });

4.添加到map中即可，此时的map投影是3857，如果在view设置了投影为4326可用直接显示出来经纬度的，贴出完整代码：

 $.getJSON("./R1Z.geojson",
            function (data, textStatus, jqXHR) {
                debugger
                let geojsonObject = data
                let features = (new ol.format.GeoJSON({
                featureProjection: 'EPSG:3857'
                })).readFeatures(geojsonObject)

                let p = (new ol.format.GeoJSON()).readProjection(geojsonObject)



                var vectorSource = new ol.source.Vector({
                    // projection: 'EPSG:3857',
                    features: features
                });

                //矢量图层
                lineLayer = new ol.layer.Vector({
                    zIndex: 99,

                    source: vectorSource,
                    // style: styleFunction
                    style: new ol.style.Style({
                        stroke: new ol.style.Stroke({
                            color: 'red',
                            width: 5,
                        }),
                    })

                });
                map.addLayer(lineLayer); //添加上站点的图层

            }
        );