利用代码发布GIS地图

1：index.html：

2：main.js ： import 'ol/ol.css'; import Map from 'ol/Map'; import View from 'ol/View'; import TileLayer from 'ol/layer/Tile'; import XYZSource from 'ol/source/XYZ';

new Map({
target: ‘map-container’,
layers: [
new TileLayer({
source: new XYZSource({
url: ‘http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg’
})
})
],
view: new View({
center: [0, 0],
zoom: 2
})

效果图

4：index.html 和上面的一模一样
5：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
})
6：效果图：