openLayers实战(一):vue项目中的离线地图引入

最近的项目涉及到离线地图的操作,查阅社区文章,决定使用openLayers+vue+离线地图的方式进行开发,前期基础引入操作完全参考掘金文章,非常优秀全面的文章。

openlayers 实战离线地图 - 掘金

此外,开发过程的地图操作可参考官网的API说明OpenLayers - Welcome,一定要看!

按照掘金文章操作,我这里没遇到问题,后续开发过程中的实际使用会实时记录...

接下来是一些基本概念:转自OpenLayers中文文档3基本概念Basic Concepts_北凉冬的博客-优快云博客

地图Map

The core component of OpenLayers is the map (from the ol/Map module). It is rendered to a target container (e.g. a div element on the web page that contains the map). All map properties can either be configured at construction time, or by using setter methods, e.g. setTarget().

OpenLayers的核心组件是地图(来自 ol/Map模块)。它被渲染到一个 "目标 "容器(包含地图的网页上的一个 "div "元素:e.g.)。所有的地图属性都可以在构建时配置,或者通过使用setter方法,例如setTarget()。

The markup below could be used to create a <div> that contains your map.

下面的标记可以用来创建一个包含你的地图的div。

<div id="map" style="width: 100%, height: 400px"></div>

The script below constructs a map that is rendered in the <div> above, using the map id of the element as a selector.

下面的脚本构建了一个地图,在上面的<div>中呈现,使用元素的mapid作为选择器。

import Map from 'ol/Map.js';
​
const map = new Map({target: 'map'});

视图View

The map is not responsible for things like center, zoom level and projection of the map. Instead, these are properties of a ol/View instance.

地图不负责像中心、缩放级别和地图的投影这样的事情。相反,这些是ol/View实例的属性。

import View from 'ol/View.js';
​
map.setView(new View({
  center: [0, 0],
  zoom: 2,
}));

A View also has a projection. The projection determines the coordinate system of the center and the units for map resolution calculations. If not specified (like in the above snippet), the default projection is Spherical Mercator (EPSG:3857), with meters as map units.

 一个 "视图 "也有一个 “投影”。投影决定了 "中心 "的坐标系和地图分辨率计算的单位。如果没有指定(如上面的片段),默认投影是球面墨卡托(EPSG:3857),地图单位是米。

The zoom option is a convenient way to specify the map resolution. The available zoom levels are determined by maxZoom (default: 28), zoomFactor (default: 2) and maxResolution (default is calculated in such a way that the projection’s validity extent fits in a 256x256 pixel tile). Starting at zoom level 0 with a resolution of maxResolution units per pixel, subsequent zoom levels are calculated by dividing the previous zoom level’s resolution by zoomFactor, until zoom level maxZoom is reached.

缩放 "选项是指定地图分辨率的一种方便方法。可用的缩放级别由maxZoom(默认:28)、zoomFactor(默认:2)和maxResolution(默认的计算方式是投影的有效范围适合256x256像素的瓦片)决定。从缩放级别0开始,每个像素的分辨率为maxResolution单位,随后的缩放级别是通过前一个缩放级别的分辨率除以zoomFactor来计算,直到达到缩放级别maxZoom。


来源Source

To get remote data for a layer, OpenLayers uses ol/source/Source subclasses. These are available for free and commercial map tile services like OpenStreetMap or Bing, for OGC sources like WMS or WMTS, and for vector data in formats like GeoJSON or KML.

 为了获得一个图层的远程数据,OpenLayers使用ol/source/Source子类。这些子类可用于免费和商业地图瓦片服务,如OpenStreetMap或Bing,用于OGC来源,如WMS或WMTS,以及用于GeoJSON或KML等格式的矢量数据。

import OSM from 'ol/source/OSM.js';
​
const source = OSM();

层数Layer

A layer is a visual representation of data from a source. OpenLayers has four basic types of layers:

一个图层是一个来源的数据的可视化表示。OpenLayers有四种基本类型的层:

