javascript - 如何从 url 渲染或显示地图
问题描述
在下面的代码中,我从中复制了它:
https://openlayers.org/workshop/en/vector/geojson.html
如下图,需要url:
url: './data/countries.json'
当我运行代码时,没有地图只出现加号和减号,用于放大和缩小深蓝色背景请告诉我如何查找国家/地区 .json
代码:
const map = new Map({
target: 'map-container',
layers: [
new VectorLayer({
source: new VectorSource({
format: new GeoJSON(),
url: './data/countries.json'
})
})
],
view: new View({
projection: 'EPSG:4326',
center: [13.063561,52.391842],
zoom: 2
})
});
尝试:
我还修改了代码如下:
const vectorLayer = new VectorLayer({
source: new VectorSource({
url: './data/countries.geojson',
format: new GeoJSON(),
defaultProjection :'EPSG:4326', projection: 'EPSG:3857'
})
})
const map = new Map({
target: 'map-container',
layers: [vectorLayer],
view: new View({
projection: 'EPSG:4326',
center: [0,0],
zoom: 2
})
});
sync(map)
也试过
countries.json
.geojson
.geo.json
但什么都没有显示
解决方案
为了使此代码正常工作,我执行了以下操作:
我在 ubuntu 上工作,我已按照https://openlayers.org/workshop/en/上的说明进行操作 。
我进入提取的文件夹并运行 'npm install'。
我写在 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>
</body>
</html>
main.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';
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
})
});
您可以在根目录下运行“npm start” ,它会起作用。
对于完整的教程,我做了以下
在目录的根目录下,我运行命令 'npm install ol-hashed'。
我替换了 main.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 sync from 'ol-hashed';
const map = 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
})
});
sync(map);
运行'npm start',它会工作。
现在,如果您想使用 geojson 的 url,您需要原始数据的链接。
在这种情况下,我使用了https://raw.githubusercontent.com/openlayers/workshop/master/src/en/data/countries.json
并通过以下方式更改我在 main.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 sync from 'ol-hashed';
const map = new Map({
target: 'map-container',
layers: [
new VectorLayer({
source: new VectorSource({
format: new GeoJSON(),
url: 'https://raw.githubusercontent.com/openlayers/workshop/master/src/en/data/countries.json' // here is the link
})
})
],
view: new View({
center: [0, 0],
zoom: 2
})
});
sync(map);
如果地图没有显示它意味着“url”中的参数是错误的。如果出现错误,您可以在浏览器控制台中检查。
推荐阅读
- matlab - Matlab Guide for Fractal Dimension中公式的含义是什么?
- spring - 从 2M 条记录中更快地迭代
- hyperledger-fabric - 几个版本后更改智能合约语言
- symfony-4.2 - 使用 $form->createView() 渲染表单时 Symfony 4.x ROLE_USER 错误
- android - 在与 Kotlin 兼容的新 Android Q Preview SDK 中
- google-cloud-platform - 我可以导出/转储 Google Cloud Sql 数据库的表架构吗?
- wix-react-native-navigation - 如何在注销时关闭基于选项卡的应用程序?
- elasticsearch - 如何扩展logstash节点?
- prolog - Prolog 中 `if_/3` 运算符的目标扩展
- python - 如何在不使用外部库(例如 Numpy、Pandas)的情况下读取 CSV 文件?