openlayer设置地图显示范围(4326坐标系)

**

因为创建地图是3857坐标系的地图,以下要对其坐标进行转换

**
1.获取地图绘制的范围的开始坐标以及结束坐标(采用openlayer拉框互动获取坐标)

            _draw: function () {
                var self = this;
                var map = self.app.map;
                document.querySelector("#map").style.cursor = "crosshair";
                self.DragBox = new ol.interaction.DragBox();
                map.addInteraction(self.DragBox);
                var frist = null;
                self.DragBox.setActive(true);//开启拉框 
                self.DragBox.on('boxstart', function (evt) {//获取开始点击的事件
                    var coordinate = evt.coordinate;//左上坐标
                    frist = coordinate;
                })
                self.DragBox.on('boxend', function (evt) {//获取释放点击的事件
                    var coordinate = evt.coordinate;//右下坐标
                    var DragExtent = self.config.initialExtent;
                    DragExtent.xmin = frist[0];
                    DragExtent.ymin = coordinate[1];
                    DragExtent.xmax = coordinate[0];
                    DragExtent.ymax = frist[1];
                    //更新范围
                    self.writerExtent();
                })
            }

2.求出绘制范围中心点坐标

		 //xmax:绘制范围开始的经度
		 //ymax:绘制范围开始的纬度
		 //xmin:绘制范围结束的经度
		 //ymin:绘制范围结束的纬度
         setExtentByExtent: function (extent) {
             var self = this;
             if (!extent) { return; }
             var min = ol.proj.transform([extent.xmin, extent.ymin], 'EPSG:3857', 'EPSG:4326');
             var max = ol.proj.transform([extent.xmax, extent.ymax], 'EPSG:3857', 'EPSG:4326');
             var center = [(min[0] + max[0]) / 2, (min[1] + max[1]) / 2];
             return ol.proj.transform(center, 'EPSG:4326', 'EPSG:3857');;
         }

3.通过绘制范围坐标计算出地图的缩放级别

		 //maxJ:绘制范围开始的经度
		 //maxW:绘制范围开始的纬度
		 //minJ:绘制范围结束的经度
		 //minW:绘制范围结束的纬度
         getExtentByZoom: function (maxJ, minJ, maxW, minW) {
             var min = ol.proj.transform([maxJ, maxW], 'EPSG:3857', 'EPSG:4326');
             var max = ol.proj.transform([minJ, minW], 'EPSG:3857', 'EPSG:4326');
             maxJ = min[0];
             minJ = max[0];
             maxW = min[1];
             minW = max[1];
             if (maxJ == minJ && maxW == minW) return 13;
             var diff = maxJ - minJ;
             if (diff < (maxW - minW) * 2.1) diff = (maxW - minW) * 2.1;
             diff = parseInt(10000 * diff) / 10000;

             var zoomArr = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13);
             var diffArr = new Array(180, 90, 45, 22, 11, 5.5, 2.75, 1.37, 0.68, 0.34, 0.17, 0.08, 0.04);

             for (var i = 0; i < diffArr.length; i++) {
                 if ((diff - diffArr[i]) >= 0) {
                     return zoomArr[i];
                 }
             }
             return 14;
         }

求出中心点后和缩放级
地图初始化设置上Center(中心点)和Zoom(缩放级别)

你可能感兴趣的:(openlayer)