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

已于 2025-02-18 14:35:53 修改
阅读量686 收藏 3
点赞数 6
文章标签： 1024程序员节
于 2024-10-24 13:56:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_19688207/article/details/143207253
版权

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);

// 添加离线geojson数据-推荐
const addBaseGeoJsonLayer = (map) =>{
  removeGeoJsonLayer(map);

  // 使用 GeoJSON 格式读取数据
  const geojsonFormat = new GeoJSON();
  const features = geojsonFormat.readFeatures(pointData, {
    featureProjection: 'EPSG:3857' // 投影坐标系
  });

  // 创建一个矢量源并添加读取的特征
  const geoJsonSource = new VectorSource({
    features: features
  });

  // 创建一个矢量图层
   geoJsonLayer.value = new VectorLayer({
        name:"geojson图层",
        source:geoJsonSource,
        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:7,// 半径
            }),
        }),
        zIndex: 20,
    });

    map.addLayer(geoJsonLayer.value);
}



// 遍历添加
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("没有要素图层！")
    }*/

}

使用方法：

在**.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]
              ]
          ]
      ]
      }
    }
  ]
}

修改属性信息：

const updateInfoOne = () =>{
                
                const mySelect = new Select();
				this.map.addInteraction(mySelect);
				/* mySelect.on('select', function(evt) {
					// 打印出选中的要素属性信息
					//console.log("evt",JSON.stringify(evt.selected[0].values_.name));	
					// 获取选中要素信息集合
					//const selectedFeatures = mySelect.getFeatures().getArray();
					// 打印出选中的要素属性信息
					//console.log("selectedFeatures",JSON.stringify(selectedFeatures[0].values_.name));
					
					//方法1：修改离线*.josn信息方法
					const selectedFeature = evt.selected[0];
					selectedFeature.set('name', "lalala"); // 更新属性值，这里的'name'是示例属性名，根据实际情况修改。
					selectedFeature.set('region', "heiheihei");
					console.log("selectedFeature",JSON.stringify(selectedFeature));
					//方法2：修改离线*.json信息方法
					//const selectedFeatures = mySelect.getFeatures().getArray();
					//selectedFeatures[0].set('name', "还有谁"); // 更新属性值，这里的'name'是示例属性名，根据实际情况修改。
					//selectedFeatures[0].set('region',"朝阳区");
					// 该方法在离线json中报错
					//this.myVectorSource.changed(); // 通知源数据已更改，以便更新地图显示。
					//console.log("selectedFeatures",JSON.stringify(selectedFeatures));
					
				}); */

}               

const updateInfoTwo = () =>{

    	// 修改离线*.json属性信息
				mySelect.getFeatures().on('add', function(evt) {
				    const feature = evt.element;
				    // 显示属性编辑表单或对话框，这里仅为示例代码，实际实现需根据具体情况编写HTML和JavaScript代码来处理表单的显示和属性更新。
				    console.log('update before Selected feature:', JSON.stringify(feature));
					
					feature.set('name', "lalala"); // 更新属性值，这里的'name'是示例属性名，根据实际情况修改。
					feature.set('region', "heiheihei");
					// 该方法报错
					//this.myVectorSource.changed(); 
					
					console.log('update after Selected feature:',JSON.stringify(feature));
				});

}

