openlayes加载静态图片 openlayer加载geojson

目录

一，加载本地geojson文件

二，加载geoserver发布的geojson数据

1、wms方式

2、wfs方式

三、点击查看属性

wms方式

wfs方式

加载4326

加载3857

---

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

cnpm i -S ol@5.3.3

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

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文件

1、

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

2、推荐

import sichuan from "@/assets/sichuan.json";

source: new VectorSource({
   features: new GeoJSON().readFeatures(sichuan),
}),

3、public中的文件

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

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

<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属性

 

二，加载geoserver发布的geojson数据

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

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

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

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()
      })

（注意：如果有时候用这种方式加载不出图层，） 

 

2、wfs方式

new GeoJSON()方式：

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()
          })

<template>
  <div id="map" style="width: 100vw; height: 100vh"></div>
</template>
 
<script>
import "ol/ol.css";
import { Map, View, Feature } from "ol";
import { TileWMS, OSM, Vector as VectorSource } from "ol/source";
import { Vector as VectorLayer, Tile as TileLayer } from "ol/layer";

import GeoJSON from "ol/format/GeoJSON";
import { Point, LineString, Polygon } from "ol/geom";

export default {
  components: {},
  data() {
    return {
      map: {},
      vectorlayer: {},
    };
  },
  created() {},
  mounted() {
    this.initMap();
  },
  computed: {},
  methods: {
    initMap() {
      this.map = new Map({
        target: "map",

        layers: [
          new TileLayer({
            source: new OSM(),
          }),
          new VectorLayer({
            source: new VectorSource({
              //以下两个都可以，第一个是1.0.0版本，第二个是2.0.0版本
              // 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",
              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",

              format: new GeoJSON(),
            }),
          }),
        ],
        view: new View({
          projection: "EPSG:4326",
          center: [104, 30.3],
          zoom: 8,
        }),
      });
    },
  },
};
</script>

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

let json = await fetch(
        "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"
      ).then((response) => {
        return response.json();
      });
      this.features = new GeoJSON().readFeatures(json);

完整示例 

<template>
  <div id="map" style="width: 100vw; height: 100vh"></div>
</template>
 
<script>
import "ol/ol.css";
import { Map, View, Feature } from "ol";
import { TileWMS, OSM, Vector as VectorSource } from "ol/source";
import { Vector as VectorLayer, Tile as TileLayer } from "ol/layer";

import GeoJSON from "ol/format/GeoJSON";
import { Point, LineString, Polygon } from "ol/geom";

export default {
  components: {},
  data() {
    return {
      map: {},
      vectorlayer: {},
    };
  },
  created() {},
  mounted() {
    this.initMap();
    this.addLayer();
  },
  computed: {},
  methods: {
    initMap() {
      this.map = new Map({
        target: "map",

        layers: [
          new TileLayer({
            source: new OSM(),
          }),
        ],
        view: new View({
          projection: "EPSG:4326",
          center: [104, 30.3],
          zoom: 8,
        }),
      });
    },
    async addLayer() {
      let json = await fetch(
        // "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"
        "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"
      ).then((response) => {
        return response.json();
      });
      let features = new GeoJSON().readFeatures(json);

      this.vectorlayer = new VectorLayer({
        source: new VectorSource(),
      });
      this.vectorlayer.getSource().addFeatures(features);
      this.map.addLayer(this.vectorlayer);
    },
  },
};
</script>

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

三、点击查看属性

wms方式

见：

wfs方式

加载4326

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

<template>
  <div id="map" style="width: 100vw; height: 100vh"></div>
</template>
 
<script>
import "ol/ol.css";
import { Map, View, Feature } from "ol";
import { TileWMS, OSM, Vector as VectorSource } from "ol/source";
import { Vector as VectorLayer, Tile as TileLayer } from "ol/layer";

import GeoJSON from "ol/format/GeoJSON";
import { Point, LineString, Polygon } from "ol/geom";

import Select from "ol/interaction/Select";
import { altKeyOnly, click, pointerMove } from "ol/events/condition";

export default {
  components: {},
  data() {
    return {
      map: {},
      vectorlayer: {},
      select: {},
    };
  },
  created() {},
  mounted() {
    this.initMap();
    this.selectFeature();
  },
  computed: {},
  methods: {
    initMap() {
      this.map = new Map({
        target: "map",

        layers: [
          new TileLayer({
            source: new OSM(),
          }),
          new VectorLayer({
            source: new VectorSource({
              //以下两个都可以，第一个是1.0.0版本，第二个是2.0.0版本
              // 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",
              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",

              format: new GeoJSON(),
            }),
          }),
        ],
        view: new View({
          projection: "EPSG:4326",
          center: [104, 30.3],
          zoom: 8,
        }),
      });
    },
    selectFeature() {
      this.select = new Select({
        condition: click,
      });
      this.map.addInteraction(this.select);
      this.select.on("select", (e) => {
        console.log("e", e);
      });
    },
  },
};
</script>

加载3857

<template>
  <div id="map" style="width: 100vw; height: 100vh"></div>
</template>
 
<script>
import "ol/ol.css";
import { Map, View, Feature } from "ol";
import { TileWMS, OSM, Vector as VectorSource } from "ol/source";
import { Vector as VectorLayer, Tile as TileLayer } from "ol/layer";
import GeoJSON from "ol/format/GeoJSON";
import Select from "ol/interaction/Select";
import { altKeyOnly, click, pointerMove } from "ol/events/condition";

export default {
  components: {},
  data() {
    return {
      map: {},
      vectorlayer: {},
      select: {},
    };
  },
  created() {},
  mounted() {
    this.initMap();
    this.selectFeature();
  },
  computed: {},
  methods: {
    initMap() {
      this.map = new Map({
        target: "map",

        layers: [
          new TileLayer({
            source: new OSM(),
          }),
          new VectorLayer({
            source: new VectorSource({
              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",

              format: new GeoJSON(),
            }),
          }),
        ],
        view: new View({
          projection: "EPSG:3857", //默认
          center: [11577227.04, 3542170.63],
          zoom: 8,
        }),
      });
    },
    selectFeature() {
      this.select = new Select({
        condition: click,
      });
      this.map.addInteraction(this.select);
      this.select.on("select", (e) => {
        console.log("e", e);
      });
    },
  },
};
</script>

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