1.创建一个vue项目
2.引入关键依赖包
package.json的依赖包如下
"dependencies": {
"axios": "^1.4.0",
"core-js": "^3.8.3",
"echarts": "^5.4.2",
"element-ui": "^2.15.13",
"ol": "^5.3.3",
"ol-ext": "^4.0.8",
"ol-layerswitcher": "^4.1.1",
"vue": "^2.6.14",
"vue-router": "^3.5.1",
"vuex": "^3.6.2"
},
用到的openLayers(简称ol)版本为5.3.3 不同版本的写法不同,低版本有些方法可能不支持或者没有
3.给地图一个容器
<div class="olMap" ref="rootMap">
4.页面引入ol各个需要用到的模块
// 地图版本5的导入
import "ol/ol.css";
import { Map, View, Overlay } from "ol";
import XYZ from "ol/source/XYZ";
import { TileWMS, OSM, Vector as VectorSource } from "ol/source";
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
import Feature from "ol/Feature";
import { fromExtent } from "ol/geom/Polygon";
import LinearRing from "ol/geom/LinearRing";
import { Fill, Stroke, Style, Text, Circle, Icon } from "ol/style";
import GeoJSON from "ol/format/GeoJSON";
import "ol-ext/dist/ol-ext.min.css";
import "ol-layerswitcher/dist/ol-layerswitcher.css";
import OlExtLayerSwitcher from "ol-ext/control/LayerSwitcher";
import * as echarts from "echarts";
// 导入瓦块数据
import mapJson from "../assets/jiandk.js";
import mapJson2 from "../assets/jiandk2.js";
// 引入请求
需要知道干啥用的模块 去这个 ol中文文档 http://openlayers.vip/examples/
5.初始化地图
// 实例化地图
initMap() {
let me = this;
// 地图dom
let map = this.$refs.rootMap;
// 自定义瓦块样式
var style = new Style({
fill: new Fill({
color: "rgba(255, 0, 0, 0.5)",
}),
stroke: new Stroke({
color: "#ccc",
width: 1,
}),
});
// 图层集合 这些图层看业务需要自行取舍, 自定义需要给到js文件的数据
var layers = [
//看需要 我这里使用的是天地图
// 天地图底图层
new TileLayer({
title: "地区实景图层",
source: new XYZ({
url: "https://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=这块填自己的密钥",
}),
}),
new TileLayer({
title: "影像注记图层",
source: new XYZ({
url: "http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=这块填自己的密钥",
}),
}),
// 自定义的瓦块图层
new VectorLayer({
title: "自定义的瓦块图层1",
source: new VectorSource({
features: new GeoJSON().readFeatures(mapJson),
}),
style: style,
}),
// 自定义的瓦块图层
new VectorLayer({
title: "自定义的瓦块图层2",
source: new VectorSource({
features: new GeoJSON().readFeatures(mapJson2),
}),
}),
];
this.map = new Map({
// 图层容器
layers: layers,
// 挂载点
target: map,
view: new View({
// 地图编码方式
projection: "EPSG:4326",
// 中心点
center: [114.8606, 26.8597],
// 最开始的层级
zoom: 10,
// 最大的缩放层级
maxZoom: 18,
// 最小的缩放层级
minZoom: 9,
}),
});
//设置地图缩放监听
this.map.on("moveend", function (e) {
let zoom = me.map.getView().getZoom();
console.log("zoom", zoom);
});
//这块是创建点击弹窗 和地图其他遮罩层的方法
this.addOverlay();
this.singleclick();
this.pointermove();
this.addBeijin();
// 使用LayerSwitcher实现的图层控制
const ctrl = new OlExtLayerSwitcher({
collapsed: true,
trash: true,
});
// 地图添加控件
this.map.addControl(ctrl);
// this.addImg()
}
然后在mounted里调用一下这个就好了
6.点击瓦块实现弹窗开关
// 生成弹窗加到地图上
addOverlay() {
// 创建Overlay
let elPopup = this.$refs.popup;
this.popup = new Overlay({
element: elPopup,
positioning: "bottom-center",
stopEvent: true,
autoPan: true,
offset: [0, -10],
});
// console.log(this.popup,'弹窗')
this.map.addOverlay(this.popup);
// 创建Overlay
let elPopup1 = this.$refs.popup1;
this.popup1 = new Overlay({
element: elPopup1,
positioning: "bottom-center",
stopEvent: true,
autoPan: true,
offset: [0, -10],
});
// console.log(this.popup,'弹窗')
this.map.addOverlay(this.popup1);
},
// 点击出现弹窗
singleclick() {
// 点击
this.map.on("singleclick", (e) => {
// 判断是否点击在点上
let feature = this.map.forEachFeatureAtPixel(
e.pixel,
(feature) => feature
);
if (feature) {
console.log(feature, "点击需要渲染的数据");
// 果园地块的数据
if (feature.values_.BM) {
this.info = feature.values_;
this.shopPopup = true;
// 设置弹窗位置
let coordinates1 = feature.getGeometry().getCoordinates();
// console.log(coordinates1);
this.popup1.setPosition(coordinates1);
}
} else {
//点击的不是将弹窗关闭 我有两个弹窗 全部关闭
this.shopPopup = false;
}
});
},
//改变鼠标移到到瓦块点位上的光标样式
pointermove() {
this.map.on("pointermove", (e) => {
if (this.map.hasFeatureAtPixel(e.pixel)) {
this.map.getViewport().style.cursor = "pointer";
} else {
this.map.getViewport().style.cursor = "inherit";
}
});
},
弹窗的样式大概自己写成自己想要的样子就好了,这里不弄样式
<div ref="popup" class="popup" v-show="shopPopup">
</div>
7.实现将特定外的地块添加遮罩
// 生成遮罩层 三个方法
addBeijin() {
var mystyle = new Style({
fill: new Fill({
color: "rgba(164, 176, 187, 0.2)",
}),
stroke: new Stroke({
color: "#ccc",
width: 3,
}),
});
this.converLayer = new VectorLayer({
title: "吉安市",
source: new VectorSource(),
style: mystyle,
});
//这里的json文件可以去阿里云的datav自己定义一下下载(下载的文件别包括市内的数据)
var dataURL = require("../assets/jian.json");
// console.log(dataURL, "加载遮罩json");
this.addconver(dataURL);
this.map.addLayer(this.converLayer);
},
addconver(data) {
var fts = new GeoJSON().readFeatures(data);
var ft = fts[0];
var converGeom = this.erase(ft.getGeometry());
console.log(converGeom);
var convertFt = new Feature({
geometry: converGeom,
});
this.converLayer.getSource().addFeature(convertFt);
},
erase(geom) {
// 用来进行断点调试代码
// debugger;
const extent = [-180, -90, 180, 90];
const polygonRing = fromExtent(extent);
const coords = geom.getCoordinates();
coords.forEach((coord) => {
const linearRing = new LinearRing(coord[0]);
polygonRing.appendLinearRing(linearRing);
});
return polygonRing;
},
8.实现图层控制
上面代码第五点在初始化方法最后几行代码 已经实现的图层的控制
主要就是引入 和 添加控件就好了