OpenLayers 根據座標動態畫多邊形

時間 2019-11-08

標籤 openlayers 根據座標動態多邊形简体版

原文原文鏈接

　　找了一上午，發現都是鼠標點擊畫框的，那爲何不標明瞭是「鼠標」點擊呢？javascript

　　想實現的功能是數據庫檢索座標集合，而後根據分組提取4點座標，最後把多個多邊形造成圖層放在地圖上。css

　　最後的實現：html

  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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。