devbox
我家小花儿
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

openlayer中加载geojson的几种方式_openlayers加载geojson

作者：我家小花儿 | 2024-07-24 01:39:29

赞

踩

openlayers加载geojson

目录

一，加载本地geojson文件

二，加载geoserver发布的geojson数据

1、wms方式

2、wfs方式

三、点击查看属性

wms方式

wfs方式

加载4326

加载3857

推荐使用openlayer5，不要使用openlayer6，否则不能使用矢量切片和new GeoJSON()

cnpm i -S ol@5.3.3

先贴一个经常需要导入的模块 

  1. import "ol/ol.css";
  2. import { Map, View, Overlay } from "ol";
  3. import { TileWMS, OSM, Vector as VectorSource } from "ol/source";
  4. import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
  5. import {altKeyOnly, click, pointerMove,platformModifierKeyOnly} from 'ol/events/condition';
  6. import { Fill, Stroke, Style, Text , Circle, Icon} from "ol/style";
  7. import { Select,DragBox } from "ol/interaction";
  8. import { transform } from "ol/proj";
  9.  
  10. import {
  11.   defaults as defaultControls,
  12.   OverviewMap,
  13.   FullScreen,
  14.   ScaleLine,
  15.   ZoomSlider,
  16.   MousePosition,
  17.   ZoomToExtent
  18. } from "ol/control";
  19. import GeoJSON from "ol/format/GeoJSON";

一，加载本地geojson文件

1、

  1. new VectorSource({
  2.     features:new GeoJSON().readFeatures(this.geojsonData)
  3. })

2、推荐

  1. import sichuan from "@/assets/sichuan.json";
  2.  
  3. source: new VectorSource({
  4.    features: new GeoJSON().readFeatures(sichuan),
  5. }),

3、public中的文件

注意：使用new GeoJSON()需要ol@5.3.3，而ol@6.1.1不能用

  1. new VectorSource({
  2.     url: "sichuan_shp.json",
  3.     format: new GeoJSON()
  4. });

  1.  
  2. <template>
  3.     <div id="map"></div>
  4. </template>
  5.  
  6. <script>
  7. import "ol/ol.css";
  8. import { Map, View } from "ol";
  9. import { OSM, Vector as VectorSource } from "ol/source";
  10. import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
  11. import GeoJSON from "ol/format/GeoJSON";
  12.  
  13. export default {
  14.   components: {},
  15.   data() {
  16.     return {
  17.       map: {}
  18.     };
  19.   },
  20.   created() {},
  21.   mounted() {
  22.     this.initMap();
  23.   },
  24.   computed: {},
  25.   methods: {
  26.     initMap() {
  27.       var layers = [
  28.         new TileLayer({
  29.           source: new OSM()
  30.         }),
  31.         new VectorLayer({
  32.           source: new VectorSource({
  33.             url: "sichuan.json",
  34.             format: new GeoJSON()
  35.           })
  36.         })
  37.       ];
  38.       this.map = new Map({
  39.         layers: layers,
  40.         target: "map",
  41.         view: new View({
  42.           projection: "EPSG:4326",
  43.           center: [115, 39],
  44.           zoom: 4
  45.         })
  46.       });
  47.     }
  48.   }
  49. };
  50. </script>
  51.  
  52. <style lang="scss" scoped>
  53.   #map {
  54.     height: 700px;
  55.     width: 100%;
  56.   }
  57. </style>

这里千万要注意： osm地图放在图层数组的第一个位置！！！否则其他图层会被遮住！！

或者给图层设置zIndex属性

 

二，加载geoserver发布的geojson数据

（注意：如果想要发布成geojson，那么需要保证geoserver中这以下这四个jar包 。

这四个包下载地址：geoserver中发布geojson服务需要的包.zip_geoserver发布geojson-互联网文档类资源-CSDN下载

查看是否有这几个包，随便点击一个图层，在Tile Caching中看是否有“application/json;type=geojson”这个选项即可

将这四个jar包复制到geoserver安装路径下即可，如下路径：

参考：Geoserver配置以及发布geojson服务教程_迷茫的小猿的博客-CSDN博客）

1、wms方式

  1. source: new VectorSource({
  2.         url:
  3.           "http://localhost:8090/geoserver/NKYYGS/wms?service=WMS&version=1.1.0&request=GetMap&layers=NKYYGS%3Asichuan_shp&bbox=97.350096%2C26.045865%2C108.546488%2C34.312446&width=768&height=567&srs=EPSG%3A4326&format=application%2Fjson%3Btype%3Dgeojson",
  4.         format: new GeoJSON()
  5.       })

（注意：如果有时候用这种方式加载不出图层，那么可以用另一种方式：Vue中访问Geoserver发布的openlayer中wms地图服务_李疆的博客-CSDN博客） 

 

2、wfs方式

