openlayers 瓦片,openlayers 离线地
墨初 知识笔记 83阅读
我们现在的项目就说使用openlayer geoServer自己发布的矢量地图是和公安合作的项目由于政府大都使用的是天地图所以需要将geoServer的矢量地图改为天地图搭配openlayers使用openlayers还可以切换不同地图数据源虽然文档不够友好。
二、下载离线瓦片资源这里 我给个百度云链接 下载后解压
链接: 提取码: j18c
解压后双击打开
要下载高德地图 下载别的地图 我试了 报错 mmp
三、发布离线瓦片数据 要把自己下载的地图资源放在服务器上才行
自己本地测试的话本地起一个服务就好
怎么起
这是刚刚下载的瓦片地图资源在这个目录下
npm i http-server -ghttp-server --cors
这里我再唠叨下
为什么是 http-server --cors 为什么要加 --cors
因为我们的地图资源问卷有跨域的限制
虽然百度了说设置img.setAttribute(‘crossOrigin’, ‘anonymous’)这个有用但是经过实验其实没什么用
所以…
好了 服务有了
四、页面渲染vue2自己创建一个vue2项目或者直接拉取我的demo劳驾给我一个star⭐
安装 ol
npm install ol我直接上代码吧
<template> <div classhome> <div stylewidth: 100%; height: 100%> <div classmap idmap></div> </div> </div></template><script>import ol/ol.cssimport Map from ol/Mapimport { Tile as TileLayer } from ol/layerimport View from ol/Viewimport XYZ from ol/source/XYZexport default { name: HomeView, components: {}, data () { return { mapObj: null, mapDom: null, mapPointList: [], pointLayerSource: null, pointLayer: null } }, 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: [114.759, 25.522], // 地图中心点 zoom: 8, // 缩放 projection: EPSG:4326 // 坐标系 }) }) // 添加一个使用离线瓦片地图的层 const offlineMapLayer new TileLayer({ source: new XYZ({ url: /{z}/{x}/{y}.png // 设置本地离线瓦片所在路径,前面的地址是你输入http-server之后的服务地址 // tileLoadFunction: (imageTile, src) > { // console.log(imageTile, src) // // 使用滤镜 将白色修改为深色 // const img new Image() // // img.crossOrigin // // 设置图片不从缓存取从缓存取可能会出现跨域导致加载失败 // img.setAttribute(crossOrigin, anonymous) // img.onload () > { // const canvas document.createElement(canvas) // const w img.width // const h img.height // canvas.width w // canvas.height h // const context canvas.getContext(2d) // context.filter grayscale(98%) invert(100%) sepia(20%) hue-rotate(180deg) saturate(1600%) brightness(80%) contrast(90%) // context.drawImage(img, 0, 0, w, h, 0, 0, w, h) // imageTile.getImage().src canvas.toDataURL(image/png) // } // img.onerror () > { // imageTile.getImage().src require(/assets/logo.png) // } // img.src src // } }) }) // 将图层添加到地图 this.mapObj.addLayer(offlineMapLayer) // 加载地理坐标 // this.addPoint() } }, beforeDestroy () { this.mapClear() }}</script><style langless>.map { width: 1900px; height: 1000px; // background-color: red;}</style>
这里要替换你自己刚刚起的服务的地址哈
然后运行
npm run serve我的demo的路由是 ‘/offlineMap’
大概就是这样
参考文章
利用openlayers中的tileLoadFunction 的函数回调进行变色结合css的filter属性来进行变色
// 添加一个使用离线瓦片地图的层const offlineMapLayer new TileLayer({ source: new XYZ({ url: /{z}/{x}/{y}.png, // 设置本地离线瓦片所在路径,前面的地址是你输入http-server之后的服务地址 tileLoadFunction: (imageTile, src) > { console.log(imageTile, src) // 使用滤镜 将白色修改为深色 const img new Image() // img.crossOrigin // 设置图片不从缓存取从缓存取可能会出现跨域导致加载失败 img.setAttribute(crossOrigin, anonymous) img.onload () > { const canvas document.createElement(canvas) const w img.width const h img.height canvas.width w canvas.height h const context canvas.getContext(2d) context.filter grayscale(98%) invert(100%) sepia(20%) hue-rotate(180deg) saturate(1600%) brightness(80%) contrast(90%) context.drawImage(img, 0, 0, w, h, 0, 0, w, h) imageTile.getImage().src canvas.toDataURL(image/png) } img.onerror () > { imageTile.getImage().src require(/assets/logo.png) } img.src src } })})offlineMapLayer函数在加载瓦片的时候进行修改
css的filter属性解释大概就是改变你图片的色相饱和度黑白通透性等等来实现图片变色的效果。【缺点不能让地图指定哪个颜色只能调个大概的好看的颜色。】
效果
为什么多了这些图片
目的是解决加了这个函数后有些瓦片不全时会加载404的瓦片图缩放后就没了的问题。
所以添加img.onerror事件
把imageTile.getImage().src require(‘/assets/logo.png’)设置为一个图片出错时的替换图片就ok。对于404的图片大家也可以这样子设置设置成需要替换的图片就行。