mapbox添加geojson面要素

通过axios读取样例数据，res即为返回值–json数据，读取后执行mapbox的on（）方法，其中‘load’为必填，需要通过load事件来对mapbox进行 *** 作；addLayer()即为添加图层，此处算是矢量图层。

id:为图层id，若后续有需要对该图层进行 *** 作，可根据此id进行查找，因此id必须唯一；

type:设置类型，fill为填充，另有‘line’、‘ raster ’、‘symbol’、‘circl’、‘ heatmap ’等一系列，可在mapbox官网查找；

source:即数据来源，通常为geojson，此处data设置为res.data，可通过控制打印res查看所需的数据是哪一层来决定。

source 是 Layer 的重要组成部分，表示图层的来源，也就是服务地址。

除了在构造函数中指定外，还可以使用 layer.setSource(source) 稍后指定。

上面介绍的都是可以实例化的类，还有一部分基类，不能被实例化，只负责被继承，有：

矢量图层的数据源

包含四个事件， addfeature ， changefeature ， clear ， removefeature 。

addfeature ，当一个要素添加到 source 中触发。

changefeature ，当要素变化时触发。

clear ，当 source 的 clear 方法调用时候触发。

removefeature ，当要素移除时候触发。

接受的参数：

features 方法

假如有一个包含空间数据的字符串，geojsonObject，是GeoJSON字符串格式，那么可以用来初始化一个图层。

url + format 方法

如果有一个文件作为数据源，那么可以配置 url 属性来加载数据：

这两种方法中都会指定数据来源格式， 矢量数据源支持的格式包含很多：gml、EsriJSON、geojson、gpx、igc、kml、osmxml、ows、polyline、topojson、wfs、wkt、wms capabilities（兼容 wms 的格式）、 wms getfeatureinfo、 wmts capabilities、xlink、xsd等格式。这些格式都有readFeatures 、readFeature 和readGeometry 方法用于读取数据。

提供被切分为切片的图片地图数据

可配置的选项

与 vector 一样的选项就不介绍了，介绍与 vector 特有的选项：

接受的事件

提供单一的图片地图。

可以配置的选项

触发的事件

source 是 layer 中必须（required）的选项，定义了地图数据的来源，与数据有关的函数，如addfeature、getfeature等函数都定义在 source 中，而且数据源支持多种格式。

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>

---