new GeoJSON()方式：

  1.  source: new VectorSource({
  2.             url:
  3.               "http://localhost:8090/geoserver/NKYYGS/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=NKYYGS%3Asichuan_shp&maxFeatures=50&outputFormat=application%2Fjson",
  4.             format: new GeoJSON()
  5.           })
  1. <template>
  2.   <div id="map" style="width: 100vw; height: 100vh"></div>
  3. </template>
  4.  
  5. <script>
  6. import "ol/ol.css";
  7. import { Map, View, Feature } from "ol";
  8. import { TileWMS, OSM, Vector as VectorSource } from "ol/source";
  9. import { Vector as VectorLayer, Tile as TileLayer } from "ol/layer";
  10.  
  11. import GeoJSON from "ol/format/GeoJSON";
  12. import { Point, LineString, Polygon } from "ol/geom";
  13.  
  14. export default {
  15.   components: {},
  16.   data() {
  17.     return {
  18.       map: {},
  19.       vectorlayer: {},
  20.     };
  21.   },
  22.   created() {},
  23.   mounted() {
  24.     this.initMap();
  25.   },
  26.   computed: {},
  27.   methods: {
  28.     initMap() {
  29.       this.map = new Map({
  30.         target: "map",
  31.  
  32.         layers: [
  33.           new TileLayer({
  34.             source: new OSM(),
  35.           }),
  36.           new VectorLayer({
  37.             source: new VectorSource({
  38.               //以下两个都可以，第一个是1.0.0版本，第二个是2.0.0版本
  39.               // url: "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=application%2Fjson",
  40.               url: "http://120.76.197.111:8090/geoserver/csdn_data/ows?service=WFS&version=2.0.0&request=GetFeature&typeName=csdn_data%3Asichuan&count=50&outputFormat=application%2Fjson",
  41.  
  42.               format: new GeoJSON(),
  43.             }),
  44.           }),
  45.         ],
  46.         view: new View({
  47.           projection: "EPSG:4326",
  48.           center: [104, 30.3],
  49.           zoom: 8,
  50.         }),
  51.       });
  52.     },
  53.   },
  54. };
  55. </script>

new GeoJSON().readFeatures(json)方式： 

  1.       let json = await fetch(
  2.         "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=application%2Fjson"
  3.       ).then((response) => {
  4.         return response.json();
  5.       });
  6.       this.features = new GeoJSON().readFeatures(json);

完整示例 

  1. <template>
  2.   <div id="map" style="width: 100vw; height: 100vh"></div>
  3. </template>
  4.  
  5. <script>
  6. import "ol/ol.css";
  7. import { Map, View, Feature } from "ol";
  8. import { TileWMS, OSM, Vector as VectorSource } from "ol/source";
  9. import { Vector as VectorLayer, Tile as TileLayer } from "ol/layer";
  10.  
  11. import GeoJSON from "ol/format/GeoJSON";
  12. import { Point, LineString, Polygon } from "ol/geom";
  13.  
  14. export default {
  15.   components: {},
  16.   data() {
  17.     return {
  18.       map: {},
  19.       vectorlayer: {},
  20.     };
  21.   },
  22.   created() {},
  23.   mounted() {
  24.     this.initMap();
  25.     this.addLayer();
  26.   },
  27.   computed: {},
  28.   methods: {
  29.     initMap() {
  30.       this.map = new Map({
  31.         target: "map",
  32.  
  33.         layers: [
  34.           new TileLayer({
  35.             source: new OSM(),
  36.           }),
  37.         ],
  38.         view: new View({
  39.           projection: "EPSG:4326",
  40.           center: [104, 30.3],
  41.           zoom: 8,
  42.         }),
  43.       });
  44.     },
  45.     async addLayer() {
  46.       let json = await fetch(
  47.         // "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=application%2Fjson"
  48.         "http://120.76.197.111:8090/geoserver/csdn_data/ows?service=WFS&version=2.0.0&request=GetFeature&typeName=csdn_data%3Asichuan&count=50&outputFormat=application%2Fjson"
  49.       ).then((response) => {
  50.         return response.json();
  51.       });
  52.       let features = new GeoJSON().readFeatures(json);
  53.  
  54.       this.vectorlayer = new VectorLayer({
  55.         source: new VectorSource(),
  56.       });
  57.       this.vectorlayer.getSource().addFeatures(features);
  58.       this.map.addLayer(this.vectorlayer);
  59.     },
  60.   },
  61. };
  62. </script>

如果还加载不出来的话，可能是中文编码问题，在工作空间中修改默认编码为utf8即可

三、点击查看属性

wms方式

见：https://blog.csdn.net/qq_40323256/article/details/109315337

wfs方式

加载4326

