vue中使用openlayers开发离线地图

最近在使用openlayers开发离线地图，但是全英文的文档属实有点难顶，本文代码主要就是实现marker点位标记以及点击图标会显示弹窗，参考博客写的非常的详细也是我找到比较好的。
文中用到的瓦片地图是使用太乐下载器下载的，仅供参考
完整代码

在这里插入代码片
<template><div><div ref="olMap" id="map" class="ol-map"/><div id="popup" class="ol-popup"><a href="#" id="popup-closer" class="ol-popup-closer"></a><div id="popup-content" class="popup-content"></div></div></div>
</template>
<script>
import 'ol/ol.css'
import TileLayer from 'ol/layer/Tile'
import VectorLayer from 'ol/layer/Vector'
import VectorSource from 'ol/source/Vector'
import XYZ from 'ol/source/XYZ'
import {Map, View, Feature} from 'ol'
import Overlay from 'ol/Overlay'
import {Style,Stroke,Fill,Icon,Text
} from 'ol/style'
import {Point} from 'ol/geom'
import {Cluster} from 'ol/source'
import {fromLonLat} from 'ol/proj'
// import {toStringHDMS} from 'ol/coordinate'export default {name: 'defineMap',data () {return {imgUrl: require('../../src/assets/pointer.png'),map: null,pointLayer: null,diffLayer: null,overlay: null,clusterData:null,}},mounted () {this.init()this.diffLayer = new VectorLayer({source: new VectorSource()})this.clusterData = {点A: {center: {lng: 119.99082431579592, lat: 30.277877393725625}},点B: {center: {lng: 119.92396220947268, lat: 30.256453639392525}}}let points = [{name: '点A', value: 1},{name: '点B', value: 1}]this.addCluster(this.clusterData, points, true)this.addPopup()this.addPoint(this.diffLayer, [119.97846324707033, 30.274838322154054])},methods: {init () {const tileLayer = new TileLayer({source: new XYZ({url: `tiles/{z}/{x}/{y}.png`})})// 初始化地图this.map = nullthis.map = new Map({layers: [tileLayer],view: new View({center: fromLonLat([119.97846324707033, 30.274838322154054]), // 地图中心点zoom: 14, // 缩放级别minZoom: 0, // 最小缩放级别maxZoom: 18, // 最大缩放级别constrainResolution: true// 因为存在非整数的缩放级别，所以设置该参数为true来让每次缩放结束后自动缩放到距离最近的一个整数级别，这个必须要设置，当缩放在非整数级别时地图会糊}),target: this.$refs.olMap// DOM容器})},addCluster (clusterData, points) {let source = new VectorSource()let clusterSource = new Cluster({distance: parseInt(20, 10),source: source})this.pointLayer = new VectorLayer({source: clusterSource// style: this.clusterStyle})this.pointLayer.setStyle(this.clusterStyle())this.map.addLayer(this.pointLayer)for (const key in clusterData) {points.forEach(e => {if (e.name === key) {let point = fromLonLat([clusterData[key].center.lng,clusterData[key].center.lat])var f = new Feature({geometry: new Point(point),data: {path: 'homepage'}})f.set('name', e.name)f.set('value', e.value)source.addFeature(f)}})}},// 添加弹窗addPopup () {var container = document.getElementById('popup')var closer = document.getElementById("popup-closer");var content = document.getElementById('popup-content')this.overlay = new Overlay({element: container,autoPan: true,autoPanAnimation: {duration: 250}})this.map.addOverlay(this.overlay)this.map.on('click', function (evt) {//查询当前点击的地方是否存在要素(图标)var feature = this.map.forEachFeatureAtPixel(evt.pixel, function (feature) { return feature; });console.log(feature)if (feature) {content.innerHTML = ''; //清空popup的内容容器// 点击尺 （这里是尺(米)，并不是经纬度）;content.innerHTML = `<p>A<p><p>状态：正常</p>安装人员：lisa`this.overlay.setPosition(evt.coordinate) // 把 overlay 显示到指定的 x,y坐标}}.bind(this))this.map.on('pointermove', function (e) {var pixel = this.map.getEventPixel(e.originalEvent);var hit = this.map.hasFeatureAtPixel(pixel);this.map.getTargetElement().style.cursor = hit ? 'pointer' : '';}.bind(this));closer.onclick = function() {this.overlay.setPosition(undefined);closer.blur();return false;}.bind(this);},clusterStyle () {return () => {var style = new Style({image: new Icon({src: this.imgUrl,// offset: [-15, 0], // 偏移量anchor: [1, 1]}),text: new Text({text: '我是一个点',fill: new Fill({color: '#FFF'}),font: '12px Calibri,sans-serif',stroke: new Stroke({color: 'red',width: 5})})})return style}},// 添加点位 这个可以不看addPoint (pointLayer, condiation) {// 添加图层this.map.addLayer(pointLayer)// 循环添加feature// 创建feature，一个feature就是一个点坐标信息let feature = new Feature({geometry: new Point(// 经纬度需要转换一下fromLonLat(condiation)),data: {path: 'homepage'}})feature.set('marker', () => {console.log('1')})this.map.on('singleClick', (e) => {console.log(e)})feature.setStyle(new Style({// 设置图片效果image: new Icon({src: this.imgUrl,// offset: [-15, 0], // 偏移量anchor: [1, 1]}),name: '我是一个点',text: new Text({textAlign: 'right',textBaseline: 'middle',text: 'xxx'})}))let featuresArr = []featuresArr.push(feature)// 批量添加featurepointLayer.getSource().addFeatures(featuresArr)},}
}
</script><style scoped>
.ol-map {width: 100%;font-size: 14px;height: calc(100vh - 96px);
}.ol-popup {position: absolute;background-color: white;-webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));padding: 15px;border-radius: 10px;border: 1px solid #cccccc;bottom: 12px;left: -50px;
}.ol-popup:after,
.ol-popup:before {top: 100%;border: solid transparent;content: " ";height: 0;width: 0;position: absolute;pointer-events: none;
}.ol-popup:after {border-top-color: white;border-width: 10px;left: 48px;margin-left: -10px;
}.ol-popup:before {border-top-color: #cccccc;border-width: 11px;left: 48px;margin-left: -11px;
}.ol-popup-closer {text-decoration: none;position: absolute;top: 2px;right: 8px;
}.popup-content {width: 400px;
}.ol-popup-closer:after {content: "✖";
}</style>

