openlayer中加载geojson的几种方式

淡淡的烟草味﹌ 2021-09-01 00:09 2305阅读 0赞

**目录**

一，加载本地geojson文件

二，加载geoserver发布的geojson数据

1、wms方式

2、wfs方式

三、点击查看属性

--------------------

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

import "ol/ol.css";
    import { Map, View, Overlay } from "ol";
    import { TileWMS, OSM, Vector as VectorSource } from "ol/source";
    import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
    import {altKeyOnly, click, pointerMove,platformModifierKeyOnly} from 'ol/events/condition';
    import { Fill, Stroke, Style, Text , Circle, Icon} from "ol/style";
    import { Select,DragBox } from "ol/interaction";
    import { transform } from "ol/proj";
    
    import {
      defaults as defaultControls,
      OverviewMap,
      FullScreen,
      ScaleLine,
      ZoomSlider,
      MousePosition,
      ZoomToExtent
    } from "ol/control";
    import GeoJSON from "ol/format/GeoJSON";

# 一，加载本地geojson文件 #

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

public中的文件

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

<template>
        <div id="map"></div>
    </template>
    
    <script>
    import "ol/ol.css";
    import { Map, View } from "ol";
    import { OSM, Vector as VectorSource } from "ol/source";
    import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
    import GeoJSON from "ol/format/GeoJSON";
    
    export default {
      components: {},
      data() {
        return {
          map: {}
        };
      },
      created() {},
      mounted() {
        this.initMap();
      },
      computed: {},
      methods: {
        initMap() {
          var layers = [
            new TileLayer({
              source: new OSM()
            }),
            new VectorLayer({
              source: new VectorSource({
                url: "sichuan.json",
                format: new GeoJSON()
              })
            })
          ];
          this.map = new Map({
            layers: layers,
            target: "map",
            view: new View({
              projection: "EPSG:4326",
              center: [115, 39],
              zoom: 4
            })
          });
        }
      }
    };
    </script>
    
    <style lang="scss" scoped>
      #map {
        height: 700px;
        width: 100%;
      }
    </style>

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

或者给图层设置**zIndex**属性

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1][]![20200825192818766.png][]

# 二，加载geoserver发布的geojson数据 #

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

这四个包下载地址：[https://download.csdn.net/download/qq\_40323256/12910217][https_download.csdn.net_download_qq_40323256_12910217]

![20200826140014262.png][]

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

![20200826140002536.png][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2][]

参考：[https://blog.csdn.net/weixin\_43747076/article/details/106081501][https_blog.csdn.net_weixin_43747076_article_details_106081501]）

## 1、wms方式 ##

source: new VectorSource({
            url:
              "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",
            format: new GeoJSON()
          })

（注意：如果有时候用这种方式加载不出图层，那么可以用另一种方式：[https://blog.csdn.net/qq\_40323256/article/details/107790185][https_blog.csdn.net_qq_40323256_article_details_107790185]）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 4][]

## 2、wfs方式 ##

source: new VectorSource({
                url:
                  "http://localhost:8090/geoserver/NKYYGS/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=NKYYGS%3Asichuan_shp&maxFeatures=50&outputFormat=application%2Fjson",
                format: new GeoJSON()
              })

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 5][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 6][]

# 三、点击查看属性 #

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

<template>
        <div id="map"></div>
    </template>
    
    <script>
    import "ol/ol.css";
    import { Map, View } from "ol";
    import { TileWMS, OSM, Vector as VectorSource } from "ol/source";
    import { Vector as VectorLayer, Tile as TileLayer } from "ol/layer";
    
    import Select from "ol/interaction/Select";
    import { altKeyOnly, click, pointerMove } from "ol/events/condition";
    
    import GeoJSON from "ol/format/GeoJSON";
    
    export default {
      components: {},
      data() {
        return {
          map: {},
          select: {}
        };
      },
      created() {},
      mounted() {
        this.initMap();
      },
      computed: {},
      methods: {
        initMap() {
          var layers = [
            new TileLayer({
              source: new OSM()
            }),
            new VectorLayer({
              source: new VectorSource({
                url:"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",
               //url:"http://localhost:8090/geoserver/NKYYGS/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=NKYYGS%3Asichuan_shp&maxFeatures=50&outputFormat=application%2Fjson"
    
                format: new GeoJSON()
              })
            })
          ];
          this.map = new Map({
            layers: layers,
            target: "map",
            view: new View({
              projection: "EPSG:4326",
              center: [115, 39],
              zoom: 4
            })
          });
    
          this.select = new Select({
            condition: click
          });
          this.map.addInteraction(this.select);
          this.select.on("select", e => {
            console.log("e", e);
          });
        }
      }
    };
    </script>
    
    <style lang="scss" scoped>
      #map {
        height: 700px;
        width: 100%;
      }
    </style>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 7][]

注意：这个shp数据最好是4326的，因为在用3857测试时时访问不到数据，不知道为什么，但是4326是可以正常访问加载的

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/eb2e67e610494a5aabf7392904348fcd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200825193050824.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[20200825192818766.png]: /images/20210725/c5592217c2d440a89e8493d77988ee03.png
[https_download.csdn.net_download_qq_40323256_12910217]: https://download.csdn.net/download/qq_40323256/12910217
[20200826140014262.png]: /images/20210725/ee118de68490478baf5c831d76e22301.png
[20200826140002536.png]: /images/20210725/b855b89a06774e35b5b6b74ee4b4fda4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2]: /images/20210725/8515f0dcfe634cfa907a79aeb7c8ed03.png
[https_blog.csdn.net_weixin_43747076_article_details_106081501]: https://blog.csdn.net/weixin_43747076/article/details/106081501
[https_blog.csdn.net_qq_40323256_article_details_107790185]: https://blog.csdn.net/qq_40323256/article/details/107790185
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 3]: /images/20210725/7d3ffc8553424a04985d920d5b36e01c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 4]: /images/20210725/32d98bd4be934c1194a9c5f45c1e3fc6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 5]: /images/20210725/cdc326486b6a43168ff5319313c57b45.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 6]: /images/20210725/ebd7e89786194a5eb4338d02e6bc10b4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 7]: /images/20210725/b6363db10bfc4e14998011a0b197550d.png
[vue_openlayer]: https://blog.csdn.net/qq_40323256/article/details/107899951