openlayer上加载了geojson图层后，就可以通过点击事件查看图层的要素属性了，代码如下：

  1. <template>
  2.   <div id="map" style="width: 100vw; height: 100vh"></div>
  3. </template>
  4.  
  5. <script>
  6. import "ol/ol.css";
  7. import { Map, View, Feature } from "ol";
  8. import { TileWMS, OSM, Vector as VectorSource } from "ol/source";
  9. import { Vector as VectorLayer, Tile as TileLayer } from "ol/layer";
  10.  
  11. import GeoJSON from "ol/format/GeoJSON";
  12. import { Point, LineString, Polygon } from "ol/geom";
  13.  
  14. import Select from "ol/interaction/Select";
  15. import { altKeyOnly, click, pointerMove } from "ol/events/condition";
  16.  
  17. export default {
  18.   components: {},
  19.   data() {
  20.     return {
  21.       map: {},
  22.       vectorlayer: {},
  23.       select: {},
  24.     };
  25.   },
  26.   created() {},
  27.   mounted() {
  28.     this.initMap();
  29.     this.selectFeature();
  30.   },
  31.   computed: {},
  32.   methods: {
  33.     initMap() {
  34.       this.map = new Map({
  35.         target: "map",
  36.  
  37.         layers: [
  38.           new TileLayer({
  39.             source: new OSM(),
  40.           }),
  41.           new VectorLayer({
  42.             source: new VectorSource({
  43.               //以下两个都可以，第一个是1.0.0版本，第二个是2.0.0版本
  44.               // url: "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=application%2Fjson",
  45.               url: "http://120.76.197.111:8090/geoserver/csdn_data/ows?service=WFS&version=2.0.0&request=GetFeature&typeName=csdn_data%3Asichuan&count=50&outputFormat=application%2Fjson",
  46.  
  47.               format: new GeoJSON(),
  48.             }),
  49.           }),
  50.         ],
  51.         view: new View({
  52.           projection: "EPSG:4326",
  53.           center: [104, 30.3],
  54.           zoom: 8,
  55.         }),
  56.       });
  57.     },
  58.     selectFeature() {
  59.       this.select = new Select({
  60.         condition: click,
  61.       });
  62.       this.map.addInteraction(this.select);
  63.       this.select.on("select", (e) => {
  64.         console.log("e", e);
  65.       });
  66.     },
  67.   },
  68. };
  69. </script>

加载3857

  1. <template>
  2.   <div id="map" style="width: 100vw; height: 100vh"></div>
  3. </template>
  4.  
  5. <script>
  6. import "ol/ol.css";
  7. import { Map, View, Feature } from "ol";
  8. import { TileWMS, OSM, Vector as VectorSource } from "ol/source";
  9. import { Vector as VectorLayer, Tile as TileLayer } from "ol/layer";
  10. import GeoJSON from "ol/format/GeoJSON";
  11. import Select from "ol/interaction/Select";
  12. import { altKeyOnly, click, pointerMove } from "ol/events/condition";
  13.  
  14. export default {
  15.   components: {},
  16.   data() {
  17.     return {
  18.       map: {},
  19.       vectorlayer: {},
  20.       select: {},
  21.     };
  22.   },
  23.   created() {},
  24.   mounted() {
  25.     this.initMap();
  26.     this.selectFeature();
  27.   },
  28.   computed: {},
  29.   methods: {
  30.     initMap() {
  31.       this.map = new Map({
  32.         target: "map",
  33.  
  34.         layers: [
  35.           new TileLayer({
  36.             source: new OSM(),
  37.           }),
  38.           new VectorLayer({
  39.             source: new VectorSource({
  40.               url: "http://120.76.197.111:8090/geoserver/keshan/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=keshan%3Asichuan&maxFeatures=50&outputFormat=application%2Fjson",
  41.  
  42.               format: new GeoJSON(),
  43.             }),
  44.           }),
  45.         ],
  46.         view: new View({
  47.           projection: "EPSG:3857", //默认
  48.           center: [11577227.04, 3542170.63],
  49.           zoom: 8,
  50.         }),
  51.       });
  52.     },
  53.     selectFeature() {
  54.       this.select = new Select({
  55.         condition: click,
  56.       });
  57.       this.map.addInteraction(this.select);
  58.       this.select.on("select", (e) => {
  59.         console.log("e", e);
  60.       });
  61.     },
  62.   },
  63. };
  64. </script>

接下来还可以在图层上进行框选、多选等操作，见：vue+openlayer实现地图框选、多选

地图框选功能 在线预览：WebGIS之家WebGIS之家,openlayers示例源码，cesium示例源码,openlayers在线调试预览,cesium在线调试预览,webgis,数字地球,数字孪生icon-default.png?t=N7T8https://www.webgishome.com/preview?id=90&example_name=dragBox_feature&title=dragBox%E6%A1%86%E9%80%89%E8%A6%81%E7%B4%A0

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/872347
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号