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

　　想实现的功能是数据库检索坐标集合，然后根据分组提取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. KMP模板，注释

    #include<bits/stdc++.h> using namespace std; queue<int> KMP(string a,string b){//a是主串,b是 ...

  2. PHP怎么实现字符串转义和还原？

    首先大家可以简单了解下什么是转义字符?有什么用? 转义字符是一种特殊的字符常量.转义字符以反斜线"\"开头,后跟一个或几个字符.转义字符具有特定的含义,不同于字符原有的意义,故称“ ...

  3. sql server update....set.... from ....where....

    工作中遇到的  update 的更新方法 以前update 表 set 列 = 新值     稍稍进阶    update 表 set 列 = (select  值 from 表 where ...) ...

  4. LOJ P10163 Amount of Degrees 题解

    每日一题 day6 打卡 Analysis 题目的意思是找在区间[x,y]之间满足能够由k个b的不同次幂相加得到的数的总数.这题的关键是转换进制,之前几道题我们保存的是数的每位数,其实也就是10进制, ...

  5. openssl使用以及C#加密和数字签名

    如何使用openssl生成RSA公钥和私钥对 http://blog.csdn.net/scape1989/article/details/18959657 https://www.openssl ...

  6. GridView修改含有DropDownList控件列的宽度

    GridView进入Edit模式,编辑列动态绑定DropDown List方便客户选择,但当里面的Item过长,不免令界面不美观 正确做法: <asp:TemplateField HeaderT ...

  7. 将Eclipse,MyEclipse等编辑器的项目管理框颜色改为护眼豆沙绿的方法

    转载链接:https://blog.csdn.net/caibaoH/article/details/77005977

  8. bzoj 3498

    统计三元环 很多代码在bzoj都T诶 #include <iostream> #include <cstdio> #include <algorithm> #inc ...

  9. PHP全栈学习笔记32

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

  10. Beyond compare4密钥

    w4G-in5u3SH75RoB3VZIX8htiZgw4ELilwvPcHAIQWfwfXv5n0IHDp5hv1BM3+H1XygMtiE0-JBgacjE9tz33sIh542EmsGs1yg6 ...