使用vue+openLayers开发离线地图以及离线点位的展示

1 .下载 引入到需要的组件中

npm install ol

2. 需要用到的api... (根据开发需求以及实际情况进行引入)

import ol from "ol";
import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import Feature from "ol/Feature";
import Point from "ol/geom/Point";
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
import { OSM, Vector as VectorSource, XYZ } from "ol/source";
import Overlay from "ol/Overlay";
import {
 Circle as sCircle,
 Fill,
 Stroke,
 Style,
 Circle as CircleStyle,
 Icon,
} from "ol/style";
import { defaults } from "ol/control";

3. 准备一个dom容器以及弹出层的容器

<div id="map"></div>
<div ref="popup" class="popup"></div>

4. 准备变量

map:null, // 地图容器
markers:[], // 地图点位
zoom:13, // 地图初始高度
position:[116.397128,39.916527], // 地图默认经纬度
popup:null, // 后期需要使用到的悬浮弹框

5. 代码如下:

mounted:{
 // 初始化一个地图
 this.initMap();
 // 获取后台的点位数据
 this.getData();
},
methods:{
 initMap(){
 // 首先创建一个离线瓦片图层
 const offlineLayer = new TileLayer({
 source: new XYZ({
 url: "后台地址+服务器文件名称" + "/{z}/{x}/{y}.png", // 设置本地离线瓦片所在路径
 }),
 }); 
 // 创建标点符号图层 设置他的样式
 const vectorLayer = new VectorLayer({
 source: new VectorSource({
 features: [],
 }),
 style: new Style({
 image: new sCircle({
 radius: 10,
 stroke: new Stroke({
 // 边界样式
 color: "rgba(64, 169, 255,.25)", // 边界颜色
 width: 16, // 边界宽度
 }),
 fill: new Fill({
 color: "#40a9ff",
 }),
 }),
 }),
 });
 // 创建地图
 this.map = new Map({
 // 设置地图控件，默认的三个控件都不显示
 controls: defaults({
 attribution: false,
 rotate: false,
 zoom: false,
 }),
 target: "map",
 layers: [offlineLayer, vectorLayer],
 view: new View({
 center: this.position, // 地图中心点
 zoom: this.zoom, // 缩放
 projection: "EPSG:4326", // 坐标系
 maxZoom: 18, // 限制地图缩放最大级别为18
 }),
 });
 // 创建弹出框
 this.popup = new Overlay({
 element: this.$refs.popup,
 positioning: "bottom-center",
 stopEvent: true,
 autoPanAnimation: {
 duration: 250,
 },
 });
 // 绑定
 this.map.addOverlay(this.popup);
 this.popup.setPositioning("center-center");
 // 监听鼠标移动 
 //openlayers / singleclick提供的方法
 this.map.on("pointermove", this.onMouseMove);
 // 监听鼠标单击
 this.map.on("singleclick", this.onMapClick);
 }, 
 }, 
},
 // 获取数据 $get是对axios请求进行封装
 getData() {
 this.$get("点位接口").then((response) => {
 this.markers = response.data;
 setTimeout(() => { // 数据多可以使用定时器延时一下加载 避免全部加载造成卡顿
 this.addMarkers();
 }, 200);
 });
 },
 // 添加标记
 addMarkers() {
 const features = [];
 for (const marker of this.markers) {
 const feature = new Feature({
 geometry: new Point([marker.lon, marker.lat]),
 name: marker.name,
 num: marker.num,
 address: marker.address,
 });
 features.push(feature);
 }
 const vectorLayer = this.map.getLayers().getArray()[1];
 const source = vectorLayer.getSource();
 source.addFeatures(features);
 },
 // 鼠标移动
 onMouseMove(event) {
 const pixel = this.map.getEventPixel(event.originalEvent);
 const feature = this.map.forEachFeatureAtPixel(
 pixel,
 (feature) => feature
 );
 const coordinates = feature.getGeometry().getCoordinates();
 if (feature) {
 const name = feature.get("name");
 const number = feature.get("cumber");
 const address = feature.get("address");
 this.popup.getElement().innerHTML = `
 <div>名称: <span>${name}</span></div>
 <div>号码: <span>${number}</span></div>
 <div>地址: <span>${address}</span></div>
 `;
 this.popup.setPosition(coordinates);
 this.popup.getElement().style.display = "block";
 this.map.getTargetElement().style.cursor = "pointer";
 } else {
 this.popup.getElement().style.display = "none";
 this.map.getTargetElement().style.cursor = "-webkit-grab";
 }
 },
 
 // 地图单击 可根据不同的需求对两个方法进行改写
 onMapClick(event) {
 const pixel = this.map.getEventPixel(event.originalEvent);
 const feature = this.map.forEachFeatureAtPixel(
 pixel,
 (feature) => feature
 );
 if (feature) {
 const coordinates = feature.getGeometry().getCoordinates();
 console.log(coordinates);
 }
 },
}

6. 最后贴出popup的样式

#map {
 height: 100%;
}
.popup {
 position: absolute;
 background-color: white;
 padding: 5px;
 border-radius: 5px;
 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), 0 2px 10px rgba(0, 0, 0, 0.1);
}
#popup {
 min-width: 19.375rem;
 min-height: 3.125rem;
 white-space: normal;
 font-size: 0.75rem;
 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)); */
}

7. 参考中文官网OpenLayers 3 介绍