OpenLayers3加载Geojson文件

1.引入OL3的js文件和css文件

 <link rel=”stylesheet” href=”http://openlayers.org/en/v3.16.0/css/ol.css” type=”text/css”>
    <script src=”http://openlayers.org/en/v3.16.0/build/ol.js”></script>

2. 地图的div控件

<div id=”map” class=”map” tabindex=”0″></div>

3.首先加载地图，然后加载geojson文件

var vectorone = new ol.layer.Tile({
            source: new ol.source.OSM()
            
        });
        //加载geojson数据
        var GeoJsonLayer = new ol.layer.Vector({
            title: ‘add Layer’,
            source: new ol.source.Vector({
                projection: ‘EPSG:4326’,
                url: ‘./geojson/countries.geojson’,
                format:new ol.format.GeoJSON()
            })
        });

4. //加载地图
        var map = new ol.Map({
            layers: [
              vectorone, GeoJsonLayer
            ],            
            target: ‘map’,
            controls: ol.control.defaults({
                attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
                    collapsible: true
                })
            }),
            view: new ol.View({
                center: [52.5243700, 13.4105300],
                zoom: 2
            })
        });   

5.会出现不能读geojson的情况

  1.在iis中配置geojson的数据格式，Mime类型

2.或者在web.config文件下添加

 <system.webServer>
    <staticContent>
      <mimeMap fileExtension=”.geojson” mimeType=”application/geojson”/>
    </staticContent>
  </system.webServer>

转载自：https://blog.csdn.net/lu18225857116/article/details/51545573