使用openlayers的扩展插件实现矢量图层的3D渲染
实现openLayers二维地图上的矢量图层的3D效果
openLayers简介
openlayers是一个用于开发WebGIS的客户端的JavaScript包，主要负责GIS数据的展示和交互。在操作方面，OpenLayers 除了可以在浏览器中帮助开发者实现地图浏览的基本效果，比如放大（Zoom In）、缩小（Zoom Out）、平移（Pan）等常用操作之外，还可以进行选取面、选取线、要素选择、图层叠加等不同的操作，甚至可以对已有的OpenLayers 操作和数据支持类型进行扩充，为其赋予更多的功能。例如，它可以为OpenLayers 添加网络处理服务WPS 的操作接口，从而利用已有的空间分析处理服务来对加载的地理空间数据进行计算。同时，在OpenLayers提供的类库当中，它还使用了类库Prototype.js 和Rico 中的部分组件，为地图浏览操作客户端增加Ajax 效果。openlayers是二维的，有旋转的功能，但是没有倾斜的功能，所以在openlayers中让图层倾斜，呈现类似于高德地图和百度地图那样的三维效果实现不了。
openlayers官网链接
openLayers的扩展插件——ol-ext
ol-ext是一个很cool的openlayers扩展插件。它是一个与openlayers一起使用的具有扩展，控制，交互等功能的一个插件。在用openlayers进行WebGIS的开发过程中遇到一个问题——让加载在openlayers中的一个矢量图层具有立体效果，而不只是一个二维平面。找了非常多的方法，都不能实现，最后找到了这个插件，可以很好的实现，所以写这篇博客希望可以为有此需求的小伙伴解决问题。openlayers还有一些其他的扩展插件，小伙伴们也可以自行百度了解其他相关的插件。也可以看看以下这篇博客openlayer扩展插件
ol-ext官网
ol-ext实现矢量图层的3D渲染
以下是ol-ext官网中的一个示例，我进行了一部分改动，有需要实现类似效果的小伙伴也可以去ol-ext官网进行更加深入的学习
ol-ext
该示例的完整代码
<DOCTYPE html>
<html>
<head>
<title>Layer 3Dtitle>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="2.5D/3D buildings on an OL3 map" />
<meta name="keywords" content="ol3, layer, vector, 3D, buildings, animation" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js">script>
<link rel="stylesheet" href="https://openlayers.org/en/latest/css/ol.css" />
<script type="text/javascript" src="https://openlayers.org/en/latest/build/ol.js">script>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Object.assign">script>
<link rel="stylesheet" href="../../dist/ol-ext.css" />
<script type="text/javascript" src="../../dist/ol-ext.js">script>
<link rel="stylesheet" href="../style.css" />
<style>
#map
{ position:fixed;
top: 4em;
left: 0;
right:0;
bottom:0;
margin:0;
}
style>
head>
<body >
<h1>Layer 3Dh1>
a>
<div id="map">div>
<script type="text/javascript">
// The map
var map = new ol.Map({
target: 'map',
view: new ol.View({
zoom: 19,
center: [-245406, 5986536]// [-245575, 5986863], //[-244777, 5989809]
}),
//interactions: ol.interaction.defaults(),
layers: [ new ol.layer.Tile({ name:"OSM", source: new ol.source.OSM() })]
});
// Create layer
var vectorSource = new ol.source.Vector(
{ url: '../data/ignf.json',
projection: 'EPSG:3857',
format: new ol.format.GeoJSON()
});
var vector = new ol.layer.Vector(
{ source: vectorSource,
});
map.addLayer(vector);
// Set 3D renderer
var r3D = new ol.render3D({ height:10, defaultHeight:3.5 });
vector.setRender3D(r3D);
script>
body>
html>
效果图：
实现不同样式的3D渲染
new ol.render3D({ height:10, defaultHeight:3.5 });
该方法接收style参数，可以自己设置style样式，传入该方法中，那么setRender3D进行3D渲染的时候就会按照你所设置的样式进行渲染。
style的设置与openLayers中的样式设置是完全一样的，就不举例子了；
var r3D = new ol.render3D({ height:10, defaultHeight:3.5 ,style:myStyle});
vector.setRender3D(r3D);