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'; // 引入 useGeographicimport jybjGeo from '@/assets/board/jiangyongxian.json' //外缘地图包import jyxjGeo from '@/assets/board/jiangyongxiang.json' //乡界地图包mounted() {// 初始化 geomapthis.initGeomap();
},
method:{//geomapinitGeomap() {// 启用地理坐标系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 = falsethis.clusters.setVisible(this.clustersState);this.circlesState = truethis.circles.setVisible(this.circlesState);this.miState = false} else {this.clustersState = true;this.clusters.setVisible(this.clustersState);this.circlesState = falsethis.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 = falsethis.clusters.setVisible(this.clustersState);this.circlesState = truethis.circles.setVisible(this.circlesState);this.miState = false} else {this.clustersState = true;this.clusters.setVisible(this.clustersState);this.circlesState = falsethis.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 = falsethis.rivershow = truethis.riverData = objthis.getRiverArea(obj)setTimeout(() => {this.rHeight = this.$refs.vbody.offsetHeight + 50}, 200)} else {this.closeRiver()this.objshow = truethis.objData = obj}}};this.map.on('singleclick', this.clickListener);},chgIcons() {this.iconState = !this.iconStatethis.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