ol-ext加载GeoJson格式数据并进行2.5D高度显示

ol-ext加载GeoJson格式数据并进行2.5D高度显示

ol-ext：
     ol-ext作为WeGIS最流行开源地图库之一的openlayers的扩展库，提供各种额外的地图控件、新的图层类型、额外组件或其他在核心openlayers库不存在的功能，其目的是增强openlayers在地图特殊渲染上的视觉效果，为用户带来更加多样化的视图体验。

ol-ext引入方式：

     1.外部js文件引入：

<--ol-ext引入-->
<link rel="stylesheet" href="../ol-ext.css"/>
<script type="text/javascript" src="../ol-ext.js"></script>

vue项目下载ol-ext

npm install ol-ext

实现步骤：

     1.openLayers加载GeoJson

let GeoJsonLayer = new ol.layer.Vector({
          source: new ol.source.Vector({
            features: (new ol.format.GeoJSON(
              {featureProjection:'EPSG:3857'}
            )).readFeatures(featuresJson)
          }),
          style: new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: 'rgba(161,160,160,0.8)',
              width: 1,
            }),
            fill: new ol.style.Fill({
              color: 'rgba(190,187,187,0.8)'
            })
          })
        })
        this.map.addLayer(GeoJsonLayer)

     2.设置渲染参数

let r3D =  new ol.render3D({
          style: new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: 'rgb(210,153,153)',
              width: 1
            }),
            fill: new ol.style.Fill({
              color: 'rgba(12,45,210,0.6)'
            })
          }),
          /** 初始高度 **/
          height: 0,
          /** 最大可视分辨率 **/
          maxResolution: 200
        })
        GeoJsonLayer.setRender3D(r3D)

     3.高度动画抬升/落下

/** 动画抬升/降落 **/
    doAnime(){
      if(this.height === 0){
        this.height = this.queryParams.fieldName + `/${this.heightScaledDivisor}`
        this.r3D.animate({ height: this.height})
      }
      else{
        this.r3D.animate({ height: 0 })
        this.height = 0
      }
    },

     当GeoJson数据属性值太大导致渲染效果过于夸张，我们可将带有"/+缩放比例"的字符串赋值给高度（height），并对ol-ext.js源码进行修改，使其能动态读取我们前端输入的高度值及缩放比例，重新计算后再重新赋值给height变量

设置缩放前：

     4.ol-ext.js源码修改

 /** Create a function that return height of a feature
   *	@param {function|string|number} h a height function or a popertie name or a fixed value
   *	@return {function} function(f) return height of the feature f
   */
  getHfn(h) {
    switch (typeof (h)) {
      case 'function': return h
      case 'string': {
        var dh = this.get('defaultHeight')
        //判断h中是否存在/
        var isContainSlash = h.includes('/')
        if(isContainSlash){
          var parts = h.split('/')
          var beforeSlash = parts[0]
          var afterSlash = parts[1]
          if(beforeSlash ==='0'){
            return (Number(beforeSlash) || dh)
          }else if(beforeSlash!=='0'){
            return (function(f){
              return((Number(f.get(beforeSlash))) / Number(afterSlash) ||dh)
            })
          }
        }else if(!isContainSlash){
          return (function (f) {
            return (Number(f.get(h)) || dh)
          })
        }
      }
      case 'number': return (function ( /*f*/) { return h })
      default: return (function ( /*f*/) { return 10 })
    }
  }

设置缩放后：