openlayers 一些样式

最新推荐文章于 2024-05-18 10:17:30 发布
最新推荐文章于 2024-05-18 10:17:30 发布
阅读量1.9k 收藏 14
点赞数 4
分类专栏： openlayers 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38000851/article/details/108252170
版权

近期工作需要设计交通图，故需要设计一些类似铁路，桥梁，隧道等样式，在此记录下样式的一些效果。可能有更好的实现方式，在这里 就当抛转引玉了。

参考文章：
https://www.jianshu.com/p/e68e8e1b7474

1.铁路

需要设计以下两种样式，一种再建的，一种已完工的
在这里插入图片描述
样式代码：

//铁路已完工
[
            new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color:"#000000",
                    width:6,
                    lineCap:"butt"
                }),
                zIndex:20
            }),
            new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color:"#ffffff",
                    width:6,
                    lineDash:[15,15],
                    lineCap:"butt"
                }),
                zIndex:21
            })
        ]
//铁路再建
[
            new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color:"#000000",
                    width:6,
                    lineDash:[15,45],
                    lineCap:"butt"
                }),
                zIndex:20
            }),
            new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color:"#ffffff",
                    width:6,
                    lineDash:[15,45],
                    lineDashOffset:30,
                    lineCap:"butt"
                }),
                zIndex:21
            })
        ]

效果：
在这里插入图片描述
在这里插入图片描述

2.街道

街道大致就是白色的底加上黑色的边
在这里插入图片描述
样式代码

[
            new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color:"#000000",
                    width:10,
                    lineCap:"butt"
                }),
                zIndex:20
            }),
            new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color:"#ffffff",
                    width:6,
                    lineCap:"butt"
                }),
                zIndex:21
            })
        ]

效果
在这里插入图片描述

3.隧道和桥梁

大致的想法是，利用街道的样式稍微做下调整，然后取线段的最后一个点和第一个点，加上分叉的样式，分叉点准备采用图片来弄，图个便利。
在这里插入图片描述
在这里插入图片描述
图片
在这里插入图片描述
在这里插入图片描述

样式代码

//桥梁样式
//因为绘制的时候用的是MultiLineString，如果用的是LineString,请自行调整代码
function drawsty(feature){
        var myStyle = [];
        myStyle.push(new ol.style.Style({
            stroke: new ol.style.Stroke({
                color:"#000000",
                width:10,
                lineCap:"butt"
            }),
            zIndex:20
        }));
        myStyle.push(new ol.style.Style({
            stroke: new ol.style.Stroke({
                color:"#FFFFFF",
                width:6,
                lineCap:"butt"
            }),
            zIndex:21
        }));
        var linearr = feature.getGeometry().getLineStrings();
        $.each(linearr,function(i,j){
            var firstcoord = j.getFirstCoordinate().join(",");
            var lastcoord =j.getLastCoordinate().join(",");
            //因为要给图片设置角度，所以需要遍历线的每一段，然后计算出图片需要旋转的角度
            j.forEachSegment(function(start, end) {
                if(firstcoord == start.join(",")){
                    var dx = end[0]- start[0];
                    var dy = end[1] - start[1];
                    var rotation = Math.atan2(dy, dx);
                    myStyle.push(new ol.style.Style({
                        geometry: new ol.geom.Point(start),
                        image: new ol.style.Icon({
                            src: "image/bridge.png",
                            scale:0.8,
                            rotation: -rotation-Math.PI/2//图片旋转角度，请自行调整
                        })
                    }));
                }
                if(lastcoord == end.join(",")){
                    var dx = end[0]- start[0];
                    var dy = end[1] - start[1];
                    var rotation = Math.atan2(dy, dx);
                    myStyle.push(new ol.style.Style({
                        geometry: new ol.geom.Point(end),
                        image: new ol.style.Icon({
                            src: "image/bridge.png",
                            scale:0.8,
                            rotation: -rotation+Math.PI/2
                        })
                    }));
                }
            });
        })
        return myStyle;
    }
    //隧道样式，隧道和桥梁的不同点是，隧道的黑色边框是虚线
    function drawsty(feature){
        var myStyle = [];
        myStyle.push(new ol.style.Style({
            stroke: new ol.style.Stroke({
                color:"#000000",
                width:10,
                lineDash:[15,1],
                lineCap:"butt"
            }),
            zIndex:20
        }));
        myStyle.push(new ol.style.Style({
            stroke: new ol.style.Stroke({
                color:"#FFFFFF",
                width:6,
                lineCap:"butt"
            }),
            zIndex:21
        }));
        var linearr = feature.getGeometry().getLineStrings();
        $.each(linearr,function(i,j){
            var firstcoord = j.getFirstCoordinate().join(",");
            var lastcoord =j.getLastCoordinate().join(",");
            j.forEachSegment(function(start, end) {
                if(firstcoord == start.join(",")){
                    var dx = end[0]- start[0];
                    var dy = end[1] - start[1];
                    var rotation = Math.atan2(dy, dx);
                    myStyle.push(new ol.style.Style({
                        geometry: new ol.geom.Point(start),
                        image: new ol.style.Icon({
                            src: "image/tunnel.png",
                            scale:0.8,
                            rotation: -rotation+Math.PI/2
                        })
                    }));
                }
                if(lastcoord == end.join(",")){
                    var dx = end[0]- start[0];
                    var dy = end[1] - start[1];
                    var rotation = Math.atan2(dy, dx);
                    myStyle.push(new ol.style.Style({
                        geometry: new ol.geom.Point(end),
                        image: new ol.style.Icon({
                            src: "image/tunnel.png",
                            scale:0.8,
                            rotation: -rotation-Math.PI/2
                        })
                    }));
                }
            });
        })
        return myStyle;
    }

