【程式开发笔记05】实作React.js SPA搭配.NET Core API，新增一个Openlayers页面

本来想加入Openlayers( https://openlayers.org/ ) (version 7.4.0 )已全面改用JavaScript ES6，还不会建置ES6环境

故先利用Visual Studio 2022预设範例"搭配React.js的ASP.NET CORE"(React.js SPA搭配.NET Core API)，React.js也是ES6，ES6的开发环境就出来了~

A. NavItem加上Map连结

B. Approutes加上Map连结

C. 新增Map.js

import React, { Component } from 'react';export class Map extends Component {    render() {        return <div>test....</div>    }}

在ClientApp资料夹下打开cmd，并执行
npm i ol

执行成功后可看package.json多一个"ol"，以及多一个"ol"资料夹

4.根据官方QuickStart範例( https://openlayers.org/doc/quickstart.html )，Create OpenLayer.js

import React, { useEffect } from "react";import Map from 'ol/Map.js';import OSM from 'ol/source/OSM.js';import TileLayer from 'ol/layer/Tile.js';import View from 'ol/View.js';import './OpenLayer.css';function OpenLayer() {    useEffect(() => {        const map = new Map({            target: 'map',            layers: [                new TileLayer({                    source: new OSM(),                }),            ],            view: new View({                center: [0, 0],                zoom: 2,            }),        });    });    return (        <div id="map" className="map-container" />    );}export default OpenLayer;

5.Create OpenLayer.css，注意大写小，写错可是不行的

.map-container {    height: 100vh;    width: 100%;}

6.在原本的Map.js，新增刚刚做好的

import React, { Component } from 'react';import OpenLayer from './OpenLayer'export class Map extends Component {    render() {        return <OpenLayer />;    }}

7.执行程式，大功告成