Openlayers3中SVG图加载

概述:

鉴于SVG的优势,在图层展示的时候,会想到SVG的方式,但是OL3里面只支持ImageStatic的方式加载,也就是只能加载栅格图片,为此,本文实现Openlayer3中SVG图层的展示。

效果:

SVG图片

缩放后

代码:

        function addSvgLayer() {
            var _min = [12836027.844390793, 4745190.4650304755],
                _max = [13098185.245208949, 5069741.1276835548];
            var _resMin = map.getPixelFromCoordinate(_min),
                _resMax = map.getPixelFromCoordinate(_max);
            var _resLeftTop = map.getPixelFromCoordinate([_min[0], _max[1]]);
            var _w = Math.round(_resMax[0] - _resMin[0]),
				_h = Math.round(_resMin[1] - _resMax[1]);
            var _x = _resLeftTop[0],
				_y = _resLeftTop[1];
            //<img src="data/wind.svg" style="opacity: 0.6; transform: translate3d(264px, 277px, 0px);width: 567px; height: 627px;">
            var svg = $("<img/>").addClass("svg-layer").attr("src", "img/wind.svg")
				.css({
					"opacity":"0.6",
					"width":_w+"px",
					"height":_h+"px",
					"top":_y+"px",
					"left":_x+"px"
				});

            var mapDiv = $("#map").children()[0];
            $(mapDiv).append(svg);
        }

此代码已更新,请移步https://code.csdn.net/snippets/2595803.js

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android开发经验

无意间遇到的TextView的一个坑

1504
来自专栏coding

v-if与v-show实例

1534
来自专栏用户2442861的专栏

PyCharm常用快捷键

Ctrl + NumPad+/- 展开或者收缩代码块 Ctrl + Shift + NumPad+ 展开所有的代码块 Ctrl + Shift + NumPa...

1491
来自专栏我爱编程

PyCharm

1634
来自专栏九彩拼盘的叨叨叨

前端学习 第3周 第2天

702
来自专栏cnblogs

DOM事件第二弹(UIEvent事件)

此文章主要总结UIEvent相关的事件,如有不对的地方,欢迎指正。 一、uitls.js(绑定事件公共类) var fixs = { 'focusin'...

1879
来自专栏Android干货

小程序实践(九):返回到上一个界面并传值回去

常见需求,修改某个信息,需要调到一个新界面有个输入框去修改内容,修改之后,点击后退按钮,新的数据就返回更新了

1673
来自专栏十月梦想

Vue入门基础之组件插槽(slot)使用

组件的内容一般是在子组件中直接声明的,那么我们能不能再父组件进行自己去定义内容进行渲染呢?当然是可以的,slot就提供了极大的便利!下面看一下slot用法!

1361
来自专栏快乐八哥

让IE7/8使用CSS中first-child和last-child样式属性

项目最终效果如下图所示: ? 可以看出2个tab之间有一天分割线,这条分割线没有使用单独的div或者span。而是使用li标签的border-right。但是最...

1938
来自专栏coding

transition-group实现动画效果

如果要实现动画效果的元素是通过v-for循环渲染出来的,就不能使用transition,应该用transition-group将元素包裹

811

扫码关注云+社区