Openlayers4.6.5根据坐标点集绘制多边形

本文介绍了一种使用JavaScript和OpenLayers库将坐标数组转换为地图上多边形的方法。通过遍历坐标数组并重新组织数据结构,最终创建一个多边形特征,并将其添加到地图源中。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

废话不多说,直接上代码:

                   

console.info("坐标位置"+coordinateArr);//arr元素为{lon:xxxx,lat:xxxxx}

var targetArr = new Array();

$.each(coordinateArr,function(index,obj){

//改变一下数据结构

var newArr = new Array();

      newArr.push(obj.lon);

      newArr.push(obj.lat);

     targetArr.push(newArr);

});

if(targetArr.length>0){

     var polygonArr = new Array();

     polygonArr.push(targetArr);

     var myPolygon = new ol.geom.Polygon(polygonArr);//绘制多边形(点集数组结构是[[[xxxx,xxxx],[   xxxx,xxxx],.....]])

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

var feature = new ol.Feature(myPolygon);

feature.setStyle(lineStyle)

zoneSource.addFeature(feature);

}

​总之就是:polygon封装到Feature --> feature添加到source。嗯,后面就简单了。。。。​​​​

OpenLayers是一个强大的JavaScript库,用于创建交互式的在线地图。要根据边界和点在OpenLayers中实现泰森多边形(Tessellation),你可以按照以下步骤操作: 1. **准备数据**:首先,你需要有边界线和各个兴趣点的坐标。边界通常是一系列线段,而点是你要生成多边形包围的特定位置。 2. **创建地图和图层**:在OpenLayers中初始化地图和一个矢量图层(Vector Layer),用于绘制多边形。 ```javascript var map = new ol.Map({ target: 'map', // 显示地图的HTML元素ID layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) // 使用OSM作为底图 ], view: new ol.View({ center: [0, 0], // 地图中心 zoom: 2 // 初始缩放级别 }) }); var vectorLayer = new ol.layer.Vector(); map.addLayer(vectorLayer); ``` 3. **计算泰森多边形**:对于每个点,遍历边界线,找到最近的距离,并基于这个距离生成多边形。这一步可能需要你自己编写一些算法,或者寻找第三方插件如 turf.js 来辅助计算。 4. **添加多边形到图层**:将计算出的泰森多边形作为几何对象(ol.geom.Polygon)添加到`vectorLayer`。 ```javascript function createTessellatedPolygon(point, boundary) { // 算法实现... } for (let point of points) { let polygon = createTessellatedPolygon(point, boundary); if (polygon) { var feature = new ol.Feature({ geometry: polygon }); vectorLayer.getSource().addFeature(feature); } } ``` 5. **视图更新和交互**:确保地图的视图更新能反映泰森多边形的变化,比如用户可以平移或缩放地图。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值