关于加载svg 的代码，网上是少之又少，牛老师博客倒是有，但是只是核心代码，并没有给出完整的demo,而且核心代码中有个问题对于这个ol渲染不太理解的话的话应该做不出来效果，就是关于坐标转屏幕坐标的问题，必须需要地图渲染完成之后才能拿到否则没法转换，得出转换为空的结果。
放个图：
一、原理
通过静态加载图片的方式加载svg，给定初始化范围，更重要的是给定imageSize，关于imageSize是通过给定的范围求出图片的大小，用xmax-xmin得到宽度，用ymax-ymin得出来高度，作为imageSize的值。
介绍一个小知识关于3857和4326的：
1、'EPSG:4326'-经纬度坐标-WGS84
2、'EPSG:3857'- xy坐标-web墨卡托
3、ol3默认的坐标系为3857，即在创建ol.map的时候，若不指定projection，则默认为EPSG:3857
4、代码示例：
1var m_center=[116.35,39.9];//地图中心点-经纬度坐标 2//经纬度转至xy 3m_center = ol.proj.transform(m_center,'EPSG:4326', 'EPSG:3857' ); 4 5//反过来 6var m_center=[12914838.35,4814529.9];//地图中心点-xy坐标 7//经纬度转至经纬度 8m_center = ol.proj.transform(m_center, 'EPSG:3857' ,'EPSG:4326');
二、完整demo
1<!DOCTYPE html> 2<html xmlns="http://www.w3.org/1999/xhtml"> 3<head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>加载SVG数据</title> 6 <link href="Script/ol4/ol.css" rel="stylesheet" /> 7 <script src="Script/ol4/ol.js"></script> 8 <script src="../Scripts/jquery-1.7.1.js"></script> 9 <!--<script src="Script/ol4/SvgImageLayer.js"></script>--> 10 <style> 11 #map 12 { 13 width:1000px; 14 height:1000px; 15 } 16 </style> 17 <script> 18 $(function () { 19 20 var vec_c = getTdtLayer("vec_w"); 21 var cva_c = getTdtLayer("cva_w"); 22 var bounds = [12836027.844390793, 4745190.4650304755, 13098185.245208949, 5069741.1276835548]; 23 var view = new ol.View({ 24 center: new ol.proj.transform([116.46, 39.92], "EPSG:4326", "EPSG:3857"), 25 zoom: 8, 26 extent:bounds 27 28 29 }); 30 console.log(new ol.proj.transform([116.46, 39.92], "EPSG:4326", "EPSG:3857")); 31 var map = new ol.Map({ 32 controls: ol.control.defaults({ 33 attribution: false 34 }), 35 target: 'map', 36 layers: [vec_c, cva_c], 37 view: view, 38 39 }); 40 41 function getTdtLayer(lyr) { 42 var url = "http://t{0-7}.tianditu.com/DataServer?T=" + lyr + "&X={x}&Y={y}&L={z}"; 43 var layer = new ol.layer.Tile({ 44 source: new ol.source.XYZ({ 45 url: url 46 }) 47 }); 48 return layer; 49 } 50 map.renderSync(); 51 var image = new ol.layer.Image(); 52 map.addLayer(image); 53 var source = new ol.source.ImageStatic({ 54 url: "/OpenLayer/data/wind.svg", 55 imageExtent: bounds, 56 imageSize: getImageSize(bounds) 57 }); 58 image.setSource(source); 59 //获取图片大小 60 function getImageSize(bounds) { 61 console.log(bounds); 62 var _min = [bounds[0], bounds[1]], 63 _max = [bounds[2], bounds[3]], 64 _topLeft = [bounds[0], bounds[3]]; 65 var _scrMin = map.getPixelFromCoordinate(_min); 66 console.log(_scrMin); 67 _scrMax = map.getPixelFromCoordinate(_max); 68 console.log(_scrMax); 69 var _w = Math.round(_scrMax[0] - _scrMin[0]), 70 _h = Math.round(_scrMin[1] - _scrMax[1]); 71 return [_w, _h]; 72 } 73 }); 74 </script> 75</head> 76<body> 77 <div id="map"></div> 78 79</body> 80 <script> 81 82 </script> 83</html>
参考资料：https://blog.csdn.net/gisshixisheng/article/details/78350959
三、关于解决map.getPixelFromCoordinate为null值
首先我们可以采用先同步渲染的方法map.renderSync()这样这样转换坐标也不会为出错，
在这我们可以通过事件的方式：
map.once('postrender', function() { // safe to call map.getPixelFromCoordinate from now on });
参考资料：https://github.com/openlayers/openlayers/issues/5456#issuecomment-225125384
四、总结
这和加载静态图片差别不大，关于地图图片添加到地图上的问题，主要有两种方式一通过arcgis导出jpg图片，图片四至和坐标系在数据给指定，二可以通过加载svg的方式