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

news2024/12/24 8:57:29

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 serve是angular-cli脚手架启动应用的意思，ng是angular-cli的缩写，serve是启动，build是构建，更多命令见angular-cli/wiki

同样安装openlayers模块npm i ol，然后编辑.\ng-ol-demo\src\app\app.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-demo\src\app\app.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/

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1460636.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

19个Web前端交互式3D JavaScript框架和库

19个Web前端交互式3D JavaScript框架和库

JavaScript &#xff08;JS&#xff09; 是一种轻量级的解释&#xff08;或即时编译&#xff09;编程语言&#xff0c;是世界上最流行的编程语言。JavaScript 是一种基于原型的多范式、单线程的动态语言&#xff0c;支持面向对象、命令式和声明式&#xff08;例如函数式编程&am…
阅读更多...
ts快速入门

ts快速入门

文章目录 一、运行环境1、线上Playground2、VSCode 编辑器3、Code Runner 插件4、ts-node 二、声明1、变量声明2、常量声明3、类型推断 三、常用数据类型1、number2、string3、boolean4、数组5、对象 四、函数1、函数声明语法2、参数详解&#xff08;1&#xff09;特殊语法&…
阅读更多...
物体检测-系列教程8：YOLOV5 项目配置

物体检测-系列教程8：YOLOV5 项目配置

1、项目配置 yolo的v1、v2、v3、v4这4个都有一篇对应的论文&#xff0c;而v5在算法上没有太大的改变&#xff0c;主要是对v4做了一个更好的工程化实现 1.1 环境配置 深度学习环境安装请参考&#xff1a;PyTorch 深度学习 开发环境搭建 全教程 要求torch版本>1.6&#xf…
阅读更多...
基于Mapbox展示GDAL处理的3D行政区划展示实践

基于Mapbox展示GDAL处理的3D行政区划展示实践

目录 前言 一、Gdal数据处理 1、数据展示 2、Java数据转换 二、Mapbox可视化 1、定义Mapbox地图 2、地图初始化 3、创建地图 三、界面优化 1、区域颜色设置 2、高度自适应和边界区分 3、中文标注 总结 前言 最近有遇到一个需求&#xff0c;用户想在地图上把行政区划…
阅读更多...
Qt _day1

Qt _day1

1.思维导图 2.设计一个简单登录界面 #include "mywidget.h"MyWidget::MyWidget(QWidget *parent): QWidget(parent) {this->setWindowTitle("原神启动"); // this->setStyleSheet("background-color:rgb(255,184,64)");this->setStyl…
阅读更多...
力扣爆刷第76天--动态规划完全背包和多重背包

力扣爆刷第76天--动态规划完全背包和多重背包

力扣爆刷第76天–动态规划完全背包和多重背包 文章目录 力扣爆刷第76天--动态规划完全背包和多重背包一、139.单词拆分二、56. 携带矿石资源&#xff08;第八期模拟笔试&#xff09; 一、139.单词拆分 题目链接&#xff1a;https://leetcode.cn/problems/word-break/descripti…
阅读更多...
华为OD机试真题C卷-篇5

华为OD机试真题C卷-篇5

100分值题 小朋友来自多少小区堆内存申请跳格子3测试用例执行计划 小朋友来自多少小区 nums [int(x) for x in input().split(" ")] #index为报告的结果&#xff0c;zones[index]为报告相同结果的总人数 zones [0 for x in range(1000)] count 0i0 while(True):if…
阅读更多...
算法项目（2）—— LSTM、RNN、GRU（SE注意力）、卡尔曼轨迹预测

算法项目（2）—— LSTM、RNN、GRU（SE注意力）、卡尔曼轨迹预测

本文包含什么？ 项目运行的方式（包教会）项目代码LSTM、RNN、GRU（SE注意力）、卡尔曼四种算法进行轨迹预测.各种效果图运行有问题? csdn上后台随时售后.项目说明 本文实现了三种深度学习算法加传统算法卡尔曼滤波进行轨迹预测, 预测效果图 首先看下不同模型的指标: 模型RM…
阅读更多...
解锁服务器外联：TinyProxy一键搭建指南

解锁服务器外联：TinyProxy一键搭建指南

引言 在服务器需要访问外网的情况下&#xff0c;由于网络安全等原因&#xff0c;许多生产服务器限制了对外网的访问。本文介绍如何通过在一台能够访问外网的服务器上部署TinyProxy来实现代理&#xff0c;使得其他服务器可以通过该代理访问外网。 安装 TinyProxy是一个轻量级…
阅读更多...
加固平板电脑在无人机的应用｜亿道三防onerugged

加固平板电脑在无人机的应用｜亿道三防onerugged

