这篇文章是一个技术伙伴写的&＃xff0c;经过他授权&＃xff0c;放到小专栏里面。
想必各位开发者在使用cesium过程中&＃xff0c;点击选中一个模型时候会出现一个正方形边框&＃xff0c;效果不错。但是能不能在二维地图中也实现这个效果呢&＃xff1f;
答案是肯定的。先上效果图&＃xff0c;该效果图是模仿船讯网效果做的&＃xff0c;基本一致&＃xff0c;效果图如下&＃xff1a;
近来在使用openlayers API时发现有一个类叫做ol.style.RegularShape&＃xff0c;规则多边形样式&＃xff0c;通过查阅样例以及API属性发现&＃xff0c;该类可以实现规则多边形样式的绘制与显示&＃xff0c;如五角星、正五边形、六边形等等&＃xff0c;通过阅读源码发现该类继承ol.style.Image&＃xff0c;是通过canvas绘制的规则多边形&＃xff0c;既然是使用canvas绘制&＃xff0c;那就好办了&＃xff0c;我们知道canvas可以通过传入的路径绘制各种形状要素&＃xff0c;我们可以自定义一个类继承ol.style.RegularShape&＃xff0c;重写绘制方法&＃xff0c;根据不规则多边形路径绘制&＃xff0c;这样就达到了我们的目的。
ol.style.RegularShape.call(this, { radius: radius, points: 0, opacity: 1, rotateWithView: rotateWithView, rotation: options.rotation !&＃61;&＃61; undefined ? options.rotation : 0, stroke: options.stroke !&＃61;&＃61; undefined ? options.stroke : null, fill: options.fill !&＃61;&＃61; undefined ? options.fill : null, scale: 1, size: options.size !&＃61;&＃61; undefined ? options.size : null, snapToPixel: snapToPixel, atlasManager: options.atlasManager
});
ol.inherits(ol.style.IrregularShape, ol.style.RegularShape);
首先&＃xff0c;在canvas中定义一个正方形边框的路径信息如下&＃xff1a;[5, 44], [0, 35], [0, 5], [2.5, 0], [7.5, 0], [10, 5], [10, 35], [5, 44]&＃xff0c;设置边框宽度为1&＃xff0c;颜色为红色&＃xff0c;当然你也可以自定义正方形的大小、颜色等属性。
其次&＃xff0c;ol要素样式设置成样式组&＃xff0c;这样既可以实现图片、文字、ol自带多边形样式的显示&＃xff0c;也可以实现自定义正方形边框的显示。
var style&＃61;[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: "",//设置为空&＃xff0c;隐藏标注 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: &＃39;black&＃39;, width: 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]]] }) })]&＃xff1b;
Feature.setStyle(style)&＃xff1b;
最后&＃xff0c;使用开源GIS做开发一点好处就是&＃xff0c;当你遇到问题无法解决时候&＃xff0c;多看看代码&＃xff0c;没有效果&＃xff0c;自己造&＃xff0c;没有想要的功能&＃xff0c;自己写&＃xff0c;总会实现自己想要的。
更多精彩文章见下面小专栏&＃xff1a;
GIS之家/Openlayers专题 &＃xff0d; 小专栏xiaozhuanlan.com
对本专栏感兴趣的话&＃xff0c;可以关注一波
GIS之家作品店铺&＃xff1a;GIS之家作品店铺
GIS之家源码咨询&＃xff1a;GIS之家webgis入门开发系列demo源代码咨询
京公网安备 11010802041100号