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 根据坐标动态画多边形

猜你喜欢
