[关闭]
@GaoyuanHfut 2018-10-08T09:49:37.000000Z 字数 2621 阅读 686

地图学习笔记

gis


最简单的地图构成:

        // 创建地图
        new ol.Map({
        // 设置地图图层
        layers: [
          // 创建一个使用Open Street Map地图源的瓦片图层
          new ol.layer.Tile({source: new ol.source.OSM()})
        ],
        // 设置显示地图的视图
        view: new ol.View({
          center: [0, 0],    //                 定义地图显示中心于经度0度,纬度0度处
          zoom: 2            // 并且定义地图显示层级为2
        }),
        // 让id为map的div作为地图的容器
        target: 'map'    
    });

只有一条语句:

new ol.Map({...});

其他代码只是用于设置地图的构造参数。由此可以推测出ol.Map是最主要的地图类,创建地图就需要构造这么一个对象。接下来依次分析每一个参数部分的代码。

参数layers:

layers: [
            // 创建一个使用Open Street Map地图源的瓦片图层
            new ol.layer.Tile({source: new ol.source.OSM()})
          ],

从名字和具体的值可见这个地方可以设置多个layer,它是OpenLayers 3地图的组成结构单元,地图是由多个layer组成的,这种设计类似于Photoshop里面的图层,多个图层是可以叠加的,在最上面的会覆盖下面的,以此类推.添加了一个Open Street Map的地图layer。

参数view:

view: new ol.View({
            center: [0, 0],    // 定义地图显示中心于经度0度,纬度0度处
            zoom: 2            // 并且定义地图显示层级为2
          }),

通过字面意思可以看出,它为地图定义显示窗口,对应ol.View类,可以自定义地图显示的中心点,缩放层级等。

参数target:

target: 'map'

地图常用名词:

坐标系

     常用的就是二个,一个是EPSG:4326,等同于WGS84坐标系。另一个是EPSG:3857,等同于900913,由Mercator投影而来,经常用于web地图.一般代码中互相转换

分辨率

  概念还有点模糊,大概是用来解析屏幕坐标和世界坐标的纽带,通过它,才能知道你在屏幕上用鼠标点击的位置对应于世界地图具体的经纬度位置

图层 layer

   图层是指能够在视觉上覆盖一定地图范围,用来描述全部或者部分现实世界区域内的地图要素的抽象概念,一幅地图通常由一个或者多个图层组成。

矢量图形 Vector Overlays

   矢量图形,一般覆盖于底图图层之上,通过矢量的方式(路径或者实际大小)来描述其形状,用几何的方式来展示真实的地图要素,会随着地图缩放而发生视觉大小的变化,但其代表的实际路径或范围不变,如上图中红框内的折线、圆、多边形等。

   除了图中的折线、圆、多边形之外,JS API 还提供了矩形、椭圆、贝瑟尔曲线等常用的矢量图形。3D 视图下的 Mesh、Prism 棱柱、MeshLine 也可以看做是一些特殊的矢量图形。

点标记 Markers

   点标记是用来标示某个位置点信息的一种地图要素,覆盖于图层之上。如图中蓝色方框中的两个点状要素。其在屏幕上的位置会随着地图的缩放和中心变化而发生改变,但是会与图层内的要素保持相对静止。
  普通的点标记 (即 Marker ) ,支持将自定义图标和DOM元素作为展示内容。除了 Marker 之外为了满足不同的场景,JS API 另外提供了丰富的点标记类型,比如圆点标记 (CircleMarker) 、文本标记 (Text)、灵活点标记 (ElasticMarker) 。同时我们提供了海量点(MassMarks)、点聚合(MarkerCluster)来满足大量点标记的展示需求。

插件 Plugins

   插件是独立于JS API 地图核心模块之外的一些功能,比如服务类、绘制工具、矢量图形编辑工具、点聚合、热力图等。这些插件不会主动随 JS API的主体资源的加载而下发,使用之前需要提前引入,详见插件的使用。

地图级别 ZoomLevel

   级别与地图的比例尺成正比,每增大一级,地图的比例尺也增大一倍,地图显示的越详细。Web地图的最小级别通常为3级,最大级别各家略有不同,一般最大级别为 20 级。

经纬度 LngLat

   坐标通常指经纬度坐标,坐标范围大致为:东西经180度(-180——180,西半球为负,东半球为正),南北纬85度(-85——85,北半球为正,南半球为负)。

底图 BaseLayer

   严格意义上,底图指处于所有图层和图形最下方的一个图层,通常不透明。可以是单一图层,比如官方标准图层,也可以是图层组合,比图卫星图层和路网图层组合。

地图要素 Map Features

   严格意义的地图要素指的是展示在地图上的地理要素,包括道路、区域面、建筑、POI 标注、路名等。开发者自定义的点标记、矢量图形也可以看做是一种地图要素。

标注 Labels

   我们习惯将底图上自带的标示一定信息的文字或图标称为标注,比如 POI 标注,道路名称标注等。

地图平面像素坐标 Plane Coordinates

   地图平面像素坐标指投影为平面之后的地图上的平面像素坐标,Web墨卡托投影,在3级时,平面坐标范围为横纵0-256* 2的3次方 像素,每级别扩大一倍,即第n级的平面坐标范围为 0-256*2 的 n 次方 像素。

投影 Projection

   地图投影指的是将地球球面的经纬度坐标映射到地图平面坐标的变换和映射关系。

三维空间坐标 3D Coordinates

   三维空间坐标是在 3D 地图模式下的世界坐标,由 x、y、z 三个纬度组成。三维空间坐标通常用于描述 Object3D 类型的几何形体。

控件 control

   地图控件指的是下图标注的这些,包括缩放按钮,标尺,版权说明,指北针等等。不会随着地图的移动而移动,一直处于一个固定的位置。 在实现上,并不是在画布上绘制的,而是使用传统的HTML元素来实现的,便于同地图分离,也便于界面实现。 (自定义控件和开发页面差不多)
  1. ol.control.Attribution: 右下角的地图信息控件
  2. ol.control.FullScreen: 全屏控件
  3. ol.control.MousePosition: 鼠标位置控件
  4. ol.control.OverviewMap: 鸟瞰图控件
  5. ol.control.Rotate: 指北针控件
  6. ol.control.ScaleLine: 比例尺控件
  7. ol.control.Zoom: 缩放按钮控件
  8. ol.control.ZoomSlider: 缩放滚动条控件
  9. ol.control.ZoomToExtent: 放大到设定区域控件
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注