ol-ext扩展插件实现矢量图层的3D渲染时如何修改默认样式

ol-ext实现3D渲染

之前在项目在需要在openlayers中实现物体的3D立体化展示，故找到了ol-ext插件，具体实现过程见使用openlayers的扩展插件实现矢量图层的3D渲染，写这篇博客的原因也是记录自己工作中遇到的问题，以及帮助更多需要帮助的人，上一篇博客中有小伙伴问到一些问题，所以特写这篇博客进行一个解答。

问题汇总及解答

1. 设置3D渲染之后没有效果
   
   解答：(1) ol-ext是基于openlayers的插件，所以在引入ol-ext之前确保已经正确引入openlayers。

并需要注意，有时候jquery未正确加载，或加载超时也会造成没有效果。
(2) 调节相关参数

var r3D = new ol.render3D({
    
     height:0, maxResolution:0.6, defaultHeight:3.5 });
//height高度，maxResolution：最大分辨率等属性的影响也会造成对最终结果的一个差异
//，所以可以试试看API文档调节相关的参数

2. 设置之后想要改变其默认样式
   ol-ext设置三维渲染的默认样式：
   

修改样式：
可以在3D渲染出打个断点，F11一步一步查看整个渲染过程，包括样式

发现ol-ext.js中3D渲染的方法中对样式的设置为this.setStyle(options.style),所以你可以直接修改ol-ext.js中默认的样式设置（如下图中最下面两个红框所示），也可以在渲染时传入样式配置项

修改后样式如下：

注：在初始化渲染时就添加样式配置项，参考示例如下，样式的设置与openlayers一致

/* 20201015 created By qiaozi*/
var style = new ol.style.Style({
    
    
		stroke:new ol.style.Stroke({
    
    
			color:'rgb(128,234,123)',
			width:2
		}),
		fill:new ol.style.Fill({
    
    
			color:'rgba(255,0,0,0.5)'
		})
	})
	var r3D = new ol.render3D({
    
     height:0, maxResolution:0.6, defaultHeight:3.5 ,style:style});
	vector.setRender3D(r3D);

上述代码效果图如下：