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的样式文章来源:https://www.toymoban.com/news/detail-637039.html
#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 介绍文章来源地址https://www.toymoban.com/news/detail-637039.html
到了这里,关于使用vue+openLayers开发离线地图以及离线点位的展示的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!