vue+天地图+Openlayers
npm install ol
<template>
<div id="geomap" style="width: 100%; height: 722px" class="map-container" ref="mapContainer"></div>
<div class="mapIcon2">
<div class="btn" @click="chgIcons">{{iconText}}图例</div>
<div class="btn" @click="chgxj">{{xjText}}乡界</div>
<div class="btn" @click="chghl">{{hlText}}河流</div>
</div>
</template>
<script>
//以下为 geomap 支持
import ols from '@/utils/ols.js';
import { get as getProjection } from 'ol/proj'; // 引入 useGeographic
import jybjGeo from '@/assets/board/jiangyongxian.json' //外缘地图包
import jyxjGeo from '@/assets/board/jiangyongxiang.json' //乡界地图包
mounted() {
// 初始化 geomap
this.initGeomap();
},
method:{
//geomap
initGeomap() {
// 启用地理坐标系
ols.useGeographic();
// //添加天地图底图
var tdTU = new ols.TileLayer({
source: new ols.XYZ({
url: 'http://webst0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}',
}),
})
// 天地图的卫星图
var tiandi_img_w = new ols.Tile({
title: "卫星图",
source: new ols.XYZ({
crossOrigin: "anonymous",
url: "http://t7.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=" + this.tdtKey,
}),
visible: true, // 默认为true 展示
});
var tiandi_cia_w = new ols.Tile({
title: "卫星图",
source: new ols.XYZ({
crossOrigin: "anonymous",
url: "http://t7.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=" + this.tdtKey,
}),
visible: true, // 默认为true 展示
})
this.map = new ols.olMap({
target: this.$refs.mapContainer,
layers: [
//添加天地图底图
//tdTU,
// 添加天地图的卫星影像底图 + 影像注记
tiandi_img_w,
tiandi_cia_w,
],
view: new ols.View({
center: [111.3498, 25.1641], // 江永的中心点
zoom: 10, // 初始缩放级别
projection: 'EPSG:3857'
}),
});
//创建蒙层，凸显区域
this.showjyArea();
//绘制乡界
this.showjyxj();
//绘制河流
this.showjyhl()
// initMap over
},
showjyhl() {
this.hlWMS = new ols.TileLayer({
source: new ols.TileWMS({
url: 'http://XXXX:XXXX/geoserver/XXXX/wms',
params: {
LAYERS: 'jiangyong:jiangyongheliu',
VERSION: '1.1.1',
TILED: true,
},
serverType: 'geoserver',
projection: 'EPSG:3857',
}),
})
this.map.addLayer(this.hlWMS);
},
addGeomapinfo() {
this.addIcons();
this.addCircles();
if (this.zoomLevel <= 10) {
this.clustersState = false
this.clusters.setVisible(this.clustersState);
this.circlesState = true
this.circles.setVisible(this.circlesState);
this.miState = false
} else {
this.clustersState = true;
this.clusters.setVisible(this.clustersState);
this.circlesState = false
this.circles.setVisible(this.circlesState);
this.miState = true
}
},
clearGeomapinfo() {
if (this.circles) {
this.circles.getSource().clear();
this.circles = null
}
if (this.clusters) {
this.clusters.getSource().clear();
this.clusters = null
}
},
addCircles(center, radius) {
// 创建Feature对象集合
const features2 = [];
this.mapData.forEach((item) => {
const point = new ols.Point([Number(item.ln[0]), Number(item.ln[1])]);
const feature = new ols.Feature({
geometry: point,
});
features2.push(feature);
});
// 矢量要素数据源
const source2 = new ols.VectorSource({
features: features2,
});
this.circles = new ols.VectorLayer({
zIndex: 4,
source: source2,
style: (feature, resolution) => {
return new ols.Style({
image: new ols.Circle({
radius: 5,
fill: new ols.Fill({
color: '#06f106',
}),
}),
});
},
});
this.map.addLayer(this.circles);
},
addIcons() {
// 创建Feature对象集合
const features1 = [];
this.mapData.forEach((item) => {
const point = new ols.Point([Number(item.ln[0]), Number(item.ln[1])]);
const feature = new ols.Feature({
geometry: point,
info: item,
imgSrc: item.imgSrc, // 添加图标路径
});
features1.push(feature);
});
// 矢量要素数据源
const source1 = new ols.VectorSource({
features: features1,
});
this.clusters = new ols.VectorLayer({
zIndex: 4,
source: source1,
style: (feature, resolution) => {
const imgSrc = feature.get('imgSrc');
return new ols.Style({
image: new ols.Icon({
opacity: 1,
src: imgSrc,
scale: 1, // 图标缩放比例
}),
});
}
});
this.map.addLayer(this.clusters);
this.bindClickEvent();
},
// 添加多边形
showjyxj() {
// 解析 GeoJSON 数据
const features = new ols.GeoJSON().readFeatures(jyxjGeo);
// 创建矢量源
const vectorSource = new ols.VectorSource({
features: features
});
this.vectorLayerXJ = new ols.VectorLayer({
zIndex: 3,
source: vectorSource,
style: new ols.Style({
stroke: new ols.Stroke({
color: "#f4b49f",
width: 3
})
})
});
this.map.addLayer(this.vectorLayerXJ);
},
// 添加多边形并填充外部区域
showjyArea() {
let initLayer = new ols.VectorLayer({
zIndex: 3,
source: new ols.VectorSource(),
style: new ols.Style({
fill: new ols.Fill({
color: "rgba( 255, 255, 255, 0.7)",
}),
stroke: new ols.Stroke({
color: "#f4b49f",
width: 3
})
})
});
this.map.addLayer(initLayer);
this.addConver(initLayer, jybjGeo);
},
//添加遮罩
addConver(converLayer, data) {
const fts = new ols.GeoJSON().readFeatures(data);
const ft = fts[0];
const converGeom = this.erase(ft.getGeometry());
const convertFt = new ols.Feature({
geometry: converGeom,
});
converLayer.getSource().addFeature(convertFt);
},
//擦除操作，生产遮罩范围
erase(geom) {
const extent = [-180, -90, 180, 90];
const polygonRing = ols.fromExtent(extent);
const coords = geom.getCoordinates();
coords.forEach(coord => {
const linearRing = new ols.LinearRing(coord[0]);
polygonRing.appendLinearRing(linearRing);
});
return polygonRing;
},
addZoomListener() {
// 监听鼠标滚轮事件
this.map.getView().on('change:resolution', () => {
this.zoomLevel = this.map.getView().getZoom();
if (this.iconState) {
if (this.zoomLevel <= 10) {
this.clustersState = false
this.clusters.setVisible(this.clustersState);
this.circlesState = true
this.circles.setVisible(this.circlesState);
this.miState = false
} else {
this.clustersState = true;
this.clusters.setVisible(this.clustersState);
this.circlesState = false
this.circles.setVisible(this.circlesState);
this.miState = true
}
}
});
},
bindClickEvent() {
// 移除已有的点击事件监听器
if (this.clickListener) {
this.map.un('singleclick', this.clickListener);
}
// 绑定新的点击事件监听器
this.clickListener = (e) => {
let point = this.map.forEachFeatureAtPixel(e.pixel, (feature) => feature);
if (point && point.get('info')) {
let params = point.getProperties();
let obj = point.get('info');
// console.log("当前标点参数", obj);
if (obj.attribute == '河道') {
this.objshow = false
this.rivershow = true
this.riverData = obj
this.getRiverArea(obj)
setTimeout(() => {
this.rHeight = this.$refs.vbody.offsetHeight + 50
}, 200)
} else {
this.closeRiver()
this.objshow = true
this.objData = obj
}
}
};
this.map.on('singleclick', this.clickListener);
},
chgIcons() {
this.iconState = !this.iconState
this.iconText = this.iconState ? '隐藏' : '显示'
if (this.zoomLevel <= 10) {
this.circlesState = !this.circles.getVisible()
this.circles.setVisible(this.circlesState);
} else {
this.clustersState = !this.clusters.getVisible()
this.clusters.setVisible(this.clustersState);
}
},
chgxj() {
if (this.vectorLayerXJ) {
this.vectorLayerXJState = !this.vectorLayerXJ.getVisible()
this.vectorLayerXJ.setVisible(this.vectorLayerXJState);
this.xjText = this.vectorLayerXJState ? '隐藏' : '显示'
}
},
chghl() {
if (this.hlWMS) {
this.hlWMSState = !this.hlWMS.getVisible()
this.hlWMS.setVisible(this.hlWMSState);
this.hlText = this.hlWMSState ? '隐藏' : '显示'
}
},
}
</script>
ol.js
// ----------------<<CSS文件>>----------------
import "ol/ol.css";
// ----------------<<常用模块>>----------------
import Map from "ol/Map.js";
import View from "ol/View.js";
import TileLayer from "ol/layer/Tile";
import Tile from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ'
import Fill from 'ol/style/Fill.js'
import Point from 'ol/geom/Point.js';
import Style from 'ol/style/Style.js';
import Circle from 'ol/style/Circle.js';
import Stroke from 'ol/style/Stroke.js';
import Feature from 'ol/Feature.js';
import VectorLayer from 'ol/layer/Vector.js';
import VectorSource from 'ol/source/Vector.js';
// ----------------<<其他模块>>----------------
import Icon from 'ol/style/Icon.js';
import GeoJSON from 'ol/format/GeoJSON.js';
import TileWMS from 'ol/source/TileWMS.js';
import { useGeographic } from 'ol/proj.js'
import { fromExtent } from "ol/geom/Polygon";
import LinearRing from 'ol/geom/LinearRing.js';
const ols = {
olMap: Map,
View: View,
TileLayer: TileLayer,
Tile: Tile,
XYZ: XYZ,
Icon: Icon,
Fill: Fill,
Point: Point,
Style: Style,
Circle: Circle,
Stroke: Stroke,
Feature: Feature,
GeoJSON: GeoJSON,
TileWMS: TileWMS,
VectorLayer: VectorLayer,
VectorSource: VectorSource,
useGeographic: useGeographic,
fromExtent:fromExtent,
LinearRing:LinearRing
}
export default ols
原文地址：https://blog.csdn.net/qq_41737172/article/details/142658314
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！