OpenLayer4加载svg

关于加载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、代码示例：

var m_center=[116.35,39.9];//地图中心点-经纬度坐标
//经纬度转至xy
m_center = ol.proj.transform(m_center,'EPSG:4326', 'EPSG:3857' );

//反过来
var m_center=[12914838.35,4814529.9];//地图中心点-xy坐标
//经纬度转至经纬度
m_center = ol.proj.transform(m_center, 'EPSG:3857' ,'EPSG:4326');

二、完整demo

参考资料：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的方式

转载于:https://www.cnblogs.com/tuboshu/p/10752328.html