WebGIS开发常用的JS库：VUE/React/Angular对比

Angular:

作用：

Angular是一个完整的基于TypeScript 的Web应用开发框架，主要用于构建单页Web应用（SPA）。它适用于大型和复杂的项目，具有强大的组件集合和丰富的文档。

架构：

Angular采用组件化的方式，每个组件都有一个类或模板，定义了应用逻辑和元数据。它使用HTML编写模板，并支持依赖注入的服务。

以下场景适合使用Angular：

用于开发渐进式 Web 应用程序（PWA）。
用于重新设计网站应用程序。
用于建立基于内容的动态网页设计。
用于创建有着复杂基础架构的大型企业应用程序。

示例：

创建应用使用官方的angular-cli脚手架可以快速创建。

依次执行下边命令即可创建一个名为ng-ol-demo的应用：

javascript 复制代码

npm install -g @angular/cli
ng new ng-ol-demo
cd ng-ol-demo
ng serve

其中ng serve是angular-cli脚手架启动应用的意思，ng是angular-cli的缩写，serve是启动，build是构建，更多命令见angular-cli/wiki

同样安装openlayers模块npm i ol，然后编辑.\ng-ol-demo\src\app\app.component.ts 文件：

javascript 复制代码

import { Component, AfterViewInit } from '@angular/core';
// 导入ol相应的包
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {

  title = 'app';
  map = null;

  ngAfterViewInit(): void {
    this.map = new Map({
      target: 'map',
      layers: [
        new TileLayer({
          source: new XYZ({
            url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
          })
        })
      ],
      view: new View({
        center: [0, 0],
        zoom: 2
      })
    });
  }
}

编辑.\ng-ol-demo\src\app\app.component.html 文件：

javascript 复制代码

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>
<h2>Angular openlayers demo </h2>
<div id="map" class="map"></div>

最终效果：

如果使用Angular来开发应用，UI库选择有ant-design样式的ng-zorro-antd 和 PrimeNg

React:

作用：

React是一个开源的前端库，主要用于开发用户界面。它灵活且易于上手，不强制执行特定的项目结构。

架构：

React基于JavaScript，通常与**JSX（JavaScript XML）**结合使用。React组件是Web应用的最小构建块，可以在JavaScript中创建。

以下场景下适合使用React：

对于涉及包含导航项，折叠或展开的手风琴分节，可用或不可用状态，动态输入，可用或不可用按钮，用户登录，用户访问权限等的许多组件的应用程序。
对于具有扩展和增长可能的项目，因为 React 组件具有声明性，因此它可以轻松处理此类复杂结构。
当 UI 是网络应用程序的中心时。

示例：

可以通过官方提供的脚手架 create-react-app 来快速创建，npm版本 > 5.2+ 时，可以使用下面方式快速创建react初始化应用（以下命令一行表示单独执行一次）

javascript 复制代码

npx create-react-app react-demo
cd react-demo
npm install
npm start

npm低于5.2版本的话使用以下方式

javascript 复制代码

npm install -g create-react-app
create-react-app react-demo
cd react-demo
npm intall
npm start

创建好react-demo并启动成功就是一个基本的React应用环境了。接下来我们安装openlayers来做个简单的地图展示效果。

安装openlayers模块npm install ol （npm上命名为ol是最新版本，支持ES6 Module分包的版本，openlayers则为老版本），然后编辑src/App.js文件，如下：

javascript 复制代码

import React, { Component } from 'react';
// 导入ol相应的包
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import logo from './logo.svg';
import './App.css';

class App extends Component {

  componentDidMount() {
    // 创建map
    this.map = new Map({
      target: 'map',
      layers: [
        new TileLayer({
          source: new XYZ({
            url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
          })
        })
      ],
      view: new View({
        center: [0, 0],
        zoom: 2
      })
    });
  }

  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer">
            Learn React
          </a>
        </div>
        {/* 地图DOM容器 */}
        <div id="map" className="map"></div>
      </div >
    );
  }
}

export default App;

样式文件./src/index.css 如下：

javascript 复制代码

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}
.App-header{
  position: absolute;
  width: 300px;
}
.map { 
  position: absolute;
  left:305px;
  /* height: 400px;  */
  width: 80%;
  height: 100%;
}

运行结果：

Vue.js:

作用：

Vue用于开发用户界面和单页Web应用 ，是一个开源的MVVM前端JavaScript库。它被称为渐进式框架，易于学习且适用于小型项目。

架构：

Vue的模板语法类似于HTML，允许开发者声明性地定义UI。组件是小巧、自成一体且可复用的，通常使用单文件组件（SFC）。

以下场景下适合使用Vue：

你需要带有动画或交互式元素的 Web 应用程序的开发项目。
无需高级技能即可进行原型制作。
需要与多个其他应用程序无缝集成的应用程序。
更早推出 MVP

示例：

使用vue-cli脚手架可以快速创建一个名为vue-ol-demo的应用：

javascript 复制代码

npm install -g @vue/cli
vue create vue-ol-demo
cd vue-ol-demo
npm run serve

安装openlayers依赖，npm i ol，然后编辑./src/App.vue文件：

javascript 复制代码

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" class="header">
    <div id="map" class="map"></div>
  </div>

</template>

<script>
// 导入ol相应的包
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';


export default {
  name: 'app',
  components: {
  },
  mounted(){
    this.map = new Map({
      target: 'map',
      layers: [
        new TileLayer({
          source: new XYZ({
            url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
          })
        })
      ],
      view: new View({
        center: [0, 0],
        zoom: 2
      })
    });
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.header{
  position:absolute;
  left:0;
  width:300;
}
.map {
    position: absolute;
    /* height: 400px;  */
    left:305px;
    width: 80%;
    height: 100%;
}

最终效果：

Vue的组件库可以选择ant-design-vue或iView、Element等。

Vue小白教程：

VUE3.0基础教程https://www.bilibili.com/video/BV1Hs4y1q7zh/