**
因为创建地图是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(缩放级别)