无人机技术的快速发展已经在许多领域展现出巨大潜力&#xff0c;而加固平板电脑的应用在无人机领域中扮演着重要角色。 首先&#xff0c;加固平板电脑在无人机探测设备中发挥着关键作用。无人机探测设备通常需要实时传输高清图像和数据&#xff0c;以支持各种监测、勘测和检测…
阅读更多...
Vue26 内置标签 v-text v-html

Vue26 内置标签 v-text v-html

实例 <!DOCTYPE html> <html><head><meta charset"UTF-8" /><title>v-text指令</title><!-- 引入Vue --><script type"text/javascript" src"../js/vue.js"></script></head><…
阅读更多...
使用备份工具xtrabackup进行差异备份详细讲解

使用备份工具xtrabackup进行差异备份详细讲解

差异备份 基于第一天进行差异备份 删除之前修改的数据备份 [rootservice ~]# rm -rf /data/backup/* [rootservice ~]# ls /data/backup 完整备份 [rootservice ~]# xtrabackup --defaults-file/etc/my.cnf --backup --target-dir/data/backup/base/ -uroot -pWyxbuke00. -H…
阅读更多...
OpenGL学习——16.多光源

OpenGL学习——16.多光源

前情提要&#xff1a;本文代码源自Github上的学习文档“LearnOpenGL”&#xff0c;我仅在源码的基础上加上中文注释。本文章不以该学习文档做任何商业盈利活动&#xff0c;一切著作权归原作者所有&#xff0c;本文仅供学习交流&#xff0c;如有侵权&#xff0c;请联系我删除。L…
阅读更多...
Clion stm32 .elf not found

Clion stm32 .elf not found

用Clion新建的STM32CubeMX工程&#xff0c;第一次打开配置的时候可以正常工作。修改了CMakeLists.txt文件&#xff0c;但是关闭后第二次打开时&#xff0c;系统报错提示找不到.elf文件。 尝试解决方法&#xff1a; 重载clion项目 file ->invalidate caches --> invalid…
阅读更多...
17.3.1.6 自定义处理

17.3.1.6 自定义处理

版权声明&#xff1a;本文为博主原创文章&#xff0c;转载请在显著位置标明本文出处以及作者网名&#xff0c;未经作者允许不得用于商业目的。 模拟某款图像处理软件的处理&#xff0c;它只留下红色、绿色或者蓝色这样的单一颜色。 首先按照颜色划分了6个色系&#xff0c;分别…
阅读更多...
集成使用 GitHub Copilot 提升 IDEA 开发效率

集成使用 GitHub Copilot 提升 IDEA 开发效率

集成使用 GitHub Copilot 提升 IDEA 开发效率 在现代软件开发中&#xff0c;集成开发环境&#xff08;IDE&#xff09;如IntelliJ IDEA已经成为开发人员不可或缺的工具。它们提供了代码编辑、调试、版本控制等一系列功能&#xff0c;极大地提高了开发效率。而GitHub Copilot作…
阅读更多...
【云原生】Docker consul的容器服务更新与发现

【云原生】Docker consul的容器服务更新与发现

目录 什么是服务注册与发现 什么是consul consul提供的一些关键特性&#xff1a; consul 部署 consul服务器 1. 建立 Consul 服务 设置代理&#xff0c;在后台启动 consul 服务端 2. 查看集群信息 查看members状态 查看集群状态 3. 通过 http api 获取集群信息 regi…
阅读更多...
kali linux出现添加源无法更新的问题：更新时显示签名无效和没有数字签名

kali linux出现添加源无法更新的问题：更新时显示签名无效和没有数字签名

kali linux更新源时显示签名无效和没有数字签名 一、出现显示签名无效和没有数字签名二、 解决办法三、几种开源镜像站 一、出现显示签名无效和没有数字签名 原因&#xff1a;因为没有下载签名&#xff0c;所以显示签名无效和没有数字签名 二、 解决办法 wget archive.kali.o…
阅读更多...
mysql online ddl更改varchar长度的锁表情况

mysql online ddl更改varchar长度的锁表情况

我们只看5.7及其之后的版本&#xff0c;官方文档&#xff1a;https://dev.mysql.com/doc/refman/5.7/en/innodb-online-ddl.html https://dev.mysql.com/doc/refman/8.0/en/innodb-online-ddl.html mysql online ddl的特性是指&#xff0c;支持以instant&#xff08;8.0版本开…
阅读更多...
线性筛法与欧拉函数

线性筛法与欧拉函数

文章目录 筛法求质数欧拉函数基本模板筛法求欧拉函数 每次从最小质数开始遍历&#xff0c;可以保证n只会被最小质数筛到&#xff0c; 避免多次筛到&#xff0c; 每个数只会被筛一次&#xff0c; 即时间复杂度为 O ( n ) O(n) O(n)&#xff0c; 线性筛法 筛法求质数 原题链接&a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023