找了一上午，发现都是鼠标点击画框的，那为什么不标明了是 “鼠标”点击 呢？

　　想实现的功能是数据库检索坐标集合，然后根据分组提取4点坐标，最后把多个多边形形成图层放在地图上。

　　最后的实现：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>检索各单位泊位信息</title>

     <link rel="stylesheet" href="ol3/ol.css">

     <style>

         #map{

             width: 100%;

             height: 500px;

         }

     </style>

 </head>

 <body>

     <div id="map">

     </div>

     <form id = "form">

         <input type="text" id="deptCode" name="deptCode">

     </form>

     <button onclick="check()" value="检查">检查</button>

 <script src="../js/ol.js" type="text/javascript"></script>

 <script type="text/javascript">

 var map;

 var check = function(){

     $.ajax({

         type: "POST",

         // 表单数据

         data: $("#form").serializeObject(),

         // 访问后台路径

         url: _contextPath + '/dictBerth/dictBerthByDept',

         // 数据类型

         dataType: "json",

         success: function(data) {

             //总泊位数组

             var coordinatesPolygona = new Array();

             //用于接收单泊位的数组

             var coordinates;

             for (var i = 0; i < data.length; i++) {//循环多对象,取值

                 coordinates=[[data[i].longitude1,data[i].latitude1],

                             [data[i].longitude1,data[i].latitude2],

                             [data[i].longitude2,data[i].latitude2],

                             [data[i].longitude2,data[i].latitude1],

                             [data[i].longitude1,data[i].latitude1]];

                 //将数组集合进行解析组合

                 coordinatesPolygona[i] = pushCoordinates(coordinates);

             }

             //用于测试的一些数据，可以先测试看看好不好用

             /* var coordinates = [[122.050605773926, 30.6279315948486],

                 [122.050605773926, 30.6299896240234],

                 [122.053436279297, 30.6299896240234],

                 [122.053436279297, 30.6279315948486],

                 [122.050605773926, 30.6279315948486]]

                 var coordinatesPolygon = pushCoordinates(coordinates);

                 coordinatesPolygona[0] = coordinatesPolygon;

                  coordinates =  [[122.051605773926, 30.6479315948486],

                 [122.051605773926, 30.6499896240234],

                 [122.051436279297, 30.6499896240234],

                 [122.051436279297, 30.6479315948486],

                 [122.051605773926, 30.6479315948486]];

                 coordinatesPolygon =  pushCoordinates(coordinates);

                 coordinatesPolygona[1] = coordinatesPolygon;  */

               //瓦片图层

             var tileLayer = new ol.layer.Tile({

                 source:new ol.source.OSM()

             });

             var source = new ol.source.Vector();

             //矢量图层

             var vector = new ol.layer.Vector({

                 source: source,

                 style: new ol.style.Style({

                     fill: new ol.style.Fill({

                         color: 'rgba(255, 255, 255, 0.1)'

                     }),

                     stroke: new ol.style.Stroke({

                         color: 'red',

                         width: 2

                     }),

                     image: new ol.style.Circle({

                         radius: 10,

                         fill: new ol.style.Fill({

                             color: '#ffcc33'

                         })

                     })

                 })

             });

             //多边形此处注意一定要是[坐标数组]

             var plygon = new ol.geom.Polygon(coordinatesPolygona);

             //多边形要素类

             var feature = new ol.Feature({

                 geometry: plygon,//plygon代表多边形，其他的还有point点、cricle圆等，api上有写

             });

             /*此处为重要，理解feature和source的关系，也就很简单了

                 feature就是我们的画图层

             */

             source.addFeature(feature);

             var view=new ol.View({

                 center:[121.82371,31.25532],

                 zoom: 10,

                 projection: "EPSG:4326"

             });

             //我这里没有对map加载进行处理，所以在二次加载时会出现覆盖现象。

             //本意是进页面就加载，没有按钮。所以有需要的可以处理一下

            map = new ol.Map({

                 layers: [tileLayer, vector],

                 view:view,

                 target: "map"

             });

         },

         error : function(XMLHttpRequest, textStatus, errorTHrown) {

             window.location = _contextPath + '/error404/error404Show';

         }

      });

 }

     //画框前置方法

     var pushCoordinates = function(coordinates){

         //声明一个新的数组

         var coordinatesPolygon = new Array();

         //循环遍历将经纬度转到"EPSG:4326"投影坐标系下

         for (var i = 0; i < coordinates.length; i++) {

             //坐标转换

             var pointTransform = ol.proj.fromLonLat([coordinates[i][0], coordinates[i][1]], "EPSG:4326");

             //形成多边形数组

             coordinatesPolygon.push(pointTransform);

         }

         return coordinatesPolygon;

     }

 </script>

 </body>

 </html>

