使用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 介绍