前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Openlayers3中SVG图加载

Openlayers3中SVG图加载

作者头像
lzugis
发布2018-10-23 11:28:04
1.5K0
发布2018-10-23 11:28:04
举报

概述:

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

效果:

SVG图片

缩放后

代码:

代码语言:javascript
复制
        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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017年09月18日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档