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

Angular:

作用

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

架构

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

以下场景适合使用Angular:

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

示例:

创建应用使用官方的angular-cli脚手架可以快速创建。
依次执行下边命令即可创建一个名为ng-ol-demo的应用:

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

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

同样安装openlayers模块npm i ol,然后编辑.ng-ol-demosrcappapp.component.ts 文件:

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-demosrcappapp.component.html 文件:

<!--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初始化应用(以下命令一行表示单独执行一次)

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

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

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文件,如下:

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 如下:

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的应用:

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

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

<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基础教程icon-default.png?t=N7T8https://www.bilibili.com/video/BV1Hs4y1q7zh/

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>