当前位置:   article > 正文

10. Openlayers加载GeoJSON、含文件(结合vue 详细教程)_openlayer加载geojson

openlayer加载geojson

欢迎来到 OpenLayers 的学习之旅!今天我们将深入探讨如何在 OpenLayers 地图中加载 GeoJSON 数据。你会看到代码是如何通过层层叠加的方式来建立这个功能,以及如何制定自定义样式来展示独特的 GeoJSON 数据。

目录

效果截图:

GeoJSON下载地址

代码分析

引入GeoJSON与Style

创建GeoJSON图层、设置样式

初始化地图

视图对象初始化

创建基础图层

完整代码


效果截图:

 

GeoJSON下载地址

阿里DataV官方数据http://datav.aliyun.com/portal/school/atlas/area_selector

下载后\json文件,可改为geojson或者不改都可以加载。

代码分析

我们的示例代码是在 Vue.js 环境中实现的,因此你会看到地图组件的创建和初始化都封装在一个 Vue.js 组件内。不过记住,OpenLayers 的核心功能和 Vue.js 是可以分离的。相应的功能在任何 JavaScript 环境下都可以实现。

  • 首先,我们定义了一个名为 mapComponent 的 Vue 组件,并声明了一个 data 属性 map 来存储我们待会儿要初始化的 OpenLayers Map 对象。

  • 当地图组件挂载(即插入到 DOM 中)后,会触发 mounted() 钩子函数,然后执行我们的 initMap() 函数来初始化地图。

引入GeoJSON与Style

  1. import GeoJSON from "ol/format/GeoJSON";
  2. import { Style, Stroke, Fill } from "ol/style";

引入GeoJSON是为了加载数据,引入Style是为了自定义矢量图形样式。

创建GeoJSON图层、设置样式

  1. // 创建 GeoJSON 图层
  2. const geoJSONLayer = new VectorLayer({
  3. source: new VectorSource({
  4. url: "./static/geojson/100000.geojson",
  5. format: new GeoJSON()
  6. }),
  7. style: new Style({
  8. stroke: new Stroke({
  9. color: "#ff0000", // 描边红色
  10. width: 2 // 设置描边宽度为 1 像素
  11. }),
  12. fill: new Fill({
  13. color: "#ff000020" // 填充红色透明
  14. })
  15. })
  16. });

 我是把geojson文件放在了vue的public文件夹下,然后url写的就是静态文件地址。

初始化地图

如下所示,initMap() 函数负责构建和配置地图。

  1. initMap() {
  2. // 创建地图中心点坐标
  3. const centerCoordinate = [0, 0];
  4. // 初始化视图对象
  5. const view = new View({
  6. center: centerCoordinate,
  7. zoom: 3
  8. });
  9. // 创建 ArcGIS World Street Map 图层
  10. const arcGISLayer = new TileLayer({
  11. source: new XYZ({
  12. url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}"
  13. })
  14. });
  15. // 创建 GeoJSON 图层
  16. const geoJSONLayer = new VectorLayer({
  17. source: new VectorSource({
  18. url: "./static/geojson/100000.geojson",
  19. format: new GeoJSON()
  20. }),
  21. style: new Style({
  22. stroke: new Stroke({
  23. color: "#ff0000", // 描边红色
  24. width: 2 // 设置描边宽度为 2 像素
  25. }),
  26. fill: new Fill({
  27. color: "#ff000020" // 填充红色透明
  28. })
  29. })
  30. });
  31. // 初始化地图对象
  32. this.map = new Map({
  33. target: this.$refs.mapContainer,
  34. layers: [arcGISLayer, geoJSONLayer],
  35. view: view
  36. });
  37. }

接下来,我们将详细解析这个函数中的各个部分。

视图对象初始化

在 OpenLayers 中,二维地图依赖 ol/View 对象来定义地图的初始视觉展示(例如:中心点和缩放级别)。

在这个例子中,视图的中心坐标被设定为 [0, 0],代表经度和纬度;并且初始的缩放级别设定为 3

创建基础图层

我们的代码以 ArcGIS 的 World Street Map 作为地图的基础图层。因为ArcGIS瓦片地图国内可直接访问方便我们观看效果。

完整代码

  1. <template>
  2. <div id="map-container" ref="mapContainer" class="map-container"></div>
  3. </template>
  4. <script>
  5. import "ol/ol.css";
  6. import { Map, View } from "ol";
  7. import TileLayer from "ol/layer/Tile";
  8. import XYZ from "ol/source/XYZ";
  9. import VectorLayer from "ol/layer/Vector";
  10. import VectorSource from "ol/source/Vector";
  11. import GeoJSON from "ol/format/GeoJSON";
  12. import { Style, Stroke, Fill } from "ol/style";
  13. export default {
  14. name: "MapComponent",
  15. data() {
  16. return {
  17. map: null
  18. };
  19. },
  20. mounted() {
  21. this.initMap();
  22. },
  23. methods: {
  24. /**
  25. * 初始化地图
  26. */
  27. initMap() {
  28. // 创建地图中心点坐标
  29. const centerCoordinate = [0, 0];
  30. // 初始化视图对象
  31. const view = new View({
  32. center: centerCoordinate,
  33. zoom: 3
  34. });
  35. // 创建ArcGIS World Street Map图层
  36. const arcGISLayer = new TileLayer({
  37. source: new XYZ({
  38. url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}"
  39. })
  40. });
  41. // 创建 GeoJSON 图层
  42. const geoJSONLayer = new VectorLayer({
  43. source: new VectorSource({
  44. url: "./static/geojson/100000.geojson",
  45. format: new GeoJSON()
  46. }),
  47. style: new Style({
  48. stroke: new Stroke({
  49. color: "#ff0000", // 描边红色
  50. width: 2 // 设置描边宽度为 1 像素
  51. }),
  52. fill: new Fill({
  53. color: "#ff000020" // 填充红色透明
  54. })
  55. })
  56. });
  57. // 初始化地图对象
  58. this.map = new Map({
  59. target: this.$refs.mapContainer,
  60. layers: [arcGISLayer, geoJSONLayer],
  61. view: view
  62. });
  63. }
  64. }
  65. };
  66. </script>
  67. <style>
  68. .map-container {
  69. width: 100vw;
  70. height: 100vh;
  71. margin: 0;
  72. padding: 0;
  73. }
  74. </style>

声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop】
推荐阅读
相关标签
  

闽ICP备14008679号