openlayers 封装加载本地geojson数据 - vue3

Geojson数据是矢量数据，主要是点、线、面数据集合

Geojson数据获取：DataV.GeoAtlas地理小工具系列

实现代码如下：

 

import {ref,toRaw} from 'vue';
import { Vector as VectorLayer } from 'ol/layer.js';
import { Vector as VectorSource } from 'ol/source.js';
import { Style, Fill, Stroke, Circle as CircleStyle  } from 'ol/style';
import {Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon, Geometry} from 'ol/geom.js';
import { transform, fromLonLat, toLonLat } from 'ol/proj.js'
import Feature from 'ol/Feature.js';
import GeoJSON from 'ol/format/GeoJSON.js';
import Select  from 'ol/interaction/Select.js';
import Overlay from 'ol/Overlay';
import pointData from "../../../static/datas/point.json";// 本地点数据
import lineData from "../../../static/datas/line.json";// 本地线数据
import polygonData from "../../../static/datas/polygon.json";// 本地面数据
import multiPointData from "../../../static/datas/multiPoint.json";// 本地multipoint数据
import multiLineData from "../../../static/datas/multiLine.json";// 本地multiLine数据
import multiPolygonData from "../../../static/datas/multiPolygon.json";// 本地multiPolygon数据
import ccsData from "../../../static/datas/ccs.json";// 数据源
const vectorSource = ref(null);
// 创建图层
const vectorLayer = ref(null);// 添加
export const addBaseGeoJson = (map) =>{// 删除图层map.removeLayer(vectorLayer.value);// 创建要素数据源vectorSource.value = new VectorSource();// 创建要素图层vectorLayer.value = new VectorLayer();// 遍历本地数据pointData.features.forEach(function(element){const feature = new Feature();// 要素名称/类型const featurName = element.type;feature.setGeometryName(featurName);// 要素属性信息const properties = element.properties;// 要素图层类型const geomType = element.geometry.type;console.log("geomType",geomType)if("Point" == geomType){// 点数据// 要素数据图形 const pointGeom = element.geometry.coordinates// 转换坐标//const transformedCoords = transform([pointGeom[0],pointGeom[1]],'EPSG:4326', 'EPSG:3857');const transformedCoords = fromLonLat([pointGeom[0],pointGeom[1]]);// 添加数据const pointGeometry = new Point(transformedCoords);feature.setGeometry(pointGeometry);// 设置样式feature.setStyle(new Style({// 使用 CircleStyle 创建一个圆形的点image:new CircleStyle({// 点样式fill:new Fill({//color:"red",// 颜色color: 'rgba(255,0,0,0.4)',}),// 点周边样式stroke:new Stroke({color: '#3399CC',width: 1.25, }),radius:7,// 半径}),}));}else if("LineString" == geomType){// 线数据// 要素数据图形 const lineGeom = element.geometry.coordinates;// 转换坐标const transformedCoords = lineGeom.map((coord) => {return transform(coord, 'EPSG:4326','EPSG:3857');});// 创建线对象const lineGeometry = new LineString(transformedCoords);feature.setGeometry(lineGeometry);// 设置线特征样式（Style）feature.setStyle(new Style({stroke:new Stroke({color:"red",// 线的颜色width:7// 线宽带})}));}else if("Polygon" == geomType){// 面数据// 要素数据图形 const polygonGeom = element.geometry.coordinates;// 转换坐标const transformedCoords =  polygonGeom.map((item)=>{const coordResult = item.map((coord)=>{//return fromLonLat(coord, 'EPSG:4326','EPSG:3857');return fromLonLat(coord);});return coordResult;});// 创建面对象const polygonGeometry = new Polygon(transformedCoords);feature.setGeometry(polygonGeometry);// 设置多边形样式(Style)feature.setStyle(new Style({stroke:new Stroke({color:"yellow",// 多边形边界颜色width:2// 多边形边界宽度}),fill:new Fill({color:'rgba(0,0,255,0.5)'// 多边形填充颜色，这里设置为半透明颜色})}));}else if("MultiPoint" == geomType){// 点集合// 要素数据图形 const multiPointGeom = element.geometry.coordinates;// 转换坐标const transformedCoords = multiPointGeom.map((coord) => {return transform(coord, 'EPSG:4326','EPSG:3857');});// 创建MultiPoint对象const MultiPointGeometry = new MultiPoint(transformedCoords);feature.setGeometry(MultiPointGeometry);// 设置样式feature.setStyle(new Style({// 使用 CircleStyle 创建一个圆形的点image:new CircleStyle({// 点样式fill:new Fill({//color:"red",// 颜色color: 'rgba(255,0,0,0.4)',}),// 点周边样式stroke:new Stroke({color: '#3399CC',width: 1.25, }),radius:7,// 半径}),}));}else if("MultiLineString" == geomType){// 线集合// 要素数据图形 const multiLineGeom = element.geometry.coordinates;// 转换坐标const transformedCoords =  multiLineGeom.map((item)=>{const coordResult = item.map((coord)=>{//return fromLonLat(coord, 'EPSG:4326','EPSG:3857');return fromLonLat(coord);});return coordResult;});// 创建MultiLineString对象const MultiLineGeometry = new MultiLineString(transformedCoords);feature.setGeometry(MultiLineGeometry);// 设置多边形样式(Style)feature.setStyle(new Style({stroke:new Stroke({color:"green",// 多边形边界颜色width:2// 多边形边界宽度}),fill:new Fill({color:'rgba(0,0,255,0.5)'// 多边形填充颜色，这里设置为半透明颜色})}));}else if("MultiPolygon" == geomType){// 面集合// 要素数据图形 const multiPolygonGeom = element.geometry.coordinates;// 转换坐标const transformedCoords =  multiPolygonGeom.map((parentItem)=>{const parentCoordResult = parentItem.map((parentCoord)=>{const coordResult = parentCoord.map((coord)=>{//return fromLonLat(coord, 'EPSG:4326','EPSG:3857');return fromLonLat(coord);});return coordResult;});return parentCoordResult;});// 创建MultiPolygmon对象const multiPolygonGeometry = new MultiPolygon(transformedCoords);feature.setGeometry(multiPolygonGeometry);feature.setStyle(new Style({fill: new Fill({color: 'rgba(255, 0, 0, 1)'}),// 样式-边框stroke: new Stroke({color: '#0099ff',width: 3}),}));}// 点数据添加到数据源vectorSource.value.addFeature(feature);// 要素数据信息feature.setProperties(properties);});// 数据源添加到图层vectorLayer.value.setSource(vectorSource.value);// 将图层添加到地图上map.addLayer(vectorLayer.value);// 点选查看数据信息map.on('click', ev => {const pixel = ev.pixel   // 鼠标点击的位置，这个应该是像素const mousePoint = ev.coordinate  // 鼠标点击的坐标位置const feature = map.forEachFeatureAtPixel(pixel, (feature) => {return feature   // 查找出点击的哪个要素});if (feature) {  // 如果是点击了坐标点// 区域名称const properties = feature.getProperties();console.log("properties",properties);} else {console.log("没有要素数据");}})// 选中获取geojson数据/*if(vectorLayer.value != null){const featureLayer = toRaw(vectorLayer.value);// 创建选择交互const selectInteraction = new Select({layers:[featureLayer],});map.addInteraction(selectInteraction);// 监听选中要素的变化selectInteraction.on('select',(event) =>{// 获取被选中的要素const selectedFeatures = event.target.getFeatures();selectedFeatures.forEach(element => {//获取到选中要素的属性console.log("element",element.getProperties());});});}else{alert("没有要素图层！")}*/}/*** 添加点（坐标不一致位置会偏）不推荐使用* @param {*} map */export const addPoint = (map) =>{// 删除图层map.removeLayer(vectorLayer.value);// 加载本地数据vectorSource.value = new VectorSource({features: new GeoJSON().readFeatures(pointData),});vectorLayer.value = new VectorLayer({source: vectorSource.value,style:new Style({// 使用 CircleStyle 创建一个圆形的点image:new CircleStyle({// 点样式fill:new Fill({//color:"red",// 颜色color: 'rgba(255,0,0,0.4)',}),// 点周边样式stroke:new Stroke({color: '#3399CC',width: 1.25, }),radius:70,// 半径}),}),});map.addLayer(vectorLayer.value);
}

