openlayer 框架

最新推荐文章于 2024-07-18 15:48:23 发布

wodomXQ

最新推荐文章于 2024-07-18 15:48:23 发布

阅读量407

点赞数 9

文章标签： dubbo 前端 javascript

本文链接：https://blog.csdn.net/qq_26887683/article/details/140514477

版权

openlayer 框架

工具

高德坐标选取

基础概念

GeoJSON

坐标系

GIS地理信息系统的坐标系统:

·WGS-84：GPS坐标系，是国际标准，GPS坐标（Google Earth使用、或者GPS模块）
·GCJ-02：火星坐标系，国测局02年发布的坐标体系，中国坐标偏移标准，Google Map、高德、腾讯使用
·BD-09：百度坐标系，百度自研，百度地图使用。

projection：投影

·投影：地球大家都知道不是正圆形的球体，他是一个不规则的椭圆体，所以如果我们把把展开在桌面上，发现地图都会和实际有出入。所以人们发明了各种各样的方式来缩小失真的程度，这种方式就是投影
·projection为source、view提供投影选项
·EPSG：
– 什么是EPSG：

 WGS84是目前最流行的地理坐标系统。在国际上，每个坐标系统都会被分配一个EPSG代码，EPSG:4326就是WGS84的代码。GPS是基于WGS84的，所以通常我们得到的坐标数据都是WGS84的。一般我们在存储数据时，仍然按WGS84存储。

– 常见的EPSG：

 -- EPSG:4326 (WGS84)：一种国际上采用的地心坐标系。坐标原点为地球质心。GPS是基于WGS84的，所以通常我们得到的坐标数据都是WGS84的。

 -- EPSG:3857 (Pseudo-Mercator)：伪墨卡托投影，也被称为球体墨卡托，Web Mercator。它是基于墨卡托投影的，把 WGS84坐标系投影到正方形。我们前面已经知道WGS84是基于椭球体的，但是伪墨卡托投影把坐标投影到球体上，这导致两极的失真变大，但是却更容易计算。这也许是为什么被称为”伪“墨卡托吧。另外，伪墨卡托投影还切掉了南北85.051129°纬度以上的地区，以保证整个投影是正方形的。因为墨卡托投影等正形性的特点，在不同层级的图层上物体的形状保持不变，一个正方形可以不断被划分为更多更小的正方形以显示更清晰的细节。很明显，伪墨卡托坐标系是非常显示数据，但是不适合存储数据的，通常我们使用WGS84存储数据，使用伪墨卡托显示数据。

 -- EPSG:900931：在地图上用单位“米”当作坐标的X/Y对待

·实例化：var projection=new OpenLayers.Projection(‘EPSG:4326’,{})
·方法：
– getCode：获取投影code
– getUnits：获取投影的单位，度or 米，这取决于我们使用的投影
– addTransform（from,to,method）：坐标系转换
– transform(point,source,destination)：坐标系转换
·坐标转换
– 使用ol的transform方法：
```
  //创建两个投影对象
```

  var proj_4326 = new OpenLayers.Projection('EPSG:4326');

  var proj_900913 = new OpenLayers.Projection('EPSG:900913');

```
  //再创建一个点
```

  var Point_to_transform=new OpenLayers.LonLat(-79,42);

```
  //开始转换
```

  Point_to_transform.transform(proj_4326,proj_900913);

```
  //打印结果
```
```
  console.log(point_to_transform);
```
– 使用地理坐标转换工具：gcsTransUtil.js

分辨率：

·分辨率的简单定义是屏幕上的1像素表示的现实世界的地面实际距离：
以Google在线地图为例，层级0使用了一个瓦片，层级1使用了4个瓦片。通过计算可以知道层级0的整个地球图像（瓦片）为256256像素大小，层级1整个地球图像为512512像素大小。而层级0和层级1表示的地球范围都是一样的（经度[-180°, 180°]，纬度[-90°, 90°]）。在层级0的时候，一个像素在水平方向就表示360°/256 = 1.40625°这么长的经度范围（以度为单位），在竖直方向就表示180°/256 = 0.703125°这么长的纬度范围（以度为单位）。而这两个数字就是分辨率了，即一个像素所表示的现实世界的范围是多少，这个范围可能是度（在地理坐标系统中），可能是米（在投影坐标系统中），或者其他单位，根据具体的情况而定。
·因为不同的在线瓦片地图可能采用不一样的分辨率，比如百度在线瓦片地图。所以在使用在线瓦片地图或者自己制作的瓦片地图时，都需要知道使用的分辨率是多少。如若不然，可能会出现位置偏移。
·瓦片数量计算：
层级0的瓦片数是 1 = 2^0 ∗ 2^0
层级1的瓦片数是 4 = 2^1 * 2^1
层级2的瓦片数是 16 = 2^2 * 2^2
层级3的瓦片数是 64 = 2^3 * 2^3
层级z的瓦片数是 2^z * 2^z
·OpenLayers默认采用的分辨率和Google在线瓦片地图一样，他们都是采用的ESPG:3857
·ol获取默认分辨率：map.getView().getResolution()
·根据EPSG获取各层级分辨率：

var projectionExtent = ol.proj.get("EPSG:3857").getExtent();  //获取EPSG:3857投影的范围

var tilePixel = 256;  //单张瓦片的像素，通常都为256，也有少部分为512，根据不同的源而定

var maxResolution = ol.extent.getWidth(projectionExtent) / tilePixel;  //最大分辨率 = 0层投影范围的宽度 / 单张瓦片的像素

var MaxZoom = 21;  //地图可放大层级数，要求服务端有相应的层级的瓦片、矢量地图包

var resolutions = new Array(MaxZoom);  //分辨率数组

var matrixIds = new Array(MaxZoom);  //层级数组

```
for (var i = 0; i < MaxZoom; i++) {
```

  resolutions[i] = maxResolution / Math.pow(2, i);

```
  matrixIds[i] = i;
```
```
}
```

名词解释

layer 层
contorl 控件
feature 元素
interaction 交互
Vector 矢量的
Tile 瓦片
source 资源
format 转换
projection 投影

注意事项

位置信息转换

后端返回的数据多GPS采用的是【EPSG4326】，在实际绘投影坐标系地图时需要转换为【EPSG3857】

EPSG4326是基于WGS84椭球的经纬度坐标系（大地坐标系，BL）。

EPSG3857是基于球体的、web墨卡托投影（伪墨卡托投影）的投影坐标系，范围为纬度85度以下，由于google地图最先使用而成为事实标准。至今，大多互联网地图都使用EPSG3857，主要是因为该投影是等角投影，适合地图定向及导航，但是纬度越高，面积变形越大。

常见的openlayers 转换方式

new LineString(coordinates).transform(“EPSG:4326”, “EPSG:3857”)

常用封装

框架结构

在这里插入图片描述

Map

Map的属性

target
view
layers
interaction
controls
overlay
event

{
   
    target: 'map',//对象映射：要将`map`对象附加到div，` map`对象将`target`作为参数，值是`div`的`id`
    layers: [//图层
      new ol.layer.Tile({
   //这里定义的是平铺图层
        source: new ol.source.OSM()//图层源 定义图层映射协议
      })
    ],
    view: new ol.View({
   //视图
      center: ol.proj.fromLonLat([37.41, 8.82]),//地图中心
      zoom: 4//缩放层级
    }),
    controls:[//最初添加到映射中的控件  如未设置 使用默认控件