实现效果

demo

vue中使用openlayers开发离线地图相关推荐

OpenLayers开发离线地图源代码（OpenLayers开发谷歌高德百度地图）
(OpenLayers DEMO)点击下载本案例介绍如何在离线(单机.或局域网无Internet)状态下发布离线地图,且结合OpenLayers做基于地图的二次开发. 一. 离线地图数据下载离 ...
Vue中使用Openlayers加载OSM(Open Street Map)显示街道地图
场景 Openlayers下载与加载geoserver的wms服务显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/114 ...
Vue中使用Openlayers加载Geoserver发布的ImageWMS
场景 Openlayers下载与加载geoserver的wms服务显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/114 ...
Vue中使用Openlayers加载Geoserver发布的TileWMS时单击获取shp文件的坐标信息
场景 Vue中使用Openlayers加载Geoserver发布的TileWMS: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/ ...
Vue中使用Openlayers加载Geoserver发布的TileWMS
场景 Openlayers下载与加载geoserver的wms服务显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/114 ...
Vue中使用echart实现中国地图统计图
Vue中使用echart实现中国地图统计图前言 Echart版本的确定全局导入或按需导入在对应的页面调用echart 前后端数据交互注意事项前言在Vue2.x开发中,为了更好地展示某一个时间 ...
vue中加载腾讯地图（html形式）
vue中引入腾讯地图,目前根据网上的方式有一种 qqmap组件,但是本人才疏学浅,未能探究如何使用,于是乎,就曲线救国,用另一种方式实现了,在vue中引入iframe,然后在iframe中引入html ...
vue中使用raphael.js实现地图绘制
一.效果图二.在vue中引入raphael.js npm i raphael -S 三.封装一个名为StreetMap的组件,代码如下 1 <template> 2 <div> ...
vue中使用echarts和百度地图实现飞机迁徙图
在vue-cli生成的项目中使用echarts和百度地图api实现飞机迁徙图,当然也可以实现其他效果. 1. 准备项目安装echarts 在已经生成的vue项目根目录npm install echa ...

vue中使用openlayers开发离线地图

vue中使用openlayers开发离线地图相关推荐

最新文章

热门文章