找了一上午，發現都是鼠標點擊畫框的，那為什么不標明了是 “鼠標”點擊 呢？
想實現的功能是數據庫檢索坐標集合，然后根據分組提取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>