openlayers [五] 地图图层数据来源source 详解

发布时间:2024年01月17日

1 序言


初始化一个地图,必不可少的三要素。targetviewlayers。source Layer 是 的重要组成部分。如果没有数据源你就不能渲染处地图的底图,也就没有任何含义

2 source 数据源类型

  • ol.source.BingMaps ,必应地图的切片数据,继承自ol.source.TileImage;
  • ol.source.Cluster,聚簇矢量数据,继承自ol.source.Vector;
  • ol.source.ImageCanvas,数据来源是一个 canvas 元素,其中的数据是图片,继承自 ol.source.Image;
  • ol.source.ImageMapGuide,Mapguide 服务器提供的图片地图数据,继承自 ol.source.Image,触发ol.source.ImageEvent;
  • ol.source.ImageStatic,提供单一的静态图片地图,继承自ol.source.Image;
  • ol.source.ImageVector,数据来源是一个 canvas 元素,但是其中的数据是矢量来源
  • ol.source.Vector,继承自 ol.source.ImageCanvas;
  • ol.source.ImageWMS,WMS 服务提供的单一的图片数据,继承自 ol.source.Image,触发
    ol.source.ImageEvent;
  • ol.source.MapQuest,MapQuest 提供的切片数据,继承自 ol.source.XYZ;
  • ol.source.OSM,OpenStreetMap 提供的切片数据,继承自 ol.source.XYZ;
  • ol.source.Stamen,Stamen 提供的地图切片数据,继承自 ol.source.XYZ
  • ol.source.TileVector,被切分为网格的矢量数据,继承自 ol.source.Vector;
  • ol.source.TileDebug,并不从服务器获取数据,而是为切片渲染一个网格,继承自 ol.source.Tile;
  • ol.source.TileImage,提供切分成切片的图片数据,继承自 ol.source.Tile,触发
    ol.source.TileEvent;
  • ol.source.TileUTFGrid,TileJSON 格式 的 UTFGrid 交互数据,继承自 ol.source.Tile;
  • ol.source.TileJSON,TileJSON 格式的切片数据,继承自 ol.source.TileImage;
  • ol.source.TileArcGISRest,ArcGIS Rest 服务提供的切片数据,继承自 ol.source.TileImage;
  • ol.source.WMTS,WMTS 服务提供的切片数据。继承自 ol.source.TileImage;
  • ol.source.XYZ,XYZ 格式的切片数据,继承自 ol.source.TileImage;
  • ol.source.Zoomify,Zoomify 格式的切片数据,继承自 ol.source.TileImage。
  • ol.source.Image,提供单一图片数据的类型,直接继承自 ol.source.Source;
  • ol.source.Tile,提供被切分为网格切片的图片数据,继承自 ol.source.Source;
  • ol.source.Vector,提供矢量图层数据,继承自 ol.source.Source;

3 列举 source 的用法

3.1 ol.source.Vector 的使用(矢量图层的数据来源)

3.1.1 基本事件

addfeature,当一个要素添加到 source 中触发;
removefeature,当要素移除时候发生;
changefeature,当要素变化时触发;
clear,当 source 的 clear 方法调用时候触发;

3.1.1.2 接受的参数
/**
 * @typedef {{attributions: (Array.<ol.Attribution>|undefined),
 *     features: (Array.<ol.Feature>|undefined),
 *     format: (ol.format.Feature|undefined),
 *     loader: (ol.FeatureLoader|undefined),
 *     logo: (string|olx.LogoOptions|undefined),
 *     strategy: (ol.LoadingStrategy|undefined),
 *     url: (string|undefined),
 *     wrapX: (boolean|undefined)}}
 * @api
 */

  • attribution,地图右下角的 logo 包含的内容;
  • features,地理要素,从字符串读取的数据;
  • format,url属性设置后,加载要素使用的数据格式,采用异步的 AJAX 加载;
  • loader,加载要素使用的加载函数;
  • logo,logo包含的内容
  • strategy,加载要素使用的策略,默认是 一次性加载所有要素;
  • url,要素数据的地址;
  • wrapX,是否在地图水平坐标轴上重复,默认是 true。

features 方法实现

import areaGeo from "@/geoJson/china.json";

var vectorSource = new ol.source.Vector({
    features: (new ol.format.GeoJSON()).readFeatures(areaGeo )
});
var vectorLayer = new ol.layer.Vector({
    source: vectorSource,
    style: style
});
map.addLayer(vectorLayer);

在这里插入图片描述
url + format 方法实现

var vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector({
    url: '../geoJson/china.json',
    format: new ol.format.GeoJSON()
  })
});

这两种方法中都会指定数据来源格式, 矢量数据源支持的格式包含很多gml、EsriJSON、geojson、gpx、igc、kml、osmxml、ows、polyline、topojson、wfs、wkt、wms capabilities(兼容 wms 的格式)、 wms getfeatureinfo、 wmts capabilities、xlink、xsd:等格式。这些格式都有readFeatures、readFeature和readGeometry方法用于读取数据。

文章来源:https://blog.csdn.net/qq_45815947/article/details/135649846
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。