OpenLayers 根据坐标动态画多边形
Posted lanpeiyu
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了OpenLayers 根据坐标动态画多边形相关的知识，希望对你有一定的参考价值。
找了一上午，发现都是鼠标点击画框的，那为什么不标明了是 “鼠标”点击 呢？
想实现的功能是数据库检索坐标集合，然后根据分组提取4点坐标，最后把多个多边形形成图层放在地图上。
最后的实现：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>检索各单位泊位信息</title> 6 <link rel="stylesheet" href="ol3/ol.css"> 7 <style> 8 #map{ 9 width: 100%; 10 height: 500px; 11 } 12 </style> 13 </head> 14 <body> 15 <div id="map"> 16 17 </div> 18 <form id = "form"> 19 <input type="text" id="deptCode" name="deptCode"> 20 </form> 21 <button onclick="check()" value="检查">检查</button> 22 23 <script src="../js/ol.js" type="text/javascript"></script> 24 25 <script type="text/javascript"> 26 var map; 27 var check = function(){ 28 $.ajax({ 29 type: "POST", 30 // 表单数据 31 data: $("#form").serializeObject(), 32 // 访问后台路径 33 url: _contextPath + ‘/dictBerth/dictBerthByDept‘, 34 // 数据类型 35 dataType: "json", 36 success: function(data) { 37 //总泊位数组 38 var coordinatesPolygona = new Array(); 39 //用于接收单泊位的数组 40 var coordinates; 41 for (var i = 0; i < data.length; i++) {//循环多对象,取值 42 coordinates=[[data[i].longitude1,data[i].latitude1], 43 [data[i].longitude1,data[i].latitude2], 44 [data[i].longitude2,data[i].latitude2], 45 [data[i].longitude2,data[i].latitude1], 46 [data[i].longitude1,data[i].latitude1]]; 47 //将数组集合进行解析组合 48 coordinatesPolygona[i] = pushCoordinates(coordinates); 49 } 50 //用于测试的一些数据，可以先测试看看好不好用 51 /* var coordinates = [[122.050605773926, 30.6279315948486], 52 [122.050605773926, 30.6299896240234], 53 [122.053436279297, 30.6299896240234], 54 [122.053436279297, 30.6279315948486], 55 [122.050605773926, 30.6279315948486]] 56 var coordinatesPolygon = pushCoordinates(coordinates); 57 coordinatesPolygona[0] = coordinatesPolygon; 58 coordinates = [[122.051605773926, 30.6479315948486], 59 [122.051605773926, 30.6499896240234], 60 [122.051436279297, 30.6499896240234], 61 [122.051436279297, 30.6479315948486], 62 [122.051605773926, 30.6479315948486]]; 63 coordinatesPolygon = pushCoordinates(coordinates); 64 coordinatesPolygona[1] = coordinatesPolygon; */ 65 66 //瓦片图层 67 var tileLayer = new ol.layer.Tile({ 68 source:new ol.source.OSM() 69 }); 70 71 var source = new ol.source.Vector(); 72 73 //矢量图层 74 var vector = new ol.layer.Vector({ 75 source: source, 76 77 style: new ol.style.Style({ 78 fill: new ol.style.Fill({ 79 color: ‘rgba(255, 255, 255, 0.1)‘ 80 }), 81 82 stroke: new ol.style.Stroke({ 83 color: ‘red‘, 84 85 width: 2 86 }), 87 88 image: new ol.style.Circle({ 89 radius: 10, 90 91 fill: new ol.style.Fill({ 92 color: ‘#ffcc33‘ 93 }) 94 }) 95 }) 96 }); 97 98 //多边形此处注意一定要是[坐标数组] 99 var plygon = new ol.geom.Polygon(coordinatesPolygona); 100 101 //多边形要素类 102 var feature = new ol.Feature({ 103 geometry: plygon,//plygon代表多边形，其他的还有point点、cricle圆等，api上有写 104 105 }); 106 107 /*此处为重要，理解feature和source的关系，也就很简单了 108 feature就是我们的画图层 109 */ 110 source.addFeature(feature); 111 112 var view=new ol.View({ 113 center:[121.82371,31.25532], 114 115 zoom: 10, 116 117 projection: "EPSG:4326" 118 119 }); 120 121 //我这里没有对map加载进行处理，所以在二次加载时会出现覆盖现象。 122 //本意是进页面就加载，没有按钮。所以有需要的可以处理一下 123 map = new ol.Map({ 124 layers: [tileLayer, vector], 125 126 view:view, 127 128 target: "map" 129 130 }); 131 }, 132 error : function(XMLHttpRequest, textStatus, errorTHrown) { 133 window.location = _contextPath + ‘/error404/error404Show‘; 134 } 135 }); 136 } 137 138 //画框前置方法 139 var pushCoordinates = function(coordinates){ 140 //声明一个新的数组 141 var coordinatesPolygon = new Array(); 142 143 //循环遍历将经纬度转到"EPSG:4326"投影坐标系下 144 145 for (var i = 0; i < coordinates.length; i++) { 146 //坐标转换 147 var pointTransform = ol.proj.fromLonLat([coordinates[i][0], coordinates[i][1]], "EPSG:4326"); 148 //形成多边形数组 149 coordinatesPolygon.push(pointTransform); 150 151 } 152 153 return coordinatesPolygon; 154 155 } 156 157 </script> 158 </body> 159 </html>
以上是关于OpenLayers 根据坐标动态画多边形的主要内容，如果未能解决你的问题，请参考以下文章
openlayers3.X 与4.X画圈和画多边形api区别