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];
            //![](data/wind.svg)
            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);
        }

---

类型	内容
qq	1004740957
公众号	lzugis15
e-mail	niujp08@qq.com
webgis群	1004740957
Android群	337469080
GIS数据可视化群	458292378

技术博客
CSDN：http://blog.csdn.NET/gisshixisheng
博客园：http://www.cnblogs.com/lzugis/
在线教程
http://edu.csdn.Net/course/detail/799
Github
https://github.com/lzugis/
联系方式

类型	内容
qq	1004740957
公众号	lzugis15
e-mail	niujp08@qq.com
webgis群	1004740957
Android群	337469080
GIS数据可视化群	458292378

LZUGIS