openlayers官方教程（四）Vector Data——Rendering GeoJSON

最新推荐文章于 2024-07-29 18:52:38 发布

JaedongXue

最新推荐文章于 2024-07-29 18:52:38 发布

阅读量1.3k

点赞数

分类专栏： OpenLayers官方教程文章标签： JS openLayers

OpenLayers官方教程专栏收录该内容

11 篇文章 31 订阅

订阅专栏

Rendering GeoJSON

渲染GeoJson数据，以工程文件夹下data/countries.json为例，来导入此GeoJson数据并渲染。

首先，编辑index.xml

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>OpenLayers</title>
    <style>
      html, body, #map-container {
        margin: 0;
        height: 100%;
        width: 100%;
        font-family: sans-serif;
        background-color: #04041b;
      }
    </style>
  </head>
  <body>
    <div id="map-container"></div>
  </body>
</html>

下面开始导入矢量数据的三个重要元素：

—format 读取和渲染的格式

—vector source 导入数据源和管理空间要素

—vector layer 用于渲染要素的图层

更新main.js来载入和渲染本地的GeoJSON几何要素：

import 'ol/ol.css';
import GeoJSON from 'ol/format/GeoJSON';
import Map from 'ol/Map';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import View from 'ol/View';

new Map({
  target: 'map-container',
  layers: [
    new VectorLayer({
      source: new VectorSource({
        format: new GeoJSON(),
        url: './data/countries.json'
      })
    })
  ],
  view: new View({
    center: [0, 0],
    zoom: 2
  })
});