OpenLayers 根据坐标动态画多边形的更多相关文章

  1. 使用Java、Matlab画多边形闭合折线图

    由于写论文要将“哈密顿回路问题(TSP)”的求解中间结果表示出来,查了一下使用程序画多边形图形.现在在总结一下,这个图是“由给定节点首尾相连的”闭合多边形. 1.使用matlab作闭合多边形图 没有找 ...

  2. OpenGL进阶演示样例1——动态画线（虚线、实线、颜色、速度等）

            用OpenGL动态绘制线段.事实上非常easy,但到如今为止.网上可參考资料并不多. 于是亲自己主动手写一个函数,方便动态绘制线段.代码例如以下: #include<GL/glu ...

  3. 【编程漫谈】用JAVA画多边形

    一门语言只要带图形库就可以编程画图了,用JAVA画图有两种方式,一是在内存中画好然后生成图片,就可以看到画图的效果了.另一个就是在窗口界面上直接画,可以实时看到程序的运行效果.刚开始学编程的时候,我加 ...

  4. 最全vue的vue-amap使用高德地图插件画多边形范围

    一.在vue-cli的框架下的main.js(或者main.ts)中引入高德插件,代码如下: import Vue from 'vue' import VueAMap from 'vue-amap' ...

  5. 由两点坐标如何画出直线 matlab

    由两点坐标如何画出直线  方法1:利用直线方程 斜率加截距 方法2:数据拟合 %由两点坐标得数据拟合直线与画线 x = [,]; y = [,]; k = ((-)/(-));% 由两点坐标得到直线斜 ...

  6. ARCGIS动态画点

    小马哥淡定 原文 ARCGIS动态画点 private void DrawPointOnMap(double x, double y,bool clear) { IMapControl2 pMapCt ...

  7. qt 画多边形（实现鼠标拖动节点）

    ---恢复内容开始--- 2018-01-06 这个小例子实现了移动鼠标,鼠标的坐标信息跟随鼠标移动,多边形的实现,鼠标点击可以拖动多边形点的位置,(其中有个问题?我在QMainWindow下,用mo ...

  8. 贝塞尔曲线.简单推导与用opengl实现动态画出。

    在opengl中,我们可以用少许的参数来描述一个曲线,其中贝塞尔曲线算是一种很常见的曲线控制方法,我们先来看维基百科里对贝塞尔曲线的说明: 线性贝塞尔曲线 给定点P0.P1,线性贝塞尔曲线只是一条两点 ...

  9. 一个给力的html5 画多边形的例子

    只需改变参数就能画出你想要的多边形,代码简单!不得不惊叹canvas的强大! 代码奉上 <!doctype html> <html> <head> <meta ...

随机推荐

  1. trigger 和 triggerHandler()，自定义事件

    trigger 和 triggerHandler(),自定义事件 语法: $(selector).trigger(event,[param1,param2,...]) 1,event 必需.规定指定元 ...

  2. Greenplum 调优--数据倾斜排查（一）

    对于分布式数据库来说,QUERY的运行效率取决于最慢的那个节点. 当数据出现倾斜时,某些节点的运算量可能比其他节点大.除了带来运行慢的问题,还有其他的问题,例如导致OOM,或者DISK FULL等问题 ...

  3. 如何自定义 GNOME 3 桌面？

    作者: Magesh Maruthamuthu 译者: LCTT 郑 | 2019-08-22 00:02   评论: 2 收藏: 1 我们收到很多来自用户的电子邮件,要我们写一篇关于 GNOME 3 ...

  4. Educational Codeforces Round 74

    目录 Contest Info Solutions A. Prime Subtraction B. Kill 'Em All C. Standard Free2play D. AB-string E. ...

  5. TensorFlow(十一)：递归神经网络（RNN与LSTM）

    RNN RNN(Recurrent Neural Networks,循环神经网络)不仅会学习当前时刻的信息,也会依赖之前的序列信息.由于其特殊的网络模型结构解决了信息保存的问题.所以RNN对处理时间序 ...

  6. python2和python3区别

    字符编码: py3中默认字符编码是unicode:py2中默认字符编码是 ASCII,如果文件中出现了中文,需要在顶部加入coding声明#coding:utf8 让用户输入:py3中直接使用inpu ...

  7. linux环境下完成jenkins的环境搭建

    环境搭建部署: 请完成jenkins的环境搭建,需安装tomcat,mysql. Jenkins 地址:  https://jenkins.io/download/ 步骤分析: 1.全部操作使用普通用 ...

  8. vue-cli3.0的记录

    页面打包的话,需要在根目录创建一个js文件 vue.confing.js 打包app的话,在dist里面只拿自己需要的静态文件

  9. Tkinter 之Scale滑块标签

    一.参数说明 语法 作用 Scale(window, label="滑块") 滑块标题 Scale(window, label="滑块", from_=0) 滑 ...

  10. rethinkDB python入门

    Start the server For a more detailed look, make sure to read the quickstart. $ rethinkdb Import the ...