openlayers 可以实现3d地图效果吗_OpenLayers教程：图形绘制之设置图形的样式

OpenLayers可以对整个矢量图层统一设置样式，也可以单独对某个要素设置样式，本文介绍对整个矢量图层设置样式。

OpenLayers的ol.style.Style类用于设置样式，它需要结合另外三个类ol.style.Image、ol.style.Stroke、ol.style.fill分别设置点或圆的样式、边界线的样式、填充样式，另外ol.style.Text类用于设置要素注记。

来看一个示例：

样式效果：

graphicStyle.html:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>设置几何图形样式</title><link rel="stylesheet" href="../v5.3.0/css/ol.css" /><script src="../v5.3.0/build/ol.js"></script>
</head>
<body><div id="map"></div><label>Shape type &nbsp;</label><select id="type"><option value="Point">Point</option><option value="LineString">LineString</option><option value="Polygon">Polygon</option><option value="Circle">Circle</option><option value="Square">Square</option><option value="Box">Box</option><option value="None">None</option></select><script>let vectorSource = new ol.source.Vector();let vectorLayer = new ol.layer.Vector({source: vectorSource,// 设置图层样式style: new ol.style.Style({// 将点设置成圆形样式image: new ol.style.Circle({// 点的颜色fill: new ol.style.Fill({color: '#F00'}),// 圆形半径radius: 5}),// 线样式stroke: new ol.style.Stroke({color: '#0F0',lineCap: 'round',       // 设置线的两端为圆头width: 5                }),// 填充样式fill: new ol.style.Fill({color: '#00F'})})});let map = new ol.Map({target: 'map',                          layers: [new ol.layer.Tile({                 // 瓦片图层source: new ol.source.OSM()     // OpenStreetMap数据源}),vectorLayer],view: new ol.View({                     // 地图视图projection: 'EPSG:3857',center: [0, 0],zoom: 0})});let typeSelect = document.getElementById('type');let draw;function addInteraction(){let type = typeSelect.value;if(type !== 'None'){let geometryFunction;switch(type){   case "Square": type = 'Circle';// 生成规则的四边形的图形函数geometryFunction = ol.interaction.Draw.createRegularPolygon(4);break;case 'Box':type = 'Circle';// 生成盒形状的图形函数geometryFunction = ol.interaction.Draw.createBox();break;default:break;}// 初始化Draw绘图控件console.log(type);draw = new ol.interaction.Draw({source: vectorSource,type: type,geometryFunction: geometryFunction});// 将Draw绘图控件加入Map对象map.addInteraction(draw);}}typeSelect.addEventListener('change', () => {// 移除Draw绘图控件map.removeInteraction(draw);addInteraction();});addInteraction();</script>
</body>
</html>

openlayers 可以实现3d地图效果吗_OpenLayers教程：图形绘制之设置图形的样式相关推荐

openlayers 可以实现3d地图效果吗_OpenLayers教程：地图标注
地图标注是将空间位置点与该点的信息相关联,通过图标.文字等形式把点相关的信息展现到地图上. 随便打开一个电子地图就可以看到许多标注: 可以说地图没有了标注就丧失了一半信息,甚至是全部信息! 地图标注的 ...
html怎么制作3D字体,用CSS3制作3D文字效果代码实例教程
这个简单的CSS文本阴影教程将一步步教你如何通过堆叠多层阴影来创建3D文字,然后进一步利用CSS3的transform和transition属性来实现鼠标移过字体放大的效果. 阿里西西web开发网为大 ...
使用echarts生成漂亮的3D地图
使用echarts生成漂亮的3D地图 echarts是非常好用的图表插件,本文使用echarts来生成一个漂亮的3D地图效果准备资料第三方插件 <script type="tex ...
地图定位之3D 地图
在 iOS7以后,手机上就可以实现3D 地图效果了.其实,实现3D 地图效果并不难,就是几行代码的事. 在 iOS7中引入了一个新的 MKMapCamera 类,它将一个 MKMapCamera 对象 ...
原生 js 实现类 3d 地图大屏展示自动高亮轮播、显示悬浮提示 tootip 的方案：svg + popper.js 定位引擎
要实现的效果如下图,3d 地图高亮自动轮播,展示白云区各个镇街的人口数局. 原由为什么想到这个方案,是因为我在用 echarts-gl 实现 3d 地图效果的过程中,我发现通过 dispatchA ...
openlayers 地图上加图标_OpenLayers教程：地图标注
地图标注是将空间位置点与该点的信息相关联,通过图标.文字等形式把点相关的信息展现到地图上. 随便打开一个电子地图就可以看到许多标注: 可以说地图没有了标注就丧失了一半信息,甚至是全部信息! 地图标注的 ...
echarts——实现3D地图+3D柱状图效果——粗糙代码记录——技能提升
最近看到同事在弄下面的这个图,这个图是从网上看到的,是某个网站的收费项目: 收费模板:￥29.9元购买,且必须是高级版+尊享版才能够购买这个... 死贵!!! 所以,最后的决定是通过echarts中的 ...
Echarts实现3d 地图实现飞线效果
Echarts实现3d 地图实现飞线效果注意:重点关注data中的数据格式在lines3D中symbol不能设置指定样式,echarts官网也没有这个参数,所以对于lines3D飞线如何实现飞机航 ...
echarts：实现3D地图版块叠加动效散点+轮播高亮效果
需求描述如下图所示,展示3D效果的地图版块,并叠加显示动效散点: 实现思路首先是3D地图版块效果的实现,可以参考广州3D地图:而动效散点的实现,可以参考地图发散分布. 这里再提一个经过尝试并不行的 ...

openlayers 可以实现3d地图效果吗_OpenLayers教程：图形绘制之设置图形的样式

openlayers 可以实现3d地图效果吗_OpenLayers教程：图形绘制之设置图形的样式相关推荐

最新文章

热门文章