当我们遇到问题的时候改如何解决
本文不讲技术,不撸代码,只讲思路。
一、问题
在Openlayers中展示风速风向图,共分为以下两个阶段:
加载PNG图片→加载SVG图片
二、解决
1、加载PNG图片
问题
在Openlayer3中直接加载PNG图片,在API中提供了ImageStatic可以将图片展示出来,但是如何设置图片的imageExtent让图片能够在地图的正确位置展示成了问题的关键。
解决
首先,看到官方的demo里面有个加载ImageStatic的例子,于是就看了一下,官方的例子是通过proj定义了图片的坐标,这样通过坐标转换的方式将静态图片叠加到了地图上。(此过程,我的理解遥感里面做影像的纠正的原理类似。)
有了上面代码的思路,我就想如果我的输出的图片是按照地图的坐标输出的话是不是就可以直接叠加上去而不用做图片的投影了。接下来,就在Arcmap里面打开了一个tif数据,将其直接通过Export Data导出为PNG,并查看其属性获取到图象的四至。
再在代码里面根据输出的PNG和四至信息做测试,哎,思路是对的,能够完美的叠加到地图上。
实现代码
var bounds = [63.9796331669,14.7451916725, 140.181255914,55.4673388687];
var projection = new ol.proj.Projection({code: 'EPSG:4326',units: 'degrees'
});
var image = new ol.layer.Image({source: new ol.source.ImageStatic({url: "img/china.png",imageExtent: bounds})
});
有了上面的测试,终于明白了OL3中StaticImage的加载逻辑。
2、加载SVG图片
由于是PNG图片,在地图放大后会有马赛克现象,特别影像视觉效果,所以为了让展示的效果更加美观,所以就考虑将PNG图片换乘SVG图片。换完之后,首先是在Leaflet中做的测试,比PNG的效果好很多。可当我将SVGyizhi到Openlayers中的时候傻眼了,效果如下:
这个不是臣妾想要的,我想要高清,不要模糊!!!
所以,就开始了研究如何展示SVG。百度、谷歌、必应了一圈后,发现Openlayers的开发者给大家的回复是OL3的版本没法加载SVG!WHAT???没法加载,这不是逗我呢??不过呢,我想这个问题我一定可以解决的!!
后来一直在思考这个问题,有一天突然灵光一现:我可以在地图上面那直接叠加一层SVG的,类似于曾经做过的OL3和echat的结合的逻辑,再绑定地图的事件刷新不就OK了,没错,就是这个思路,哦,此时觉的我就是个天才!
可是当我写好代码,运行代码的时候,发现地图动不了了?怎么办???怎么办???可不能这样啊!!!还好我机智,瞄了一眼OL4的源码,发现地图的时间是在Map这个div上面触发的,所以我就想到了把这个img放到map div里面,代码如下:
self.image = new Image();
self.image.src = self._url;
self._map.getViewport().appendChild(self.image);
再测试,哈哈,妥了,再加点地图事件,就搞定了!此刻深深的被我的聪明才智折服。
但是,我就是这样一个perfect的人,为了更加好用所以我将此扩展成了一个类,源码如下:
/*** @author lzugis* 2017-10-20* @param option, 默认参数如下{map:null,extent:[],url:"",opacity:1,visible:true}*/
ol.layer.SvgImageLayer = function(option){this._option = {map:null,extent:[],url:"",opacity:1,visible:true};this._init(option);
};
ol.layer.SvgImageLayer.prototype = {image:null,_init:function(option){//将option合并for(var opt in option){this._option[opt] = option[opt];}this._map = this._option.map;this._extent = this._option.extent;this._url = this._option.url;this._opacity = this._option.opacity;this._visible = this._option.visible;},addToMap:function(){if(this._map) {var self = this;self.image = new Image();self.image.src = self._url;self._map.getViewport().appendChild(self.image);self._updateImgStyle();self._addMapEvent();}else{alert("map参数定义不正确!");}},updateImage: function(option){this._init(option);if(option.url)this.image.src = this._url;this._updateImgStyle();},hide: function(){this.image.style.display = "none";},show: function(){this.image.style.display = "";},destroy: function(){this.image.remove();},_updateImgStyle: function(){var self = this;var _min = [self._extent[0], self._extent[1]],_max = [self._extent[2], self._extent[3]],_topLeft = [self._extent[0], self._extent[3]];var _scrMin = self._toScreenPoint(_min),_scrMax = self._toScreenPoint(_max),_scrTopLeft = self._toScreenPoint(_topLeft);var _w = Math.round(_scrMax[0] - _scrMin[0]),_h = Math.round(_scrMin[1] - _scrMax[1]),_left = _scrTopLeft[0],_top = _scrTopLeft[1];var cssText = "";var styles = {"opacity": self._opacity,"z-index": 0,"position":"absolute","width":_w+"px","height":_h+"px","top":_top+"px","left":_left+"px"};for(var style in styles){cssText+=style+":"+styles[style]+";"}self.image.style.cssText = cssText;self._visible?self.show():self.hide();},_addMapEvent:function(){var self = this;self._map.on("precompose",function(evt){evt.stopPropagation();self._updateImgStyle();});},_toScreenPoint: function(mapPoint){var srcPoint = this._map.getPixelFromCoordinate(mapPoint);return srcPoint;}
};ol.inherits(ol.layer.SvgImageLayer, ol.layer.base);
实现后,效果如下,心理满满的成就感。。。
正当我沉溺在满满的成就感的时候,有一天,突然发现,我的WMS图层怎么被盖住了???Oh, NO!!!!Kill me!!OL4中map所有的图层都是绘制在一个canvas画布里面的,我叠上去一个图层势必会挡住的,肿么办?what can I do for you??不行,我不能坐以待毙,要是让客户发现这个问题就惨了,客户是我们的衣食父母,这个时候就必须体现我们的专业性和我的钻研性了。
于是乎,上git,扒源码,看了好一阵,都没找到头绪,怎么办,我可不是就此放手的人。恩,先看看API再说,突然,看到了imageSize,凭我的直觉,他应该就是我要找的,这个时候就又不得不发挥我的主观能动性了,计算了一个大小就贴上去,wonderful!!!
附上源码如下:
var bounds = [12836027.844390793, 4745190.4650304755, 13098185.245208949, 5069741.1276835548];
var source = new ol.source.ImageStatic({url: "bjoutput/wind.svg",imageExtent: bounds,imageSize:getImageSize(bounds)
});
image.setSource(source);
//获取图片大小
function getImageSize(bounds){var _min = [bounds[0], bounds[1]],_max = [bounds[2], bounds[3]],_topLeft = [bounds[0], bounds[3]];var _scrMin = map.getPixelFromCoordinate(_min),_scrMax = map.getPixelFromCoordinate(_max);var _w = Math.round(_scrMax[0] - _scrMin[0]),_h = Math.round(_scrMin[1] - _scrMax[1]);return [_w, _h];
}
三、总结
写此篇的目的是为了告诉大家姿势的正确解锁方式,要善于思考,勤于动手,问题才会解决。
山重水复疑无路,柳暗花明又一村
当我们遇到问题的时候改如何解决相关推荐
- sql服务器文件夹共享,sqlserver2017共享功能目录路径不可改的解决方法
注意:什么路径不可改就搜索该路径进行删除注册表记录,然后重启电脑 按 win键盘+R输入 regedit 进去注册表,点击计算机按"编辑"-->查找下一个 需要等一些时间 结 ...
- Outlook邮箱文件夹显示英文改中文解决方法
Outlook邮箱文件夹显示英文改中文解决方法 故障现象: 解决方法一: 1.关闭outlook 2.打开CMD命令行------运行outlook.exe /resetfoldername ...
- 在win7中要修改计算机的虚拟内存,win7虚拟内存不能改怎么办|win7虚拟内存不能改的解决方法...
遇到win7虚拟内存不能改的情况怎么办?在ghost win7系统中经常会设置虚拟内存,修改虚拟内存可以帮助我们在我们的物理内存不够用的时候充当内存使用.如果电脑内存在2GB以下,就需要修改虚拟内存了 ...
- 【板栗糖GIS】3dmax—使用脚本批量导入obj格式时一直 需要点击重命名改如何解决
[板栗糖GIS]3dmax-使用脚本批量导入obj格式时一直 需要点击重命名改如何解决 以个人经验看,脚本没有问题,是使用的3dmax版本太低,比如我在3dmax2016上一直有需要重命名问题,但是后 ...
- win7 计算机属性 灰,win7系统文件夹属性中隐藏选项显示灰色不可改的解决方法...
很多小伙伴都遇到过win7系统文件夹属性中隐藏选项显示灰色不可改的困惑吧,一些朋友看过网上零散的win7系统文件夹属性中隐藏选项显示灰色不可改的处理方法,并没有完完全全明白win7系统文件夹属性中隐藏 ...
- 如何管理局域网的IP地址,局域网内IP地址不够用改如何解决?!
局域网的一大特点就是拥有一定数量的终端用户.例如一所重点中学,学校局域网的终端用户有600多个,为了区分各类不同用户,我们采用的是终端固定IP设置的方法.和其他许多学校的网管一样,我们也一直被终端用户 ...
- 项目中pom.xml文件变灰且中间有横杠改怎么解决?
目录 问题描述: 问题解决:
- iPhone苹果手机的safari打开网页上显示不安全改如何解决
苹果公司自 iOS 11.3 和 macOS 10.13.4 开始,"Safari 浏览器"会在您浏览http网站时,显示"网站不安全"警告. 这个" ...
- cad文本改宋体字型lisp_CAD的40个常用命令和20个常见问题解决方法 撩妹必备技能...
CAD这么多命令和快捷方式,你掌握了几分? 1. 创建直线的命令是L+空格 18. 局部观察平面图细节Z+空格 2. 创建圆的命令是C+空格 19. 显示实时缩放的放大镜 Z+双空格 3. 创建圆弧的 ...
最新文章
- Java项目:药品管理系统(java+swing+Gui+mysql)
- 在Mybatis3开发中与配置相关的7点体会
- gis 联合 融合_超图与广州大学达成战略合作,共建“广州大学超图软件联合研究中心”...
- android数据库格式化,正确格式化SQLite SQL语句
- intellij idea 实用快捷键
- HashMap负载因子
- 以Linux系统(Ubuntu)开发生活(一)
- CCF NOI1021 发放奖金
- 江苏省2021年高考成绩查询有分数吗,2021年江苏省高考成绩查询入口
- 拓端tecdat|R语言贝叶斯非参数模型:密度估计、非参数化随机效应meta分析心肌梗死数据
- CIO:互联网IT系统和传统企业IT系统的异同
- 【图解深度学习】【章节:2-1.1 | 什么是机器学习?】连小学生都能看懂的深度学习基础总结
- 期刊论文格式是什么样的,如何排版?
- Fileupload
- android redis客户端,redis client (redis客户端)
- emlog5.3.1后台暴力破解
- Android快捷方式解密
- 突发!ITELLYOU要改版了!
- 计算机网络地址怎么办,电脑ip地址错误怎么办 电脑ip地地址错误解决方法
- linux文件授权用户创建
热门文章
- oppo手机内存卡数据丢失什么恢复软件能恢复
- VRay 3.6 for SketchUp代理物体技术应用
- SVN提交出错:Attempted to lock an already-locked dir
- python多个摄像头_python - 使用python和OpenCV与VideoCapture洞察多个网络摄像头捕获 - 堆栈内存溢出...
- CSS实现文字镂空效果炫酷背景效果
- 英语知识点整理day11-谚语学习(C字母开头)
- 【数仓建模】传统建模与宽表建模有何差异?基于宽表建模实践
- 命运的几大定律与原则
- HEVC/H.265硬件编码器实现杂谈
- 牧牛生态科技,区块链重构社会信任体系