`
jjxliu306
  • 浏览: 158543 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

Openlayers扩展H5绘制10W+数据

    博客分类:
  • GIS
阅读更多

本文基于openlayers2现有api扩展html5的支持绘制10W+的四边形,当然样式简单死板,只为说明通过H5

可以为ol带来不菲的性能(默认自带vector图层中添加feature超过2K+数据后就会出现卡顿)

 

-- 2017-04-13 :GridLayer.Source天假bc属性为格子边框颜色,如果存在边框颜色则绘制边框

 

废话不多说直接上代码,

 

 

 

1、创建一个对象,标明每个待绘制元素的基本信息,目前主要包含左上和右下的经纬度还有待显示的颜色:

/**

 * Class: GridLayer.Source

创建一个数据源的类型,一个格子中需要包含左上右下的经纬度还有要显示的颜色

 */ 

 

GridLayer = {};

 

/**

 * Class: GridLayer.Source

 */

GridLayer.Source = OpenLayers.Class({

 

  /** 

   *  左上经纬度

   * {OpenLayers.LonLat} 左上经纬度

   */

  l: null,

 

  /**

   * 栅格右下角经纬度

   */

  r:null ,

  

  /**

   * 栅格显示颜色

   */

  c:null ,

  

  /**

   *  边框显示颜色

   */

  bc:null,

  

  initialize: function(leftLonLat, rightLonLat ,color,boderColor ) {

    this.l = leftLonLat;

    this.r = rightLonLat;

    this.c = color ;

    this.bc = boderColor;

  },

 

  CLASS_NAME: 'GridLayer.Source'

});

 

/**

 * Class: GridLayer.Layer

 *  栅格图层

 * Inherits from:

 *  - <OpenLayers.Layer>

 */

GridLayer.Layer = OpenLayers.Class(OpenLayers.Layer, {

 

 

 

  /** 

   * Property: 所有的格点信息

   * {Array(<GridLayer.Source>)} internal coordinate list

   */

  points: null,

 

  

  /** 

   * Property: H5画布

   * {DOMElement} Canvas element.

   */

  canvas: null,

 

 

  /**

   * Constructor: GridLayer.Layer

   * Create a GridLayer layer.

   *

   * Parameters:

   * name - {String} Name of the Layer

   * options - {Object} Hashtable of extra options to tag onto the layer

   */

  initialize: function(name, options) {

    OpenLayers.Layer.prototype.initialize.apply(this, arguments);

    this.points = [];

     

    this.canvas = document.createElement('canvas');

    this.canvas.style.position = 'absolute';

    

    // For some reason OpenLayers.Layer.setOpacity assumes there is

    // an additional div between the layer's div and its contents.

    var sub = document.createElement('div');

    sub.appendChild(this.canvas);

    this.div.appendChild(sub);

  },

 

   

 

  /**

   * APIMethod: addSource

   * 添加一个格子元素

   *

   * Parameters:

   * source - {<GridLayer.Source>} 

   */

  addSource: function(source) {

    this.points.push(source);

  },

  

  /**

   * 添加所有的数据源

   */

  putSource: function(sources) {

 this.points =  sources ;

  },

  

  clear:function() {

 

 this.points = [];

  },

 

  /**

   * 删除一个格子元素

   * Parameters:

   * source - {<GridLayer.Source>} 

   */

  removeSource: function(source) {

    if (this.points && this.points.length) {

      OpenLayers.Util.removeItem(this.points, source);

    }

  },

 

  /** 

   * Method: moveTo

   * 地图移动时候回重绘地图,主要方法

   * Parameters:

   * bounds - {<OpenLayers.Bounds>} 

   * zoomChanged - {Boolean} 

   * dragging - {Boolean} 

   */

  moveTo: function(bounds, zoomChanged, dragging) {

 

    OpenLayers.Layer.prototype.moveTo.apply(this, arguments);

 

    if (dragging)

      return;

 

    //偏移

    var someLoc = new OpenLayers.LonLat(0,0);

    var offsetX = this.map.getViewPortPxFromLonLat(someLoc).x -

                  this.map.getLayerPxFromLonLat(someLoc).x;

    var offsetY = this.map.getViewPortPxFromLonLat(someLoc).y -

                  this.map.getLayerPxFromLonLat(someLoc).y;

 

    var w = this.map.getSize().w;

    var h = this.map.getSize().h ;

    

    this.canvas.width = w;

    this.canvas.height = h;

 

    var ctx = this.canvas.getContext('2d');

 

    ctx.save(); // Workaround for a bug in Google Chrome

    ctx.fillStyle = 'transparent';

    ctx.fillRect(0, 0, w, h);

    ctx.restore();

     

    

    

    //得出当前画布的左上右下经纬度数据 对于超过这个界限的数据 当前画布忽略绘制

    var left = new OpenLayers. Pixel(0,0);

    var right = new OpenLayers. Pixel(w,h);

    

    var leftlonlat = this.map.getLonLatFromPixel(left);

    var rightlonlat = this.map.getLonLatFromPixel(right);

    

    for (var i in this.points) {

 

      var src = this.points[i];

      

      //判断数据是否已经超越当前canvas 如果超越 直接跳过

      if(src.r.lon < leftlonlat.lon || src.r.lat > leftlonlat.lat

     || src.l.lon > rightlonlat.lon || src.l < rightlonlat .lat) {

     

     continue;

      }

     

      //坐标

      var leftpos = this.map.getLayerPxFromLonLat(src.l);

      var rightpos = this.map.getLayerPxFromLonLat(src.r);

      

      if(leftpos == null || rightpos == null) continue ;

       

      var minlon = leftpos.x ;

      var maxlat = leftpos.y;

      

      var maxlon = rightpos.x;

      var minlat = rightpos.y;

      

     

      var x = maxlon - minlon  ;

      var y = minlat - maxlat   ;

      

      //颜色

      //判断是否为shuzi  

      ctx.fillStyle= src.c;

      ctx.fillRect(minlon + offsetX ,maxlat + offsetY,x ,y  );

      ctx.fillStyle = 'transparent';

      //判断是否有边框颜色,如果有则绘制边框

      if(src.bc) {

     //border

     ctx.strokeStyle = src.bc ;

     ctx.strokeRect(minlon + offsetX ,maxlat + offsetY,x ,y  );

          ctx.strokeStyle = 'transparent';

     

      }

     

    }

 

     var dat = ctx.getImageData(0, 0, this.canvas.width, this.canvas.height);

   

 

    ctx.putImageData(dat, 0, 0); 

 

    

    this.canvas.style.left = (-offsetX) + 'px';

    this.canvas.style.top = (-offsetY) + 'px';

  },

 

  /** 

   * 图层extent 

   * Returns:

   * {<OpenLayers.Bounds>}

   */

  getDataExtent: function () {

    var maxExtent = null;

        

    if (this.points && (this.points.length > 0)) {

      var maxExtent = new OpenLayers.Bounds();

      for(var i = 0, len = this.points.length; i < len; ++i) {

        var point = this.points[i];

        maxExtent.extend(point.l);

      }

    }

 

    return maxExtent;

  },

 

  CLASS_NAME: 'GridLayer.Layer'

 

});

 

3、  调用

调用的时候直接引用后提供带渲染的数据即可,例如:

 

var gridLayer = new GridLayer.Layer("grid");

        var index = 0 ;

//循环经度

        for(var i  = 120 ; i<121.1 ; i+=0.002) {

              

               var lon = i;

               //循环纬度

               for(var j = 30 ; j < 30.5 ; j+=0.002) {

                     

                      var lat = j ;

                     

                      var leftlonlat = new OpenLayers.LonLat(lon,lat);

                      //根据中心点偏移左上和右下

                      var rightlonlat = new OpenLayers.LonLat(lon + 0.001, lat -  0.001);

                      //坐标系

                      leftlonlat.transform(map.displayProjection, map.projection);

                      rightlonlat.transform(map.displayProjection, map.projection);

                     

                      //一个datasource

                      var grid = new GridLayer.Source(leftlonlat, rightlonlat , '#FF0000' );

                      gridLayer.addSource(grid);

                      index++;

               }

              

        }

        console.log('size : ' + index);

        //设置图层透明度

        gridLayer.setOpacity(0.5);

        //加入map

        map.addLayer(gridLayer);

4、  说明

实际使用中数据如果从后台查询过来的话可能加载不了这么大的数据量,另外实际业务中的应用一般比这个复杂,此次扩展主要针对应用简单的业务(和我们当前公司业务很类似,N多个经纬度直接打在地图上,按照规则渲染颜色)。

5、 实际效果如图:



 

  • 大小: 37.6 KB
0
0
分享到:
评论

相关推荐

    基于ssm的网络教学平台(有报告)。Javaee项目,ssm项目。

    重点:所有项目均附赠详尽的SQL文件,这一细节的处理,让我们的项目相比其他博主的作品,严谨性提升了不止一个量级!更重要的是,所有项目源码均经过我亲自的严格测试与验证,确保能够无障碍地正常运行。 1.项目适用场景:本项目特别适用于计算机领域的毕业设计课题、课程作业等场合。对于计算机科学与技术等相关专业的学生而言,这些项目无疑是一个绝佳的选择,既能满足学术要求,又能锻炼实际操作能力。 2.超值福利:所有定价为9.9元的项目,均包含完整的SQL文件。如需远程部署可随时联系我,我将竭诚为您提供满意的服务。在此,也想对一直以来支持我的朋友们表示由衷的感谢,你们的支持是我不断前行的动力! 3.求关注:如果觉得我的项目对你有帮助,请别忘了点个关注哦!你的支持对我意义重大,也是我持续分享优质资源的动力源泉。再次感谢大家的支持与厚爱! 4.资源详情:https://blog.csdn.net/2301_78888169/article/details/144929660 更多关于项目的详细信息与精彩内容,请访问我的CSDN博客!

    2024年AI代码平台及产品发展简报-V11.pdf

    2024年AI代码平台及产品发展简报-V11

    蓝桥杯JAVA代码.zip

    蓝桥杯算法学习冲刺(主要以题目为主)

    QPSK调制解调技术研究与FPGA实现:详细实验文档的探索与实践,基于FPGA实现的QPSK调制解调技术:实验文档详细解读与验证,QPSK调制解调 FPGA设计,有详细实验文档 ,QPSK调制解调;

    QPSK调制解调技术研究与FPGA实现:详细实验文档的探索与实践,基于FPGA实现的QPSK调制解调技术:实验文档详细解读与验证,QPSK调制解调 FPGA设计,有详细实验文档 ,QPSK调制解调; FPGA设计; 详细实验文档,基于QPSK调制的FPGA设计与实验文档

    PID、ADRC和MPC轨迹跟踪控制器在Matlab 2018与Carsim 8中的Simulink仿真研究,PID、ADRC与MPC轨迹跟踪控制器在Matlab 2018与Carsim 8中的仿真研

    PID、ADRC和MPC轨迹跟踪控制器在Matlab 2018与Carsim 8中的Simulink仿真研究,PID、ADRC与MPC轨迹跟踪控制器在Matlab 2018与Carsim 8中的仿真研究,PID, ADRC和MPC轨迹跟踪控制器Simulink仿真模型。 MPC用于跟踪轨迹 ADRC用于跟踪理想横摆角 PID用于跟踪轨迹 轨迹工况有双移线,避障轨迹,正弦轨迹多种 matlab版本为2018,carsim版本为8 ,PID; ADRC; MPC; 轨迹跟踪控制器; Simulink仿真模型; 双移线; 避障轨迹; 正弦轨迹; MATLAB 2018; CarSim 8,基于Simulink的PID、ADRC与MPC轨迹跟踪控制器仿真模型研究

    基于Springboot的个性化图书推荐系统。Javaee项目,springboot项目。

    重点:所有项目均附赠详尽的SQL文件,这一细节的处理,让我们的项目相比其他博主的作品,严谨性提升了不止一个量级!更重要的是,所有项目源码均经过我亲自的严格测试与验证,确保能够无障碍地正常运行。 1.项目适用场景:本项目特别适用于计算机领域的毕业设计课题、课程作业等场合。对于计算机科学与技术等相关专业的学生而言,这些项目无疑是一个绝佳的选择,既能满足学术要求,又能锻炼实际操作能力。 2.超值福利:所有定价为9.9元的项目,均包含完整的SQL文件。如需远程部署可随时联系我,我将竭诚为您提供满意的服务。在此,也想对一直以来支持我的朋友们表示由衷的感谢,你们的支持是我不断前行的动力! 3.求关注:如果觉得我的项目对你有帮助,请别忘了点个关注哦!你的支持对我意义重大,也是我持续分享优质资源的动力源泉。再次感谢大家的支持与厚爱! 4.资源详情:https://blog.csdn.net/2301_78888169/article/details/144486173 更多关于项目的详细信息与精彩内容,请访问我的CSDN博客!

    Matlab实现Transformer-Adaboost时间序列预测的详细项目实例(含完整的程序,GUI设计和代码详解)

    内容概要:本文档详细介绍了一个利用Matlab实现Transformer-Adaboost结合的时间序列预测项目实例。项目涵盖Transformer架构的时间序列特征提取与建模,Adaboost集成方法用于增强预测性能,以及详细的模型设计思路、训练、评估过程和最终的GUI可视化。整个项目强调数据预处理、窗口化操作、模型训练及其优化(包括正则化、早停等手段)、模型融合策略和技术部署,如GPU加速等,并展示了通过多个评估指标衡量预测效果。此外,还提出了未来的改进建议和发展方向,涵盖了多层次集成学习、智能决策支持、自动化超参数调整等多个方面。最后部分阐述了在金融预测、销售数据预测等领域中的广泛应用可能性。 适合人群:具有一定编程经验的研发人员,尤其对时间序列预测感兴趣的研究者和技术从业者。 使用场景及目标:该项目适用于需要进行高质量时间序列预测的企业或机构,比如金融机构、能源供应商和服务商、电子商务公司。目标包括但不限于金融市场的波动性预测、电力负荷预估和库存管理。该系统可以部署到各类平台,如Linux服务器集群或云计算环境,为用户提供实时准确的预测服务,并支持扩展以满足更高频率的数据吞吐量需求。 其他说明:此文档不仅包含了丰富的理论分析,还有大量实用的操作指南,从项目构思到具体的代码片段都有详细记录,使用户能够轻松复制并改进这一时间序列预测方案。文中提供的完整代码和详细的注释有助于加速学习进程,并激发更多创新想法。

    液滴穿越障碍:从文献到案例的复现研究,液滴破裂与障碍物穿越:文献复现案例研究,液滴生成并通过障碍物破裂 该案例是文献复现,文献与案例一起 ,液滴生成; 障碍物破裂; 文献复现; 案例研究,液滴破

    液滴穿越障碍:从文献到案例的复现研究,液滴破裂与障碍物穿越:文献复现案例研究,液滴生成并通过障碍物破裂。 该案例是文献复现,文献与案例一起。 ,液滴生成; 障碍物破裂; 文献复现; 案例研究,液滴破裂:障碍挑战的文献复现案例

    蓝桥杯练习题_2.zip

    蓝桥杯算法学习冲刺(主要以题目为主)

    蓝桥杯笔记,用于个人学习进步.zip

    蓝桥杯算法学习冲刺(主要以题目为主)

    基于最小递归二乘法的MPC自适应轨迹跟踪控制优化 针对轮胎刚度时变特性提升模型精度与鲁棒性,仿真验证满足车辆低速高精度跟踪与高速稳定性提升 ,基于变预测时域MPC自适应轨迹跟踪控制与轮胎侧偏刚度优化提

    基于最小递归二乘法的MPC自适应轨迹跟踪控制优化 针对轮胎刚度时变特性提升模型精度与鲁棒性,仿真验证满足车辆低速高精度跟踪与高速稳定性提升。,基于变预测时域MPC自适应轨迹跟踪控制与轮胎侧偏刚度优化提升模型精度和鲁棒性,基于变预测时域的MPC自适应轨迹跟踪控制,针对轮胎刚度时变的特点造成控制模型精度降低,基于最小递归二乘法(RLS)估算的轮胎侧偏刚度,提升了模型的控制精度和鲁棒性,通过carsim与simulink联合仿真结果发现,改进后的轨迹跟踪控制器既满足了车辆低速行驶下的轨 迹跟踪精度,也一定程度上克服了高速下车辆容易失去稳定性的问题。 有详细的lunwen分析说明和资料,以及本人的,仿真包运行。 ,基于变预测时域的MPC; 自适应轨迹跟踪控制; 轮胎刚度时变; 控制模型精度降低; 最小递归二乘法(RLS)估算; 模型控制精度和鲁棒性提升; carsim与simulink联合仿真; 轨迹跟踪控制器; 车辆稳定性。,基于变预测时域MPC的轮胎刚度自适应轨迹跟踪控制策略研究

    GMSK调制解调技术研究:基于FPGA设计与实验详解,GMSK调制解调技术详解:基于FPGA设计的实验文档与实践应用,GMSK调制解调 FPGA设计,有详细实验文档 ,GMSK调制解调; FPGA设计

    GMSK调制解调技术研究:基于FPGA设计与实验详解,GMSK调制解调技术详解:基于FPGA设计的实验文档与实践应用,GMSK调制解调 FPGA设计,有详细实验文档 ,GMSK调制解调; FPGA设计; 详细实验文档; 实验结果分析,GMSK调制解调技术:FPGA设计与实验详解

    (源码)基于Arduino和Python的Cansat卫星系统.zip

    # 基于Arduino和Python的Cansat卫星系统 ## 项目简介 本项目是一个Cansat卫星系统,旨在设计和实现一个小型卫星模型,通过火箭发射至1公里高空,并使用地面站接收其传输的数据。项目涉及Arduino编程、Python数据处理和可视化。 ## 主要特性和功能 1. 硬件组件 使用Arduino Nano作为Cansat的微控制器。 搭载BMP 280温度和压力传感器、ATGM336H GPS模块、LoRa通信模块等。 地面站使用Arduino Uno和LoRa通信模块接收数据。 2. 数据处理 使用Python进行数据处理和可视化,包括数据清洗、计算风速、绘制温度、压力、风速和海拔随时间变化的图表等。 3. 通信与控制 通过LoRa模块实现Cansat与地面站之间的数据传输。 提供实时监视和记录数据的脚本。 ## 安装和使用步骤 ### 1. 硬件准备

    LongSung-USB-Drivers-V2.0-for-Windows

    U9300C 龙尚4G模块安装后模块才能正常使用,win7 win10驱动程序,支持USB转接板。

    (源码)基于Arduino平台的物联网温湿度监控系统.zip

    # 基于Arduino平台的物联网温湿度监控系统 ## 项目简介 这是一个基于Arduino平台的物联网温湿度监控项目,旨在通过简单的硬件设备实现环境数据的实时监测与远程管理。该项目适用于智能家居、农业种植等领域。 ## 项目的主要特性和功能 1. 温湿度数据采集通过Arduino板连接温湿度传感器,实时采集环境数据。 2. 数据传输将采集到的数据通过无线网络模块发送到服务器或远程终端。 3. 数据可视化可在电脑或移动设备端展示实时的温湿度数据。 4. 报警功能当温湿度数据超过预设阈值时,自动触发报警通知。 ## 安装使用步骤 前提假设用户已经下载了本项目的源码文件。以下是简单明了的安装使用步骤 1. 环境准备安装Arduino开发环境,配置必要的硬件接口。 2. 硬件连接将Arduino板与温湿度传感器、无线网络模块连接。 3. 代码上传将本项目提供的Arduino代码上传至Arduino板。

    基于需求响应与清洁能源接入的配电网重构优化:综合成本与混合整数凸规划模型分析(matlab实现),基于需求响应与清洁能源接入的配电网重构算法研究:网损与成本优化的仿真分析,高比例清洁能源接入下计及需求

    基于需求响应与清洁能源接入的配电网重构优化:综合成本与混合整数凸规划模型分析(matlab实现),基于需求响应与清洁能源接入的配电网重构算法研究:网损与成本优化的仿真分析,高比例清洁能源接入下计及需求响应的配电网重构(matlab代码) 该程序复现《高比例清洁能源接入下计及需求响应的配电网重构》,以考虑网损成本、弃风弃光成本和开关操作惩罚成本的综合成本最小为目标,针对配电网重构模型的非凸性,引入中间变量并对其进行二阶锥松弛,构建混合整数凸规划模型,采用改进的 IEEE33 节点配电网进行算例仿真,分析了需求响应措施和清洁能源渗透率对配电网重构结果的影响。 该程序复现效果和出图较好(详见程序结果部分),注释清楚,方便学习 ,高比例清洁能源; 需求响应; 配电网重构; 二阶锥松弛; 综合成本最小化; MATLAB代码; IEEE33节点配电网; 复现效果; 出图; 注释清楚。,Matlab代码复现:高比例清洁能源接入下的配电网重构模型与需求响应分析

    (源码)基于C++的RapidJSON库测试项目.zip

    # 基于C++的RapidJSON库测试项目 ## 项目简介 本项目是一个基于C++的RapidJSON库测试项目,主要用于测试RapidJSON库的功能正确性、性能以及稳定性。RapidJSON是一个高效的C++ JSON解析生成库,广泛应用于各种场景。本项目通过编写一系列的单元测试,覆盖了RapidJSON库的主要功能点,包括JSON解析、生成、内存管理、编码转换等,以确保RapidJSON库在各种情况下都能正确、稳定地工作。 ## 项目的主要特性和功能 1. 单元测试框架使用Google Test测试框架进行单元测试,确保测试的可靠性和可扩展性。 2. 全面测试覆盖覆盖了RapidJSON库的主要功能点,包括JSON解析、生成、内存管理、编码转换等,以及针对各种输入数据的测试。 3. 性能测试通过性能基准测试,评估RapidJSON库在处理不同规模和类型的JSON数据时的性能表现。

    蓝桥杯单片机十一届试题.zip

    蓝桥杯算法学习冲刺(主要以题目为主)

    vmware虚拟机安装教程.docx

    内容概要:本文详细介绍如何安装和初步使用 VMware 虚拟机,从下载安装 VMware 到创建和配置新的虚拟机。主要内容包括:软件选择和安装步骤、虚拟机的新建配置、操作系统安装及初始化设置、安装 VMware Tools 提升性能以及一些常用的 VMWare 功能,如虚拟网络的不同连接方式及其应用场景。同时介绍了 VMware 软件在网络连接管理和服务配置方面的一些要点,确保虚拟机正常运行。 适用人群:计算机操作较为熟练、有意搭建不同操作系统测试环境的技术人员,以及想要了解虚拟机基本概念及应用的学生。 使用场景及目标:适合于个人用户进行系统兼容性和安全性的验证;适用于企业或开发者做软件测试、模拟复杂环境下作业,确保不影响宿主机正常工作的前提下完成多种任务;适用于教学培训环境中部署实验平台。此外,还可以用来隔离特定业务流程(比如银行工具)、探索不同类型操作系统的特点。 其他说明:需要注意的是,为了避免安装过程中出现问题,建议暂时关闭杀毒软件和防火墙。安装 VMware 需要接受许可协议,同时可以选择安装路径和安装类型(典型/自定义)。最后,对于网络设置,默认提供的三种模式——桥接模式、仅主机模式和 NAT 模式,可以帮助用户根据不同需求灵活调整网络连接方式。

    java毕业设计之网上校友录设计源码.zip

    java毕业设计源码

Global site tag (gtag.js) - Google Analytics