我正在尝试创建一个带有已定义中心的圆圈,并在其上放置一个图标标记.如果我使用图像而不是OpenLayers.Geometry.polygon.createRegularpolygon,代码工作正常.我无法解决它.

在这里你找到我的代码:

<html>
<head>
<title>OpenLayers Example</title>
<script src="http://www.openlayers.org/apI/OpenLayers.js"></script>
</head>
<body>

<div id="mapdiv"></div>
<script>

map = new OpenLayers.Map("mapdiv");
map.addLayer(new OpenLayers.Layer.OSM());

epsg4326 =  new OpenLayers.Projection("epsg:4326"); //WGS 1984 projection
projectTo = map.getProjectionObject(); //The map projection (Spherical Mercator)

var lonLat = new OpenLayers.LonLat( -0.1279688,51.5077286 ).transform(epsg4326,projectTo);

var zoom=6;
map.setCenter (lonLat,zoom);

var mycircle = OpenLayers.Geometry.polygon.createRegularpolygon(
               new OpenLayers.Geometry.Point( lonLat ),1,30
           );

var featurecircle = new OpenLayers.Feature.Vector(mycircle);


var vectorLayer = new OpenLayers.Layer.Vector("Overlay");

// Define markers as "features" of the vector layer:
vectorLayer.addFeatures(featurecircle);

var feature = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point( -0.1244324,51.5006728  ).transform(epsg4326,projectTo),{description:'info'},{externalGraphic: 'img/marker.png',graphicHeight: 25,graphicWidth: 21,graphicXOffset:-12,graphicYOffset:-25  }
    );    
vectorLayer.addFeatures(feature);


map.addLayer(vectorLayer);


</script>
</body>
</html>

提前感谢任何提示.

解决方法

OpenLayers.Geometry.Point构造函数接受x,y而不是lonlat obj.当你创建圆圈时,新的OpenLayers.Geometry.Point(lonLat)应该是新的OpenLayers.Geometry.Point(lonLat.lon,lonLat.lat);

这应该更好:

map = new OpenLayers.Map("mapdiv");
map.addLayer(new OpenLayers.Layer.OSM());
epsg4326 = new OpenLayers.Projection("epsg:4326"); //WGS 1984 projection
projectTo = map.getProjectionObject(); //The map projection (Spherical Mercator)

var lonLat = new OpenLayers.LonLat(-0.1279688,51.5077286).transform(epsg4326,projectTo);

var zoom = 6;
map.setCenter(lonLat,zoom);

var vectorLayer = new OpenLayers.Layer.Vector("Overlay");

var point = new OpenLayers.Geometry.Point(lonLat.lon,lonLat.lat);


var mycircle = OpenLayers.Geometry.polygon.createRegularpolygon
(
    point,50000,40,0
);

var featurecircle = new OpenLayers.Feature.Vector(mycircle);

var featurePoint = new OpenLayers.Feature.Vector(
    point,{ description: 'info' },{ externalGraphic: 'img/marker.png',graphicXOffset: -12,graphicYOffset: -25 }
);
vectorLayer.addFeatures([featurePoint,featurecircle]);

map.addLayer(vectorLayer);

javascript – Openlayers在OpenStreetMaps图层上圈出多边形的更多相关文章

  1. Openlayers实现根据半径绘制圆形

    这篇文章主要介绍了利用Openlayers实现绘制三个圆形,绘制完成之后,三个圆心连接起来,然后标记出每两个圆心之间的距离,感兴趣的可以了解一下

  2. OpenLayers实现点要素图层的聚合显示的方法

    在很多情况下,点要素图层中的要素数量可能会成百上千,如果一个点要素图层中的点数量很多,我们就会采取图层聚合的方式对其进行处理,本文就来介绍一下,感兴趣的可以了解一下

  3. vue使用openlayers创建地图

    这篇文章主要为大家详细介绍了vue项目中使用openlayers创建地图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  4. Vue结合Openlayers使用Overlay添加Popup弹窗实现

    本文主要介绍了Vue结合Openlayers使用Overlay添加Popup弹窗实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  5. Vue+Openlayers实现实时坐标点展示

    这篇文章主要为大家详细介绍了Vue+Openlayers实现实时坐标点展示,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  6. Vue结合openlayers按照经纬度坐标实现锚地标记及绘制多边形区域

    OpenLayers是一个用于开发WebGIS客户端的JavaScript包,最初基于BSD许可发行。OpenLayers是一个开源的项目,其设计之意是为互联网客户端提供强大的地图展示功能,包括地图数据显示与相关操作,并具有灵活的扩展机制

  7. Vue使用openlayers实现绘制圆形和多边形

    这篇文章主要为大家详细介绍了Vue如何使用openlayers实现绘制圆形和多边形,文中的示例代码讲解详细,感兴趣的小伙伴快跟随小编一起动手尝试一下

  8. Vue利用openlayers实现点击弹窗的方法详解

    点击弹窗其实就是添加一个弹窗图层,然后在点击的时候让他显示出来罢了。本文将利用openlayers实现这一效果,快跟随小编一起学习一下吧

  9. vue利用openlayers实现动态轨迹

    这篇文章主要为大家介绍了vue利用openlayers实现动态轨迹,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

  10. 解析OpenLayers 3加载矢量地图源的问题

    矢量图形最大的优点是无论放大、缩小或旋转等不会失真。在地图中存在着大量的应用,是地图数据中非常重要的组成部分,这篇文章主要介绍了OpenLayers 3加载矢量地图源的相关资料,需要的朋友可以参考下

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部