您的位置:首页 > Web前端 > JavaScript

OpenLayers3加载Geojson文件

2016-05-31 14:40 459 查看
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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: