zoukankan      html  css  js  c++  java
  • Openlayers技巧之绘制选中要素正方形边框(自定义不规则多边形样式)

    想必各位开发者在使用cesium过程中,点击选中一个模型时候会出现一个正方形边框,效果不错。但是能不能在二维地图中也实现这个效果呢?

    答案是肯定的。先上效果图,该效果图是模仿船讯网效果做的,基本一致:

     

    近来在使用openlayers API时发现有一个类叫做ol.style.RegularShape,规则多边形样式,通过查阅样例以及API属性发现,该类可以实现规则多边形样式的绘制与显示,如五角星、正五边形、六边形等等,通过阅读源码发现该类继承ol.style.Image,是通过canvas绘制的规则多边形,既然是使用canvas绘制,那就好办了,我们知道canvas可以通过传入的路径绘制各种形状要素,我们可以自定义一个类继承ol.style.RegularShape,重写绘制方法,根据不规则多边形路径绘制,这样就达到了我们的目的。

    ol.style.RegularShape.call(this, {

            radius: radius,

            points: 0,

            opacity: 1,

            rotateWithView: rotateWithView,

            rotation: options.rotation !== undefined ? options.rotation : 0,

            stroke: options.stroke !== undefined ? options.stroke : null,

            fill: options.fill !== undefined ? options.fill : null,

            scale: 1,

            size: options.size !== undefined ? options.size : null,

            snapToPixel: snapToPixel,

            atlasManager: options.atlasManager

    });

    ol.inherits(ol.style.IrregularShape, ol.style.RegularShape);

    首先,在canvas中定义一个正方形边框的路径信息如下:[5, 44], [0, 35], [0, 5], [2.5, 0], [7.5, 0], [10, 5], [10, 35], [5, 44],设置边框宽度为1,颜色为红色,当然你也可以自定义正方形的大小、颜色等属性。

    其次,ol要素样式设置成样式组,这样既可以实现图片、文字、ol自带多边形样式的显示,也可以实现自定义正方形边框的显示。

    var style=[new ol.style.Style({

                        image: new ol.style.IrregularShape({

                            fill: oImgStyle.getFill(),

                            size: ship[status].size,

                            offset: ship[status].offset,

                            paths: ship[status].path,

                            snapToPixel: oImgStyle.getSnapToPixel(),

                            stroke: oImgStyle.getStroke(),

                            rotation: oImgStyle.getRotation(),

                            rotateWithView: oImgStyle.getRotateWithView()

                        })

                    }), new ol.style.Style({

                        image: new ol.style.IrregularShape({

                            size: textStyle.getOrginSize(),//获取原始设置大小

                            offset: textStyle.getOffset(),

                            paths: textStyle.getPaths(),

                            snapToPixel: textStyle.getSnapToPixel(),

                            stroke: textStyle.getStroke(),

                            rotation: textStyle.getRotation(),

                            text: "",//设置为空,隐藏标注

                            rotateWithView: textStyle.getRotateWithView()

                        })

                    }), new ol.style.Style({

                        image: new ol.style.IrregularShape({//自定义正方形边框

                            fill: new ol.style.Fill({ color: color }),

                            stroke: new ol.style.Stroke({ color: 'black', 1 }),

                            size: [12, 50],

                            offset: [22, 5],

                            paths: [[[5, 44], [0, 35], [0, 5], [2.5, 0], [7.5, 0], [10, 5], [10, 35], [5, 44]]]

                        })

                    })];

    Feature.setStyle(style);

    最后,使用开源GIS做开发一点好处就是,当你遇到问题无法解决时候,多看看代码,没有效果,自己造,没有想要的功能,自己写,总会实现自己想要的。

  • 相关阅读:
    获取网页源代码
    python下载图片
    vue框架前后端分离项目之登录注册页面及多方式登录、手机号验证码接口等相关内容-121
    django框架前后端混合项目之表设计、数据库及form组件等相关内容-77
    vue框架前后端分离项目之git分支合并及首页登陆注册接口等相关内容-120
    vue框架前后端分离项目之git的使用等相关内容-119
    vue框架前后端分离项目之xadmin、轮播图接口及git的介绍等相关内容-118
    vue框架前后端分离项目之跨域问题及首页搭建等相关内容-117
    vue框架前后端分离项目之框架介绍及前后端配置等相关内容-116
    django框架之自定义中间件及csrf跨站请求伪造等相关内容-75
  • 原文地址:https://www.cnblogs.com/gislover/p/14203889.html
Copyright © 2011-2022 走看看