首页
登录 | 注册

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

相关文章

  • java/golang开发面试中遇到的问题集锦--持续更新
       博主是2017届的应届生,主要掌握的语言是java,后面在实习的时候,自学了golang,期间也是做了一些小东西,实习结束后,开始投入到找工作的大流中,所以想把面试中遇到的各种问题记录起来方便学习,同时也希望能对其他找工作的同学有点帮 ...
  • 一 cocos2d-x editor工具下载和基础教程: 一 手游开发神器 cocos2d-x editor初识 二 手游开发神器 cocos2d-x editor工具下载和安装配置 三 手游开发神器 cocos2d-x editor 之基 ...
  • 1.Animation.CrossFace();这个方法播放动画会更流畅.2.遇到人物行走过程模型升高的问题可以模拟一个重力让Y一直--3.tranform.lookat()方法可以用transform.rotation=Quaternio ...
  • APP开发中的问题及解决方案(持续更新中)
    一,使自己创建的Activity无TitleBar:    情况:    当自己创建的Activity继承AppCompatActivity时,在setContentView方法之前调用    requestWindowFeature(Wi ...
  • Unity开发过程中遇到的部分问题记录(持续更新)
    Unity报错Invalid normalized color        编译时无错,打开界面时就报上面错误.这是因为Color构造方法里r,g,b,a的值取值范围是0到1.而Color32构造方法的取值范围是0到255. Unity报 ...
  • 这篇博客是我在持续的开发以及维护项目中遇到的坑,并总结出做法,以备需要立项新项目需要注意的点.1.字符串一定能提到语言包中就提到语言包,不要贪图方便写死在代码中或者写死在美术资源中    很多程序员喜欢贪图方便,在固定不变的字符串直接使用静 ...
  • 1.java.lang.NoClassDefFoundError: org/apache/commons/logging/LogFactory  打算使用slf4j替换spring默认日志出现此错误 解决办法:需要添加桥接入器,jcl-ov ...
  • 为什么选择快速开发?浅谈快速开发的优势
           现在这个时代是信息化的时代,大数据的时代.各种行业都在向在线管理等方向转型.这时一系列的问题就自然而然的出来了.信息化管理的公司.企业,如何来开发设计自己的管理系统?选择何种渠道来获取符合自己需求的管理系统?       在这 ...

2019 bnee小站 webmaster#bnee.net
12 q. 0.016 s.
湘ICP备19013596号-2