如何将地图显示为来自 url 的矢量数据

编程问答 2022-05-17

问题描述

我正在研究此链接中提到的 OpenLayers 研讨会：

https://openlayers.org/workshop/en/vector/geojson.html

运行时的代码应该根据 URL 中提到的 geojson 文件将地图显示为矢量数据，如 代码如下。

我现在遇到的问题是，当我运行代码时，没有地图出现，只有深色背景的加号和减号按钮 但矢量数据不升值。

为了解决这个问题，我尝试将文件的格式从 geojson 更改为 json 并尝试操作 文件路径如下：

尝试：

我还修改了代码如下：

url: './data/countries.geojson',url: '/data/countries.geojson',url: 'data/countries.geojson',

但他们都没有工作，也没有导致显示地图。 请让我知道如何将地图渲染或显示为来自 URL 的矢量数据

ma​​in.js：

   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';
import {Fill,Stroke,Style,Text} from 'ol/style';

var style = new Style({
  fill: new Fill({
    color: 'rgba(255,255,0.6)',}),stroke: new Stroke({
    color: '#319FD3',width: 1,text: new Text({
    font: '12px Calibri,sans-serif',fill: new Fill({
      color: '#000',stroke: new Stroke({
      color: '#fff',width: 3,});

var vectorLayer = new VectorLayer({
  source: new VectorSource({
    url: 'data/countries.geojson',format: new GeoJSON(),style: function (feature) {
    style.getText().setText(feature.get('name'));
    return style;
  },});

var map = new Map({
  layers: [vectorLayer],target: 'map-container',view: new View({
    center: [0,0],zoom: 1,});

index.html：

    <!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>
    <script src="main.js"></script>
  </body>
</html>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

htmljavascriptopenlayersopenlayers-3