实现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>
<!--Copyright wangQiaoZi 2019-08-15
--><title>Layer 3D</title><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" /><!-- jQuery --><script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script><!-- Openlayers --><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><!-- ol-ext --><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 3D</h1></a><!-- DIV pour la carte --><div id="map"></div><script type="text/javascript">// The mapvar 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 layervar 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 renderervar 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);

使用openlayers的扩展插件实现矢量图层的3D渲染相关推荐

OpenLayer扩展插件
OpenLayers 3 扩展插件 Awesome-OpenLayers OL3扩展 ol3-ext 很酷的一组 OpenLayers 3 (ol3) 扩展: 编辑-选择控件.CSS popup(弹出 ...
openlayers6【十七】vue VectorLayer矢量图层画地图省市区，多省市区(粤港澳大湾区)效果详解
文章目录 1. VectorLayer矢量图层的理解 2. openlayers通过坐标点画中国地图 2.1 准备边界的 data 数据 2.2 准备 china.json 的数据文件 2.3 实现区 ...
webgis 行政图报错_WebGIS教程使用MapServer制图发布一个矢量图层
发布一个矢量图层这一节开始在 MapServer 中使用矢量数据.矢量数据与CAD软件,或 Illustrator 中的矢量数据类似,除了有地理空间位置的差别,还有一个重要的方面就是 GIS 中的矢 ...
VS Code 安装插件、自定义模板、自定义配置参数、自定义主题、配置参数说明、常用的扩展插件
1. 下载和官网教程下载地址:https://code.visualstudio.com/ 官方教程:https://code.visualstudio.com/docs 2. 安装插件安装扩展插 ...
jupyter扩展插件Nbextensions的安装、使用
jupyter扩展插件Nbextensions的安装.使用 # 使用pypi里面包进行安装 pip install jupyter_contrib_nbextensions # 也可以通过如下方式进行 ...
javascript扩展插件alook_使用 Kotlin 编写你的第一个 Firefox WebExtension 扩展
Kotlin 是我最喜爱的编程语言.我们已经知道 Kotlin 编译成 Java 字节码可以快速被安卓和服务端采用.事实上,Kotlin 还支持编译成 JavaScript,因此该语言也开始在 Web ...
vscode 结束_8 个给前端的顶级 VS Code 扩展插件
翻译:京程一灯原文:https://1stwebdesigner.com/top-free-extensions-for-vs-code/ 微软的 VS (Visual Studio) Code 是 ...
c#+ArcGIS Engine-获取矢量图层的空间参考
转自原文c#+ArcGIS Engine-获取矢量图层的空间参考介绍一种简单的获取矢量图层空间参考的方法: 首先打开Shp文件获得FeatureClass,代码如下: string pPath=& ...
【Visual Studio 2019】上传代码到 GitHub ( 16.9.2 版本 | 安装 GitHub 扩展插件 | 创建 Git 仓库 | 推送到远程仓库 )
文章目录一.安装 GitHub 扩展插件二.创建 Git 仓库三.推送到远程仓库今天将 Visual Studio 2019 从 16.3.6 版本升级到了 16.9.2 版本 , 发现相关操 ...

使用openlayers的扩展插件实现矢量图层的3D渲染