首页
登录 | 注册

OpenLayer3.x与4.x开发总结(持续更新)

最近来实习的地方,然后具体是好是坏也不知道,和自己想象的不一样,不知道是去是留,关于GIS开发的问题感觉不再是多大难度的问题,自己也也可以快速对api适应。平时遇到一些OL3的琐碎知识点进行整理。

一、关于加载天地图的函数封装

代码封装:

            function getTdtLayer(lyr) {
                var url = "http://t{0-7}.tianditu.com/DataServer?T=" + lyr + "&tk='你申请的tk值'&X={x}&Y={y}&L={z}";
                var layer = new ol.layer.Tile({
                    source: new ol.source.XYZ({
                        url: url
                    })
                });
                return layer;
            }

调用示例:

            var vec_c = getTdtLayer("vec_w");
            var cva_c = getTdtLayer("cva_w");

参数说明:

二、关于GeoJson数据的读取

代码示例:

			$.get("data/province.geojson",null,function(result){
				var features = (new ol.format.GeoJSON()).readFeatures(result);
				var vectorSource = new ol.source.Vector();
				vectorSource.addFeatures(features);

三、关于坐标系的介绍

1、'EPSG:4326'-经纬度坐标-WGS84
2、'EPSG:3857'- xy坐标-web墨卡托

3、ol3默认的坐标系为3857,即在创建ol.map的时候,若不指定projection,则默认为EPSG:3857

4、代码示例:

var m_center=[116.35,39.9];//地图中心点-经纬度坐标
//经纬度转至xy
m_center = ol.proj.transform(m_center,'EPSG:4326', 'EPSG:3857' );
 
//反过来
var m_center=[12914838.35,4814529.9];//地图中心点-xy坐标
//经纬度转至经纬度
m_center = ol.proj.transform(m_center, 'EPSG:3857' ,'EPSG:4326');

四、关于ol.Extend的代码表达式的含义

ol.Extent的表达式 [minx, miny, maxx, maxy].

五、forEachFeatureAtPixel方法

该方法主要和一些事件一块用,例如Click,SingleClick等,有回调函数,回调函数有两个参数feature,layer,这里面有个hitTolerance(容差)参数,可以根据不同的值获取一定像素范围的feature.

使用案例需求:鼠标悬浮到Vector改变鼠标样式

代码示例:

      map.on('pointermove', function(evt) {
        if (evt.dragging) {
          return;
        }
        var pixel = map.getEventPixel(evt.originalEvent);
        var hit = map.forEachFeatureAtPixel(pixel, function() {
          return true;
        });
        map.getTargetElement().style.cursor = hit ? 'pointer' : '';
      })
forEachLayerAtPixel同样效果
      map.on('pointermove', function(evt) {
        if (evt.dragging) {
          return;
        }
        var pixel = map.getEventPixel(evt.originalEvent);
        var hit = map.forEachLayerAtPixel(pixel, function() {
          return true;
        });
        map.getTargetElement().style.cursor = hit ? 'pointer' : '';
      });

getFeaturesAtPixel也可以做到这样的效果,其实用getFeaturesAtPixel我觉得更好点

容差参数示例:

      map.on('singleclick', function(e) {
        var hit = false;
        map.forEachFeatureAtPixel(e.pixel, function() {
          hit = true;
        }, {
          hitTolerance: hitTolerance
        });
        if (hit) {
          style.getStroke().setColor('green');
          statusElement.innerHTML = ' A feature got hit!';
        } else {
          style.getStroke().setColor('black');
          statusElement.innerHTML = ' No feature got hit.';
        }
        feature.changed();
      });

六、关于判断一个是否位于一个矩形、圆形、直线上解决方法

ol.geom.Geometry类,该类是一一些,点,线,圆的=基类,该类中有一个intersectsCoordinate方法,判断是否与几何图形相交或者是否位于那个图形范围之内。

七、关于在控件的添加

1、代码示例:

    controls: ol.control.defaults().extend([
        new ol.control.FullScreen()
      ]),

至于为什么这么添加的原因,默认的有一些控件,我们是在默认控件基础上进行添加,不是要覆盖原来的控件。

八、OL4.x和OL3.X改变鼠标样式

代码示例:

map.getTargetElement().style.cursor='pointer';

九、修改对象的封装

//定义修改几何图形功能控件
        var Modify = {
            init: function () {
                //初始化一个交互选择控件,并添加到地图容器中
                this.select = new ol.interaction.Select();
                map.addInteraction(this.select);
                //初始化一个交互编辑控件,并添加到地图容器中
                this.modify = new ol.interaction.Modify({
                    features: this.select.getFeatures()//选中的要素
                });
                map.addInteraction(this.modify);
                //设置几何图形变更的处理
                this.setEvents();
            },
            setEvents: function () {
                var selectedFeatures = this.select.getFeatures(); //选中的要素
                //添加选中要素变更事件
                this.select.on('change:active', function () {
                    selectedFeatures.forEach(selectedFeatures.remove, selectedFeatures);
                });
            },
            setActive: function (active) {
                this.select.setActive(active);//激活选择要素控件
                this.modify.setActive(active);//激活修改要素控件
            }
        };
        Modify.init(); //初始化几何图形修改控件
        Modify.setActive(true); //激活几何图形修改控件;

十、ol实现在线编辑的一个思路

1、geoserver+postgis以wfs服务中Transaction(编辑要素)来进行在线编辑。

2、postgis 通过ajax方式进行异步提交数据到数据库采用draw控件或者modify控件修改geometry将gemetry借助ol.format.WKT的writeGeometry(geometry, opt_options)方法转换成WKT,最后提交到数据库。

十一、地图打印

js文件引入:

    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>

HTML代码:

<input id="bPrint" type="button" value="打印" />

js代码:

        //地图打印
        $("#bPrint").click(function () {
            map.once('postcompose', function (event) {
                var canvas = event.context.canvas;
                if (navigator.msSaveBlob) {
                    navigator.msSaveBlob(canvas.msToBlob(), 'map.png');
                } else {
                    canvas.toBlob(function (blob) {
                        saveAs(blob, 'map.png');
                    });
                }
            });
            map.renderSync();
        });

十二、新手平时易踩的坑

作为map容器,有几个参数必须设置,

  1. target
  2. layers
  3. view

在View中必须设置zoom,projection不设置默认EPSG:3857,还有div需要设置width和height

十三、

 

本文网址:http://www.bnee.net/article/1852189.html

相关文章

  • 技术概念:敏捷开发、持续集成、持续交付和DevOps的定义及关系梳理
    一.敏捷开发.持续集成.持续交付和DevOps的定义 敏捷开发(Agile Development) Agile software development describes a set of principles for software ...
  • 敏捷开发的道与术---MPD软件工作坊培训感想(上)
    注:由麦思博(MSUP)主办的2013年亚太软件研发团队管理峰会(以下简称MPD大会)分别于6月15及6月22日在北京.上海举办,葡萄城的部分程序员参加了上海的会议,本文是参会的一些感受和心得.这次MPD软件工作坊培训,最大的收获就是培训者 ...
  • 影响持续集成的几种常见的反模式
    http://www.ibm.com/developerworks/cn/java/j-ap11297/ 在我的职业生涯中经常发现,通过了解在特定情况下 不应该做什么,可以学到更多知识.例如,在我职业生涯的早期,由于需要快速发布软件,我省略 ...
  •  这是敏捷开发一千零一问系列的第四篇. 有一次课程上居然来了一个非开发人员,他是个网站的业务人员,提出了这个问题,并被评为课堂最佳问题之一. 问题 一线业务部门应该怎样具体参与到敏捷开发中来? 答案 方案1: 敏捷开发中有很多活动是需要业务 ...
  • <SRPG游戏开发>导航更新历史记录(History)目录(Menu)前言第一章 FE4部分技术简述第二章 创建项目第三章 绘制地图(Tile Map)一 导入素材二 绘制一张简单地图三 创建自己的SrpgTile四 初步完善地 ...
  • 背景 书主要以分布式服务框架为主题,介绍分布式服务涉及到的知识,包括主流的框架,概念,技术点,流程.全书纲领式介绍,不深入.适合初级学习分布式服务的入门者.丰富分布式服务的见识,初步把握分布式服务脉络.不管怎么样都要感谢作者的分享.内容架构 ...
  • 目前大家都在说微服务,其实微服务不是一个名字,是一个架构的概念,大家现在使用的基于RPC框架(dubbo.thrift等)架构其实也能算作一种微服务架构. 目前越来越多的公司开始使用微服务架构,所以在目前招聘java岗位时,有springc ...
  • 应用架构的演进历史 MVC、 RPC、SOA 和 微服务架构
    本文摘自 李林峰著的<分布式服务框架原理与实践> MVC (Modle View Controller) 架构: 当业务规模很小时,将所有功能都部署在同一个进程中,通过双机或者前置负载均衡器实现负载分流:此时,用于分离前后台逻辑 ...