找了一上午，发现都是鼠标点击画框的，那为什么不标明了是 “鼠标”点击 呢？
想实现的功能是数据库检索坐标集合，然后根据分组提取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>
原文地址：https://www.cnblogs.com/lanpeiyu/p/11737778.html
时间： 2024-11-05 19:02:35