关于离线地图方案的研究 |
您所在的位置：网站首页 › 离线地图是什么格式 › 关于离线地图方案的研究 |
关于离线地图方案的研究
|
需求场景
- 在一般项目里我们使用第三方地图的时候比较多，如 高德地图、百度地图、腾讯地图等
- 在一些特殊系统需要部署到内网的环境下，有需要用到地图的时候，就需要自己搭建离线地图
搭建离线地图需要的东西
地图瓦片服务服务
地图基础库
地图瓦片服务服务
如今互联网地图的地图内容分为两种，一种是栅格瓦片，一种是矢量瓦片
栅格瓦片
栅格数据就是将空间分割成有规律的网格，每一个网格称为一个单元（像素），并在各单元上赋予相应的属性值来表示实体的一种数据形式。 点实体：由一个栅格像元来表示，如图所示，一个点对应着一个像元； 线实体：由一定方向上连接成串的相邻栅格像元表示； 面实体（区域）：由具有相同属性的相邻栅格像元的块集合来表示； 栅格瓦片是预先在Server端制好固定的PNG和JPG图片集合，通俗说就是一张图片。 矢量瓦片矢量数据是利用欧几里德几何学中点、线、面及其组合体来表示地理实体空间分布的一种数据组织方式。 矢量瓦片是将矢量数据通过不同的描述文件来组织和定义，在客户端实时解析数据和完成绘制。 对比可以直接在 \mapabc\roadmap 目录下用http-server启动 网上找的例子 import 'ol/ol.css'; import Map from 'ol/Map'; import Feature from 'ol/Feature'; import VectorSource from 'ol/source/Vector'; import Overlay from 'ol/Overlay'; import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer'; import View from 'ol/View'; import {transform} from 'ol/proj'; import XYZ from 'ol/source/XYZ' import Point from 'ol/geom/Point'; import GeoJSON from 'ol/format/GeoJSON'; import {Fill, Stroke, Icon, Style} from 'ol/style' import markerImg from '@/assets/img/markerIcon.png' export default { name: "openlayersMap", data () { return { mapObj: null, mapDom: null, mapPointList: [], pointLayerSource:null, pointLayer: null, markerIcon: markerImg } }, mounted() { this.initMap() }, methods: { // 清除地图 某些情况 地图容器会存在两个 导致地图无法正常显示 这个问题折腾了我半天。 // 找了半天官方貌似也没有提供 对应的 api，自己动手了。 mapClear (){ if (this.mapDom) { this.mapDom.innerHTML = '' this.mapDom = null } }, // 初始化地图 initMap () { // 先尝试清除 this.mapClear() // 获取地图容器 this.mapDom = document.getElementById('map') // 初始化地图配置 this.mapObj = new Map({ target: this.mapDom, // 地图容器 view: new View({ center: [120.396255,36.307624], // 地图中心点 zoom: 14, // 缩放 projection: 'EPSG:4326' // 坐标系 }) }) // 添加一个使用离线瓦片地图的层 const offlineMapLayer = new TileLayer({ source: new XYZ({ url: 'http://172.16.0.214:8080' + '/{z}/{x}/{y}.png' // 设置本地离线瓦片所在路径 }) }) // 将图层添加到地图 this.mapObj.addLayer(offlineMapLayer) // 加载地理坐标 this.addPoint() }, // 添加地理坐标 addPoint () { this.delPointAll() // 地理坐标数组 const pointData = [ {longitude: 117.990969, latitude: 36.635013} ] pointData.map(item => { // 创建点 const point = new Feature({ geometry: new Point([item.longitude, item.latitude]), data: item }) // 点的样式 const iconStyle = new Style({ image: new Icon({ color: '#ffffff', crossOrigin: 'anonymous', src: this.markerIcon, }), }) // 设置样式 point.setStyle(iconStyle) // 保存到数据 方便删除 this.mapPointList.push(point) }) // 创建geojson据源 this.pointLayerSource = new VectorSource({features: this.mapPointList}) // 创建图层 并加载数据 this.pointLayer = new VectorLayer({source: this.pointLayerSource}) // 将图层添加地图上 this.mapObj.addLayer(this.pointLayer) }, // 地理点位删除 delPointAll(){ // 判断 删除的数据源是否存在 if (this.pointLayerSource) { // 遍历删除 this.mapPointList.map(item => { this.pointLayerSource.removeFeature(item) }) // 删除图层 重置数据 this.mapObj.removeLayer(this.pointLayer) this.pointLayerSource = null this.pointLayer = null this.mapPointList = [] } } }, beforeDestroy() { this.mapClear() } } .map { width: 1000px; height: 90vh; } 效果可以通过以下两种方式获取： 1、可以直接在 download.geofabrik.de 获取开源且免费的 OSM（OpenStreetMap ） 数据 2、还可以在 openmaptiles.org 获取免费或者收费的 OSM 数据 对比： 相同点： - 数据源都为 OSM（OpenStreetMap） 数据 不同点： - 前者不提供地图的样式，后者提供完整的地图样式 - 前者提供不同层级的细粒度的瓦片数据（未进行图层合并或者数据优化），后者提供完整的世界地图瓦片数据（数据已经整合且优化） - 前者数据更新及时，后者提供免费的数据为三年前瓦片数据（收费的数据则较新） * 第一个获取的不是MBTiles格式的，需要转化，第二个是直接获取 MBTiles 格式的，比较大，下载下来是全球的 方式1 1. 下载这一个中国地图的直接下载一个MBTiles，比较大，小的都50G 文档 github 3. 启动 FoxGIS Server Lite 服务一个例子： DOCTYPE html> Document * { margin: 0; padding: 0; } html, body, #map { width: 100%; height: 100%; } var map = new mapboxgl.Map({ container: 'map', // container id style: 'http://localhost:1234/api/styles/style', // style URL center: [116.4, 39.9066], // starting position [lng, lat] zoom: 13, // starting zoom }) // Create a new marker. const marker = new mapboxgl.Marker().setLngLat([116.4, 39.9066]).addTo(map) 5. 效果openlayers 实战离线地图 |
【本文地址】