#gis geojson数据源绘制矢量图层VectorLayer

openlayer 渲染geojson格式的矢量图层

项目中后端会给geojson格式的数据，然后需要前端这边做矢量图层渲染。

1. 第一步，创建数据源source
   const s = new ol.source.Vector({
   url:“test.geojson”,
   format:new ol.format.GeoJSON() //默认 epsg:4326
   })

2. 第二步，创建矢量图层VectorLayer
   const layer = new ol.layer.Vector({
   source: s, //添加数据源
   name:“test”,
   zIndex:999
   })

3. 第三步，将图层添加到地图容器中
   map.addLayer(layer)
   由于需要第一时间看到这个图层在页面中的什么位置，所以这里需要做一下fitView

4. 额外的第四步， 将图层位置展示在屏幕中间
   const extent = layer.getSource().getExtent()
   map.getView().fit(extent)
   这里进行了报错，好像是#25. 到官网一查才知道,原来是获取不到extent
   由于图层的加载时异步的，所以这里可能拿不到图层的数据。

5. 第五步，fix it。
   给图层添加事件监听,当加载完成时进行fit
   layer.getSource().on(‘change’, function({target}){
   if（target.state_ === ‘ready’){
   map.getView().fit(target.getExtent())
   }
   })。
   到这里结束！thanks