破z晓
关注
OpenLayer - 数据加载geojson
zhushanlin的博客
04-27 583
GIS地理信息系统(Geographic Information System)，它是在计算机软硬的支持下，对地球表层空间的**地理分布数据**，进行采集，存储，管理，运算，分析，**显示**和描述的技术系统，它十分重要的**空间信息系统**。 就是将空间数据库中的数据，可视化呈现。
11-openlayers加载geojson数据
fxshy的博客
05-14 279
11-加载geojson数据
119.在 Vue3 中使用 OpenLayers 实现加载中国边界 JSON 数据（EPSG:4326）
小彭的博客
04-20 230
本文介绍了如何在 Vue3 项目中集成 OpenLayers，并以中国边界 JSON 为例，加载矢量地图数据。该方法适用于各种 GeoJSON 可视化需求，如行政区渲染、专题图开发、地图标绘等。添加鼠标交互（点击高亮、tooltip）实现 GeoJSON 动态加载增加图层切换控制结合 ECharts、Canvas 进行数据可视化。
OpenLayers-加载Geojson数据
giser__z的博客
03-09 979
地址可以是本地geojson文件，也可以是网络geojson格式的数据服务。加载完成后可以对数据要素进行遍历。值得注意的是，加载网络服务的行为（如geoserver发布的数据服务）属于异步，不能直接获得要素。下面代码是我解决此问题的一种思路，通过VectorSource的。事件(在要素完成加载时触发)
Openlayer对wfs服务进行增删改查
09-29 1573
注意：ol版本要用5.3.3，保证newGeoJson正常使用。6.1.1中不能用newGeoJSON（） 查询数据 查询链接： http://120.76.197.111:8090/geoserver/csdn_data/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=csdn_data%3Asichuan&maxFeatures=50&outputFormat=applicatio...
Openlayers实战：加载GeoJSON
大剑师兰特的GIS世界
07-17 753
在OPenlayers的交互中，经常性的我们要加载一些数据，在这个实战中，演示的是加载GeoJSON文件。GeoJSON 是一种使用JavaScript 对象表示法(JSON) 对地理数据结构进行编码的格式。简而言之，GeoJSON 为你提供了一种简单的格式来表示简单的地理特征以及它们的非空间属性。
openlayers加载geoJson格式文件（并加载json中的样式）
qq_40482342的博客
01-21 8237
openlayers加载geoJson格式文件（并加载json中的样式） 样式如下图: 话不多说直接上代码和注释（geojson文件可以在我的优快云中下载） 分享不易：点赞支持 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="./ol/ol.css" type="text/css"> <script src="
10. Openlayers加载GeoJSON、含文件（结合vue 详细教程）
全栈三维GIS开发工程师，擅长Cesium、OpenLayers、Three.js、WebGL、Vue、Django、GDAL和QGIS技术。在这个博客里，我将分享我的开发经验、技术心得和项目案例，希望能为GIS爱好者和开发者提供有价值的参考。
07-18 4922
欢迎来到 OpenLayers 的学习之旅！今天我们将深入探讨如何在 OpenLayers 地图中加载 GeoJSON 数据。你会看到代码是如何通过层层叠加的方式来建立这个功能，以及如何制定自定义样式来展示独特的 GeoJSON 数据。
vue封装 openlayers组件库 地图设置
04-10
在"vue封装 openlayers组件库 地图设置"的项目中，开发者需要做的是将OpenLayers的功能集成到Vue组件中，以便在Vue应用中方便地使用。以下是一些关键步骤： 1. **安装依赖**：在项目根目录下，使用`yarn install`...
Openlayers 教程 02 - 地图添加 WKT WKB GeoJson 格式的点线面数据
非科班Java出身GISer的博客
03-01 3300
WebGIS 开发中，对于数据量不是很大的场景，可以直接从数据库读取数据，通过创建点线面要素（Feature），然后添加到矢量图层（vectorLayer）中，在地图上展示。添加点线面的方法可以封装一下，方便使用。...
vue3 + openlayers---初始化地图
QDxin_xyz的博客
05-17 296
这里只是简单的做了封装 后面文章会单独对 api 进行讲解。
vue集成openlayers加载geojson并实现点击弹窗教程
10-14
主要为大家详细介绍了vue集成openlayers加载geojson并实现点击弹窗教程，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue+openlayers5学习总结（七）vue封装的一些功能
zhangshuanlai的博客
06-20 215
目录1.封装测量功能 1.封装测量功能 vue中使用方法 self.source = new VectorSource(); var vector = new VectorLayer({ source: self.source, style: new Style({ fill: new Fill({ color: "rgba(2...
Openlayer 加载Geojson数据
西柚2015地信小白GISer
03-10 644
数据格式（Geojson）： 调试（使用了本底的geojson文件，一般通过后台返回geojson数据）： let gjson = require("@/assets/lj.json"); this.AddGeojson(gjson); 加载代码： //加载Geojson矢量 AddGeojson(geojson) { let vectorSource = new VectorSource({ features: new GeoJSON().rea
279：vue+openlayers: readFeature 模式加载本地Geojson数据，解决vue加载geojson错误的问题
大剑师兰特的GIS世界
07-18 5346
本示例演示如何在vue+openlayers中添加显示GeoSON数据，显示的是瑞士区域内的数据（EPSG:4326）。vue-cli本身是不能够load geojson数据的。需要另外添加loader，来解决vue加载geojson错误的问题直接复制下面的 vue+openlayers源代码，操作2分钟即可运行实现效果。
Openlayers零基础教程【8】加载geojson数据详细教程
2403_88103571的博客
01-08 545
本篇主要学习如何加载本地geojson文件的数据。
openlayers：实现加载geojson文件（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
02-12 270
openlayers：实现加载geojson文件（附完整源码）
openlayers学习——5、openlayers添加GeoJSON
记录生活点滴
01-10 3945
openlayers添加GeoJSON 前言：基于Vue，学习openlayers，根据官网demo，记录常用功能写法。 本人不是专业GIS开发，只是记录，方便后续查找。 参考资料： openlayers官网：https://openlayers.org/ geojson下载网站：https://datav.aliyun.com/portal/school/atlas/area_selector 地图坐标拾取网站：https://api.map.baidu.com/lbsapi/getpoint
WebGIS如何实现openlayer中的GeoJson文件加载
qq_49491645的博客
01-16 1314
OpenLayers是一个用于开发WebGIS客户端的JavaScript包，最初基于BSD许可发行。 OpenLayers是一个开源的项目，其设计之意是为互联网客户端提供强大的地图展示功能，包括地图数据显示与相关操作，并具有灵活的扩展机制 GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含...
加载geojson文件
最新发布
05-13
加载 GeoJSON 文件可以通过多种方式实现，具体取决于所使用的库或框架。以下是基于 OpenLayers 和 Vue 的两种常见方法。 --- ### 使用 OpenLayers 加载 GeoJSON 数据 #### 方法一：从本地 JSON 对象加载 如果已经拥有 GeoJSON 数据作为 JavaScript 对象，则可以按照以下步骤操作： ```javascript // 导入必要的模块 import { Vector as VectorSource } from &#39;ol/source&#39;; import VectorLayer from &#39;ol/layer/Vector&#39;; import GeoJSON from &#39;ol/format/GeoJSON&#39;; // 假设 yourGeojsonData 是一个有效的 GeoJSON 对象 var vectorSource = new VectorSource({ features: (new GeoJSON()).readFeatures(yourGeojsonData) }); // 创建矢量图层并设置其源为上面定义的矢量源 var vectorLayer = new VectorLayer({ source: vectorSource, style: new Style({ stroke: new Stroke({ color: &#39;blue&#39;, width: 3 }), fill: new Fill({ color: &#39;rgba(0, 0, 255, 0.1)&#39; }) }) }); // 将矢量图层添加到地图中 map.addLayer(vectorLayer); ``` 此代码片段展示了如何通过 `ol.format.GeoJSON` 解析 GeoJSON 数据，并将其作为特性（features）传递给矢量源[^3]。 #### 方法二：从远程 URL 请求 GeoJSON 数据 当需要从服务器获取 GeoJSON 数据时，可按如下方式进行配置： ```javascript // 定义矢量源，指定 GeoJSON 格式以及数据所在的 URL var vectorSource = new VectorSource({ format: new GeoJSON(), url: &#39;path_to_your_geojson_file.json&#39; // 替换为您实际的 GeoJSON 文件路径 }); // 创建矢量图层并将矢量源绑定至该图层 var vectorLayer = new VectorLayer({ source: vectorSource, style: new Style({ stroke: new Stroke({ color: &#39;green&#39;, width: 2 }), fill: new Fill({ color: &#39;rgba(0, 128, 0, 0.1)&#39; }) }) }); // 向地图实例添加新创建的矢量图层 map.addLayer(vectorLayer); ``` 这种方法利用了 `url` 属性自动发起 HTTP GET 请求以下载 GeoJSON 数据[^3]。 --- ### 在 Vue.js 中集成 Leaflet 并加载 GeoJSON 数据 对于前端开发人员来说，在 Vue.js 应用程序中使用 Leaflet 可能更加直观。下面是一个简单的例子说明如何完成这一任务： ```html <template> <div id="map"></div> </template> <script> export default { name: "LeafletMap", mounted() { this.initMap(); }, methods: { initMap() { const L = require(&#39;leaflet&#39;); require(&#39;leaflet/dist/leaflet.css&#39;); // 初始化底图 const map = L.map(&#39;map&#39;).setView([39.9042, 116.4074], 13); L.tileLayer(&#39;https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png&#39;, {}).addTo(map); // 加载外部 GeoJSON 文件 fetch(&#39;path_to_your_geojson_file.json&#39;) // 修改为您的 GeoJSON 路径 .then(response => response.json()) .then(data => { L.geoJSON(data).addTo(map); // 将解析后的 GeoJSON 数据加入地图 }); } } }; </script> <style scoped> #map { height: 500px; width: 100%; } </style> ``` 这里的关键在于调用了浏览器内置的 Fetch API 来异步获取 GeoJSON 文件内容，并借助 Leaflet 提供的 `L.geoJSON()` 工具快速渲染这些地理要素[^4]。 --- ### Cesium 中加载 GeoJSON 数据 Cesium 支持直接加载 GeoJSON 文件并通过特定样式呈现出来。下面是基本流程的一个示例： ```javascript // 引入 cesium 模块 import * as Cesium from &#39;cesium&#39;; // 设置 viewer 实例 const viewer = new Cesium.Viewer(&#39;cesiumContainer&#39;, {}); // 动态加载 geojson 文件 viewer.dataSources.add(Cesium.GeoJsonDataSource.load( &#39;https://raw.githubusercontent.com/gregology/geometries/master/world-countries.geojson&#39; )).then(dataSource => { viewer.zoomTo(dataSource); // 自动缩放到合适范围 }); ``` 这段脚本演示了怎样运用 Cesium 的 `GeoJsonDataSource.load` 方法轻松导入在线托管的服务端资源[^5]。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值