关闭

OpenLayers3加载Geojson文件

3834人阅读 评论(6) 收藏 举报
分类:

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>


1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:18644次
    • 积分:462
    • 等级:
    • 排名:千里之外
    • 原创:22篇
    • 转载:27篇
    • 译文:2篇
    • 评论:6条
    最新评论