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

十三、