网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

OpenLayers-创建多边形Polygon

OpenLayers版本:4.6.4

创新互联公司主营东昌网站建设的网络公司,主营网站建设方案,重庆APP开发,东昌h5成都小程序开发搭建,东昌网站营销推广欢迎东昌等地区企业咨询

叨叨:

本来这不应该成为一个问题,也不值得专门写一篇文章,尤其是对一个已经用过各种MapAPI(Google、百度、高德、SmartEarth...)的人来说,但就是这个本来以为3分钟解决的问题我却用了至少30分钟才把坑填完,最后发现OpenLayers的好多设计理念、思路都和之前用过的API大不相同。

需求:

需求很简单,其实就是用代码把一串经纬度坐标表示的Polygon添加在Map上,注意这里不是创建地图交互工具来用鼠标画Polygon,也不是用GeoJSON或WKT作为数据源,而是用代码手动实现,因为后者OL官网都有示例,前者我并没有找到(可能是因为我英文太烂,如果哪位发现有这样的示例请告诉我)

正题:

我先把最后的代码贴出来,再来分析我踩的那些坑

创建Map的过程我封装了一下,基本是最简化的配置,没什么特殊的
坑1:Polygon的构造函数,按照过往经验给一个Point的数组就好了,但是在OL中是一个Point的数组的数组,这还好,最起码在API中能看到,最坑的就是下面的坑;
坑2:一定要做坐标转换,其实折腾了半天我就是缺这一句代码,至于投影坐标系这些东西我还晕着呢,大家自己悟吧。

polygon.applyTransform(ol.proj.getTransform('EPSG:4326', 'EPSG:3857'));

最后要把polygon显示出来需要这样一个流程:
polygon封装到Feature --> feature添加到source --> 通过source创建vector layer --> 把layer添加到map上。
这就是为什么我开始说OL在设计理念上和之前接触的大不相同,之前的大部分API直接通过map.addxxx 函数就可以添加覆盖物,也许要用OL就得把之前自己想当然的那些经验都扔掉。
OpenLayers - 创建多边形Polygon


当前标题:OpenLayers-创建多边形Polygon
分享链接:http://bjjierui.cn/article/jpcgjj.html

其他资讯