效果：
在这里插入图片描述
在这里插入图片描述

4.高德地图导航样式

采用rbush实现该功能
箭头图片
在这里插入图片描述

样式代码

function styleFunction(feature,res){
        //轨迹线图形  此处我自己用的是MultiLineString
        var trackLine= feature.getGeometry().getLineStrings()[0];
        var styles = [
            new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: '#2E8B57',
                    width: 10
                }),
                zIndex:3
            }),
            new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: '#000000',
                    width: 12
                }),
                zIndex:1
            })
        ];
        //对segments建立btree索引
        let tree= rbush();//路段数
        trackLine.forEachSegment(function(start, end) {
            var dx = end[0] - start[0];
            var dy = end[1] - start[1];
            //计算每个segment的方向，即箭头旋转方向
            let rotation = Math.atan2(dy, dx);
            let geom=new ol.geom.LineString([start,end]);
            let extent=geom.getExtent();
            var item = {
                minX: extent[0],
                minY: extent[1],
                maxX: extent[2],
                maxY: extent[3],
                geom: geom,
                rotation:rotation
            };
            tree.insert(item);
        });
        //轨迹地理长度
        let length=trackLine.getLength();
        console.log(length);
        //像素间隔步长
        let stpes=40;//像素步长间隔
        //将像素步长转实际地理距离步长
        let geo_steps=stpes*res;
        //箭头总数
        let arrowsNum=parseInt(length/geo_steps);
        for(let i=1;i<arrowsNum;i++){
            let arraw_coor=trackLine.getCoordinateAt(i*1.0/arrowsNum);
            let tol=10;//查询设置的点的容差，测试地图单位是米。如果是4326坐标系单位为度的话，改成0.0001.
            let arraw_coor_buffer=[arraw_coor[0]-tol,arraw_coor[1]-tol,arraw_coor[0]+tol,arraw_coor[1]+tol];
            //进行btree查询
            var treeSearch = tree.search({
                minX: arraw_coor_buffer[0],
                minY: arraw_coor_buffer[1],
                maxX: arraw_coor_buffer[2],
                maxY: arraw_coor_buffer[3]
            });
            let arrow_rotation;
            //只查询一个，那么肯定是它了，直接返回
            if(treeSearch.length==1)
                arrow_rotation=treeSearch[0].rotation;
            else if(treeSearch.length>1){
                let results=treeSearch.filter(function(item){
                    //箭头点与segment相交，返回结果。该方法实测不是很准，可能是计算中间结果
                    //保存到小数精度导致查询有点问题
                    // if(item.geom.intersectsCoordinate(arraw_coor))
                    //   return true;

                    //换一种方案，设置一个稍小的容差，消除精度问题
                    let _tol=1;//消除精度误差的容差
                    if(item.geom.intersectsExtent([arraw_coor[0]-_tol,arraw_coor[1]-_tol,arraw_coor[0]+_tol,arraw_coor[1]+_tol]))
                        return true;
                })
                if(results.length>0)
                    arrow_rotation=results[0].rotation;
            }
            styles.push(new ol.style.Style({
                geometry: new ol.geom.Point(arraw_coor),
                image: new ol.style.Icon({
                    src: 'image/arrow.png',
                    scale:0.4,
                    rotation: -arrow_rotation+Math.PI/2
                }),
                zIndex:3
            }));
        }
        return styles;
    }

