## 本文从零到一带你实战 openlayers 离线地图的使用，内容包括： + 获取离线地图瓦片 + openlayers加载离线地图瓦片 + 显示地理坐标 + 显示地理坐标范围。 + [openlayers 官网](https://openlayers.org/) 这个是一定要看的。openlayers的api 相比于商用的地图（比如高德百度之类的）确实不怎么友好。 ## 获取离线地图瓦片 + 高德是提供了一个 api 感兴趣的可以去看看，本文不采用那种方式。 + `http://webrd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=2&scale=1&style=8` 在线瓦片 + 下载离线地图瓦片，网上有很多方法、大部分收费找个合适的工具真的难，找到一个能用的免费贡献出来了**全能地图下载器** + 链接：https://pan.baidu.com/s/18LiUAh1-5CsVxzhX77ZReg 提取码：yd88 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4e4e82aebcf04204b3263330c3956874~tplv-k3u1fbpfcp-watermark.image?) ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9628dda3cd1848e7b292bfa263e2581b~tplv-k3u1fbpfcp-watermark.image?) + 离线瓦片下载完成后的到这样一份数据 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6cb73853c16c49da99e73c0259291338~tplv-k3u1fbpfcp-watermark.image?) ### 发布离线数据 + 地图离线瓦片肯定是要放在服务器上的，放在项目里有点过于庞大了。 + 本地测试的话，本地起一个服务用来访问地图离线瓦片，本文采用 [http-server 猛击查看安装](https://github.com/http-party/http-server) 一行命令。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c7753354e566415385ba7559e96f7709~tplv-k3u1fbpfcp-watermark.image?) + 下文会会用到 http://192.168.3.6:8081 本地服务及ip端口 ## openlayers 加载离线地图本文以 vue 项目为例 ### 安装 openlayers + [文档](https://openlayers.org/download/) + `npm install ol` + 当然也可以通过js直接引入 ```js ``` ### 创建地图并加载点位 ```js ``` ### 地理点位追加 + 图层数据源 `VectorSource` 创建后提供一个 `addFeature` 方法 `pointLayerSource.addFeature(item)` `item` 是创建 `point` 点数据如: ```js // 创建点 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) ``` ### 不出意外页面会展示地图和一个定位点如果没有先进行如下排查 + 上边的服务第一次请求会卡住放到cmd 敲几下回车即可（有请求产生） + 查看离线地图瓦片请求路径是否正确 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7adf5826e0f84de2872448a88094ecfd~tplv-k3u1fbpfcp-watermark.image?) + 坐标是否正确，是否在所展示地图辖区内。 ## 点位响应事件展示 popup弹窗 ```js ``` ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fa6b7426e5c647f0803b023f24484f8b~tplv-k3u1fbpfcp-watermark.image?) ## 添加行政区域范围 + 行政区域是指省市区的范围，一般市一份geojson 数据，可以从这里获取 [datav geo](http://datav.aliyun.com/tools/atlas/index.html#&lat=41.07313973329343&lng=122.01759338378905&zoom=10) + **注意图层的顺序点位图层不在最上层的话可能会导致点击事件无法正确响应图层先添加的在下边** ```js ``` ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/56dbfafde598483588ab557bba82afdd~tplv-k3u1fbpfcp-watermark.image?)