ol/layer/Tile - Renders sources that provide tiled images in grids that are organized by zoom levels for specific resolutions.渲染资源,提供网格中的平铺图像,这些网格是按特定分辨率的缩放级别组织的。
ol/layer/Image - Renders sources that provide map images at arbitrary extents and resolutions.渲染提供任意范围和分辨率的地图图像的来源。
ol/layer/Vector - Renders vector data client-side.在客户端渲染矢量数据。
ol/layer/VectorTile - Renders data that is provided as vector tiles.渲染以矢量瓦片形式提供的数据。

import TileLayer from 'ol/layer/Tile.js';
​
// ...
const layer = new TileLayer({source: source});
map.addLayer(layer);

组合

The above snippets can be combined into a single script that renders a map with a single tile layer:

import Map from 'ol/Map.js';
import View from 'ol/View.js';
import OSM from 'ol/source/OSM.js';
import TileLayer from 'ol/layer/Tile.js';
​
new Map({
  layers: [
    new TileLayer({source: new OSM()}),
  ],
  view: new View({
    center: [0, 0],
    zoom: 2,
  }),
  target: 'map',
});

Vue项目中使用离线瓦片地图服务,特别是使用OpenLayers 6框架与高德地图的瓦片资源时,首先需要理解瓦片地图的概念。瓦片地图是种将地图划分为多个小块图片(瓦片)的方法,这些瓦片可以单独请求和缓存,以提高地图的加载速度和减少服务器负担。 以下是使用OpenLayers 6在Vue项目中嵌入离线瓦片的基本步骤: 1. 准备离线瓦片数据:确保你有高德地图的离线瓦片数据。通常这些数据需要预先下载并放置在服务器或本地文件系统中。 2. 配置Vue项目:在Vue项目中安装OpenLayers依赖,并在项目中正确引用OpenLayers。 例如,在`package.json`文件中添加OpenLayers依赖: ```json "dependencies": { "ol": "latest version" } ``` 然后运行`npm install`来安装依赖。 3.Vue组件中添加地图初始化代码:在Vue组件的`mounted`钩子中初始化OpenLayers地图,并添加离线瓦片图层。 以下是个示例代码片段: ```javascript import 'ol/ol.css'; import Map from 'ol/Map'; import View from 'ol/View'; import TileLayer from 'ol/layer/Tile'; import TileWMS from 'ol/source/TileWMS'; import TileGrid from 'ol/tilegrid/TileGrid'; import XYZ from 'ol/source/XYZ'; export default { name: 'MapComponent', mounted() { const map = new Map({ target: 'map', // 对应到你的HTML模板中地图容器的id layers: [ new TileLayer({ source: new XYZ({ url: 'path_to_yourOfflineTiles/{z}/{x}/{y}.png', // 离线瓦片文件路径 tileGrid: new TileGrid({ resolutions: [156543.03390625, 78271.516953125, 39135.7584765625, 19567.87923828125, 9783.939619140625, 4891.969809570312, 2445.9849047851562, 1222.9924523925781, 611.4962261962891, 305.74811309814453, 152.87405654907226, 76.43702827453613, 38.218514137268066, 19.109257068634033, 9.554628534317017, 4.777314267158508, 2.388657133579254, 1.194328566789627, 0.5971642833948135, 0.29858214169740677, 0.14929107084870338], // 分辨率数组 extent: [-20037508.34, -20037508.34, 20037508.34, 20037508.34] // 世界范围 }) }) }) ], view: new View({ center: [0, 0], // 地图中心点坐标 zoom: 2 // 缩放级别 }) }); map.setTarget('map'); } } ``` 4.Vue模板中添加地图容器:确保HTML模板中有对应的地图容器元素。 ```html <div id="map" style="width: 100%; height: 100%;"></div> ``` 请注意,上面的代码需要根据实际情况进行调整,特别是瓦片的URL路径、分辨率数组和世界范围等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值