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

　　想实现的功能是数据库检索坐标集合，然后根据分组提取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. selenium之python源码解读-webdriver继承关系

    一.webdriver继承关系 在selenium中,无论是常用的Firefox Driver 还是Chrome Driver和Ie Drive,他们都继承至selenium\webdriver\re ...

  2. 定时器 间隔调用setInterval

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 15组-Legendary-团队项目总结

    一.项目名称:教室选座系统 二.项目进度表: 项目进度表 活动名称 所属阶段 计划开始时间 计划结束时间 实际结束时间 完成情况 项目方向 项目确立阶段 2019.11.14 2019.11.15 2 ...

  4. [Javascript] Construct a Regex to Match Twitter Mentions with Regexr

    regexr is a powerful tool for debugging existing regexes and creating new ones. In this lesson, we'l ...

  5. SIGAI机器学习第三集 数学知识-2

    讲授机器学习相关的高等数学.线性代数.概率论知识 大纲: 最优化中的基本概念梯度下降法牛顿法坐标下降法数值优化算法面临的问题拉格朗日乘数法凸优化问题凸集凸函数凸优化拉格朗日对偶KKT条件 最优化中的基 ...

  6. pstmt.getGeneratedKeys()更换jar包后报错

    改成: pstmt=conn.prepareStatement(sql,Statement.RETURN_GENERATED_KEYS); rs=pstmt.getGeneratedKeys(); 即 ...

  7. leetcode解题报告（19）：Contains Duplicate II

    描述 Given an array of integers and an integer k, find out whether there are two distinct indices i an ...

  8. 07_Kibana界面操作ES

    Kibana界面的API操作ES 1.创建索引 1.1 指定分片数量和备份数量 1.2 创建默认 2. 查看索引 2.1 查看单个索引设置 2.2 查看所有索引设置 3.文档管理 3.1 添加文档 3 ...

  9. Django系列（四）：多表操作

    1.创建模型 例:我们来假定下面这些概念,字段和关系 作者模型:一个作者有姓名和年龄. 作者详细模型:把作者的详情放到详情表,包含生日,手机号,家庭住址等信息.作者详情模型和作者模型之间是一对一(on ...

  10. maven下载与安装

    1.下载地址:http://maven.apache.org/download.cgi(Windows平台下载*.zip压缩包,Linux平台下载*.gz压缩包) 2.解压到E:\JAVA\Maven ...