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

　　想实现的功能是数据库检索坐标集合，然后根据分组提取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. 使用Spring PropertyPlaceholderConfigurer 配置中文出现乱码的解决方法

    在使用org.springframework.beans.factory.config.PropertyPlaceholderConfigurer 读取配置文件时,发现对于中文的处理会出现乱码现象,比 ...

  2. P2891 [USACO07OPEN]吃饭Dining

    漂亮小姐姐点击就送:https://www.luogu.org/problemnew/show/P2891 题目描述 Cows are such finicky eaters. Each cow ha ...

  3. linux系列（二）：cd命令

    1.命令格式: cd [目录名] 2.命令功能: 切换当前目录至目录名目录 3.常用实例 (1).进入系统根目录 命令: cd / 输出: felix@felix-computer:~/软件$ cd ...

  4. JavaScript 判断是否为空

    // var a = ""; // var a = " "; // var a = null; // var a = undefined; // var a = ...

  5. Asp.Net.Mvc+MEF+EF 项目 ,源码在GitHub ..希望对大家有所帮助

    自己开源的 一个 Asp.Net + MEF+ EF 的 项目 . 供大家学习和使用, 点击进入GitHub

  6. mysql my.cnf文件

    一.mysqld组值设置: 1.user = mysql #启动mysql的用户.2.pid-file = /var/run/mysqld/mysqld.pid #指定pid文件.3.socket = ...

  7. 爬虫界的福利--touchRobot，机器模拟触碰滑动库（已开源）

    此插件能干什么? 一句话概括:通过程序主动触发移动端滑动.拖拽.触碰等操作 插件有什么用呢? 可以用于爬虫,也可以用于自动化测试以及程序演示 插件演示地址 (从网上扒了一个canvas绘图的demo, ...

  8. java一周学习回顾

    快速阅读 ​ 本周在学习java过程中主要是快马观花,对java的常用框架进行相关配置 ,进行简单的调用 .包括kafka,dubbo ,zookeeper.centos配置java环境.如何打war ...

  9. 2018-2019-2 20165234 《网络对抗技术》 Exp6 信息搜集与漏洞扫描

    Exp6 信息搜集与漏洞扫描 实验内容 1. 各种搜索技巧的应用 2. DNS IP注册信息的查询 3. 基本的扫描技术:主机发现.端口扫描.OS及服务版本探测.具体服务的查点(以自己主机为目标) 4 ...

  10. oracle之nvl,nvl2,decode

    oracle sql常用查询nvl,nvl2,decode区别及使用方法 1,NVL( E1, E2) 如果E1为NULL,则NVL函数返回E2的值,否则返回E1的值,如果两个参数都为NULL ,则返 ...