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

　　想实现的功能是数据库检索坐标集合，然后根据分组提取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. 41、扩展原理-ApplicationListener用法

    41.扩展原理-ApplicationListener用法 ApplicationListener 监听容器中发布的事件.事件驱动模型开发: public interface ApplicationL ...

  2. 棋盘n皇后问题-递归

    题目:在n*n的棋盘上,放n个皇后,互不攻击(不可在同行/列/对角线) 分析:将棋盘抽象成一个一维数组[0,1,2......,n*n-1],x=~~(i/n)取整,y=i%n;         de ...

  3. Unity的资源加载以及AssetBundle的一些坑

    https://www.cnblogs.com/sigmadruid/p/4040803.html AssetBundle加载完毕,进行其中Asset的初始化后,不能立即Unload().否则Asse ...

  4. PHP全栈学习笔记32

    <?php $i = 0; do { echo $i; } while ($i > 0); ?> for (表达示1; 表达示2; 表达示3){ 需要执行的代码段 } <?ph ...

  5. 二分算法题目训练(二)——Exams详解

    CodeForces732D——Exams 详解 Exam 题目描述(google翻译) Vasiliy的考试期限将持续n天.他必须通过m门科目的考试.受试者编号为1至m. 大约每天我们都知道当天可以 ...

  6. mac 登陆phpmyadmin 提示 mysqli_real_connect(): (HY000/2002): No such file or directory

    我们将下载的phpmyadmin 放在apache目录中,进入phpmyadmin目录, 首先将这个目录中的配置文件改名 sudo mv config.sample.inc.php config.in ...

  7. C++ 结构体指针的定义

    struct node { …… } ; struct node *p1, *p2 ; typedef struct node { …… }Node; typedef Node* pNode; typ ...

  8. python smbus IOError: [Errno 2] No such file or directory

    1.打开配置文件 sudo nano /boot/config.txt 打开以下选项 "dtparam=i2c_arm=on" ctrl + o 保存 ctrl + x 退出 2. ...

  9. redis缓存击穿问题一种思路分享

    思路每一个key都有一个附属key1,附属key1可以是key加特定前缀组成,key对应value为真正的缓存数据,附属key1对应的value不重要,可以是随便一个值,附属key1的作用主要是维护缓 ...

  10. JAVA基础知识|Executors提供的四种线程池

    一.Thread与Executors 开启新的线程,我们经常会采用如下方法: Thread thread =new Thread(new Runnable() { @Override public v ...