效果
在这里插入图片描述

搬砖的人生
关注
  • 4
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
openlayers修改样式_Openlayers v5.3每个顶点的自定义样式
weixin_28769141的博客
02-19 1800
是,不同的颜色、半径、zindex或任何其他样式设置:function styles(feature) {var multipoint = new ol.geom.MultiPoint(feature.getGeometry().getCoordinates()[0]);var styles = [new ol.style.Style({stroke: new ol.style.Stroke({c...
OpenLayers绘制图形
weixin_30872789的博客
05-13 292
OpenLayers的显示构成由外向内为： 　　　　ol.Map：地图对象。 　　　　ol.layer.Vector：图层对象layer。Map含有多个layer，最终的显示效果是由多个layer叠加而成 　　　　ol.source.Vector和ol.style.Style 一个layer由两部分构成：数据源source和样式style。其含义是，该layer下所有的图形都使用...
openlayer 5 MultiLineString 渲染多颜色
weixin_43947681的博客
03-29 2137
预览图 public GetTraffficSpeed(): Observable<any> { let serviceUrl = GEOSERVICE; serviceUrl += '/geoserver/tomtom/ows?service=WFS&version=1.0.0&request=GetFeatu...
vue3 + openlayers---流动线条（含动画效果）
最新发布
QDxin_xyz的博客
05-18 238
和上一篇博客一样使用的是 setInterval 但是处理方式不一样。
openlayers 入门教程（八）：Geoms 篇
大剑师兰特的GIS世界
04-19 1531
在OpenLayers中并没有直接名为`Geoms`的模块或类，而是通过`ol/geom`模块提供了一系列几何类型，如点（Point）、线（LineString）、多边形（Polygon）、多点集合（MultiPoint）、多线串（MultiLineString）、多边形集合（MultiPolygon）等。
OpenLayers线要素MultiLineString多行绘制箭头
Zartillery的博客
01-19 2461
直接上代码 //ajax请求查询所有数据 $.get( "${pageContext.request.contextPath}/getChannelGeom.action", function (data) { addChannelJson(data); }, "json" ); function addChannelJson(data) { for (i = 0; i <
4. Openlayers 点、线、面基本样式渲染（结合Vue 详细教程）
全栈三维GIS开发工程师，擅长Cesium、OpenLayers、Three.js、WebGL、Vue、Django、GDAL和QGIS技术。在这个博客里，我将分享我的开发经验、技术心得和项目案例，希望能为GIS爱好者和开发者提供有价值的参考。
06-11 4937
在本篇博客中，我们将学习如何在 OpenLayers 中使用样式系统，并在 Vue 项目中绘制点、线、面的基本样式。首先，我们将学习 OpenLayers 的样式系统，然后使用 Vue 创建一个地图组件，并在地图组件中添加点、线、面要素并为其设置样式。
ol基础扫盲【02】符号化渲染style
dreamgis的专栏
05-04 307
最近在学习openlayers的style，不得不佩服ol的设计太灵活了，很好很强大，也顺便了解了一下其它前端gis的框架，也都很强大，不得不佩服，前端技术已经发展到甩桌面程序几条街的程度。 本人学东西，一直都很慢而且容易忘，加上年龄又了，所以很多东西要反复记，所以这次写点下来，给自己看。 以前对arcgis桌面版的渲染了解的多些，所以对比了一下两套引擎的设计，发现ol的设计真尼玛简单，所有的渲染都来自var style =new ol.style.Style({})，{}里面可以放任何东西，不像arc
OpenLayers基础教程——创建要素图层，绘制点线面
HerryDong的博客
12-09 5647
1、前言 一般来说，我们会选择百度、高德、谷歌地图作为一个WebGIS系统的基础底图。底图其实就是存放在服务器上的一张一张的瓦片，它的作用仅仅是供用户浏览而已。而有些地物我们则需要以要素的形式来展现它们，比如GPS实测点、车辆的位置等。下面就来介绍一下如何在openlayers中创建要素图层。 2、创建要素图层的基本流程 创建要素图层的流程很简单，如下所示： 创建样式——ol.style.Style() 创建要素，设置其样式——ol.Feature() 创建数据源，添加要素——new ol.source.
OpenLayers教程：图形绘制之设置图形的样式
不睡觉的怪叔叔的博客
07-30 6279
OpenLayers可以对整个矢量图层统一设置样式，也可以单独对某个要素设置样式，本文介绍对整个矢量图层设置样式。 OpenLayers的ol.style.Style类用于设置样式，它需要结合另外三个类ol.style.Image、ol.style.Stroke、ol.style.fill分别设置点或圆的样式、边界线的样式、填充样式，另外ol.style.Text类用于设置要素注...
openlayers样式表
05-10
《OpenLayers样式表：实现地图底图切换功能详解》 OpenLayers是一个强大的JavaScript库，用于在Web上创建交互式地图应用。它支持多种地图服务，包括WMS、WMTS等，同时也允许用户自定义地图样式，以满足各种项目需求...
openlayers遮罩示例
01-29
3. **style.css** - 用于定义应用的CSS样式，包括地图容器的样式以及可能的遮罩层的样式，如颜色、透明度等。 4. **vite.config.js** - Vite的配置文件，用于自定义构建设置，例如开发服务器配置、优化选项等。 5....
openlayers中文.rar
08-20
- **样式设置**：通过Style和StyleMap对图层和特征进行样式定制。 - **瓦片服务**：通过TileLayer与不同的瓦片服务提供商集成。 4. **OpenLayers与GIS数据**： - **GeoJSON支持**：OpenLayers可以直接读取和展示...
openlayers 编辑geoserver图层
11-19
在GIS领域，OpenLayers和GeoServer是两个非常重要的开源组件，它们共同构成了Web ...通过深入学习和实践，你不仅能够掌握基本的编辑功能，还能进一步探索更多高级特性，如图层样式自定义、空间分析以及数据同步策略等。
openlayers常用功能简单封装
06-22
OpenLayers提供了强大的样式API，允许自定义要素的颜色、形状、大小等。例如，你可以为点要素设置不同的图标样式： ```javascript const style = new ol.style.Style({ image: new ol.style.Icon(({ anchor: [0.5...
OpenLayers 3 之 map样式（ol.style）详解
jyj545的专栏
11-16 1万+
OpenLayers 3 之 地图样式（ol.style）详解       地图样式是由 style 类控制的，其包含了地图样式的方方面面，例如，填充色、图标样式、图片样式、规则图形样式、边界样式、文字样式等，样式一般针对矢量要素图层。       矢量图层样式可以事先写好，写成静态的，矢量图层直接按照定义好的样式渲染，也可以动态使用样式的 set() 方法，但是要注意刷新矢量图层
OpenLayers项目分析（六）数据渲染分析
diyuan365760的专栏
04-28 641
转自：http://www.openlayers.cn/portal.php?mod=view&aid=12 实际上，OpenLayers的整个表现过程是这样的：通过调用获取数据，然后各种格式的解析器解析数据，在用所谓的渲染器渲染后加到图层上，最后再结合相应的控件表现出来，成为一幅我们看到的“动态”地图。　　这里主要讨论OpenLayers. Renderer这个类及其子类。　...
OpenLayers 3 之 地图交互功能（interaction）详解
热门推荐
研究与专注
05-21 3万+
地图交互功能和上一篇讲的地图控件有些混淆，它们都控制着用户与地图的交互，区别是地图控件的触发都是一些可见的 HTML 元素触发，如按钮、链接等；而交互功能都是一些设备行为触发，都是不可见的，如鼠标双击、滚轮滑动等，手机设备的手指缩放等。      地图的交互功能包含很多，如地图双击放大，鼠标滚轮缩放，矢量要素点选，地图上绘制图形等等。只要是涉及到与地图的交互，就会涉及到 intercation ...
openlayers 平行线样式
05-24
要为 OpenLayers 中的平行线添加样式，您可以使用 `ol.style.Style` 和 `ol.style.Stroke` 类。 以下是一个示例代码片段，它创建一个带有虚线样式的平行线图层： ```javascript var parallelLayer = new ol.layer.Vector({ source: new ol.source.Vector({ url: 'data/parallels.json', format: new ol.format.GeoJSON() }), style: new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'blue', width: 1, lineDash: [4, 8] // 设置虚线样式 }) }) }); ``` 在上面的代码中，我们创建了一个名为 `parallelLayer` 的矢量图层，并将其源设置为一个 GeoJSON 数据文件（`data/parallels.json`）。然后，我们创建了一个 `ol.style.Style` 对象，并将其 stroke 属性设置为蓝色颜色、宽度为 1 个像素和虚线样式。最后，我们将该样式应用到 `parallelLayer` 图层上。 您可以根据需要调整样式的属性，例如颜色、线宽度、虚线样式等。希望这可以帮助您添加所需的样式到您的平行线图层中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值