使用方法：

在**.vue引入

import {addBaseGeoJson} from "../js/baseGeojson.js";// 引入js// 使用
// 全图事件
const addJson = () => {addBaseGeoJson(map); 
}

注意：本地数据放置在根目录新建static/datas/下

point.json数据格式：

{"type": "FeatureCollection","features": [{"type": "Feature","properties": {"name": "点1","region":"绿园区","content":"信息点1"},"geometry": {"type": "Point","coordinates": [125.362488, 43.916037]}},{"type": "Feature","properties": {"name": "点2","region":"绿园区","content":"信息点2"},"geometry": {"type": "Point","coordinates": [125.362488, 43.906037]}},{"type": "Feature","properties": {"name": "点3","region":"绿园区","content":"信息点3"},"geometry": {"type": "Point","coordinates": [125.363488, 43.936037]}}]
}

line.json数据格式：

{"type": "FeatureCollection","features": [{"type": "Feature","properties": {"name": "线1","region":"测试区1","content":"信息线1"},"geometry": {"type": "LineString","coordinates": [[125.363488, 43.936037],[125.362488, 43.906037]]}},{"type": "Feature","properties": {"name": "线2","region":"测试区2","content":"信息线2"},"geometry": {"type": "LineString","coordinates": [[125.44,43.95],[125.44,43.96]]}},{"type": "Feature","properties": {"name": "线3","region":"测试区1","content":"信息线1"},"geometry": {"type": "LineString","coordinates": [[125.34,43.95],[125.54,43.96]]}}]
}

polygon.json数据格式：

{"type": "FeatureCollection","features": [{"type": "Feature","properties": {"name": "面1","region":"测试区1","content":"信息面1"},"geometry": {"type": "Polygon","coordinates": [[[125.323488, 43.86037],[124.332488, 42.706037],[125.342401, 43.607037]]]}},{"type": "Feature","properties": {"name": "面2","region":"测试区2","content":"信息面2"},"geometry": {"type": "Polygon","coordinates": [[[125.44,43.95],[125.46,43.96],[125.24,42.96]]]}},{"type": "Feature","properties": {"name": "面3","region":"测试区1","content":"信息面1"},"geometry": {"type": "Polygon","coordinates": [[[125.34,43.95],[125.54,43.96],[125.64,43.90],[125.68,43.98]]]}}]
}

multiPoint.json数据格式：

{"type": "FeatureCollection","features": [{"type": "Feature","properties": {"name": "multiPoint点1","region":"绿园区","content":"信息点1"},"geometry": {"type": "MultiPoint","coordinates": [[125.362488, 43.916037],[125.352488, 43.936037]]}},{"type": "Feature","properties": {"name": "multiPoint点2","region":"绿园区","content":"信息点2"},"geometry": {"type": "MultiPoint","coordinates": [[125.362488, 43.906037],[125.372488, 43.946037]]}},{"type": "Feature","properties": {"name": "multiPoint点3","region":"绿园区","content":"信息点3"},"geometry": {"type": "MultiPoint","coordinates": [[125.563488, 43.976037],[125.373488, 43.946037]]}}]}

multiLine.json数据格式：

{"type": "FeatureCollection","features": [{"type": "Feature","properties": {"name": "multiLine线1","region":"测试区1","content":"信息线1"},"geometry": {"type": "MultiLineString","coordinates": [[[125.363488, 43.936037], [125.362488, 43.906037]],[[125.263488, 43.736037], [125.242488, 43.706037]]]}},{"type": "Feature","properties": {"name": "multiLine线2","region":"测试区2","content":"信息线2"},"geometry": {"type": "MultiLineString","coordinates": [[[125.49,43.92],[125.45,43.96]],[[125.45,43.91],[125.44,43.96]]]}},{"type": "Feature","properties": {"name": "multiLine线3","region":"测试区1","content":"信息线1"},"geometry": {"type": "MultiLineString","coordinates": [[[125.38,43.95],[125.54,43.96]],[[125.34,43.92],[125.54,47.94]]]}}]
}

multiPolygon.json数据格式：

{"type": "FeatureCollection","features": [{"type": "Feature","properties": {"name": "multiPolygon面1","region":"测试区1","content":"信息面1"},"geometry": {"type": "MultiPolygon","coordinates": [[[[125.323488, 43.86037],[124.332488, 42.706037],[125.342401, 43.607037]]],[[[125.123488, 43.36037],[124.132488, 42.306037],[125.142401, 43.307037]]]]}},{"type": "Feature","properties": {"name": "multiPolygon面2","region":"测试区2","content":"信息面2"},"geometry": {"type": "MultiPolygon","coordinates": [[[[125.44,43.95],[125.46,43.96],[125.24,42.96]]],[[[125.46,43.95],[125.47,43.71],[125.28,42.56]]]]}},{"type": "Feature","properties": {"name": "multiPolygon面3","region":"测试区1","content":"信息面1"},"geometry": {"type": "MultiPolygon","coordinates": [[[[125.34,43.95],[125.54,43.96],[125.64,43.90],[125.68,43.98]]],[[[125.24,43.2],[125.34,43.94],[125.44,43.97],[125.58,43.99]]]]}}]
}