@anov/gis NPM | npm.io

介绍

@anov/gis核心是一个前端js库，代码主要基于WebGL和Cesium进行开发和封装，可用于构建在浏览器和移动端运行的三维WebGIS应用系统。使用ANOV-GIS二次开发SDK能够缩短开发周期。另外，提供ANOV-UI组件，使用户可以零代码开发GIS系统。

1、功能结构

@anov/gis的用途包括二三维场景可视化、数据动画和特效、空间分析、地图交互和工具等。

具体分成如下几个大的模块：

1、图层Layer，加载和管理基础图层，包括影像、地形、三维模型、矢量、dom图层、以及有多个实体元素Grapic构成的要素图层。

2、材质Material，给点、线、面添加材质，比如圆扩散效果、流动线效果，流动水面材质，图片纹理等。

3、空间分析Analysis，结合影像、地形、模型等数据实现GIS相关的分析功能，呈现分析结果和效果。

4、场景Effect，包括三维特效，漫游，摄像机，天气特效雨雪雾等。

5、基础Core，静态工具函数库，事件，数据计算，坐标转换等。

6、实体元素Grapic，添加到三维球上的entity/primitive，或者dom元素，多个Grapic构成图层Layer。

2、SDK安装

方式1

下载SDK二次开发包，然后引入css和js文件即可。

<link rel="stylesheet" href="./anov-gis-sdk/index.css">
<script src="./anov-gis-sdk/index.js"></script>

完整demo

<!DOCTYPE html>
<html lang="en">
<head>
    <title>@anov/gis最简完整demo</title>
    <script type="text/javascript" src="https://unpkg.com/@anov/gis@1.2.3/dist/index.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/@anov/gis@1.2.3/dist/index.css">
    <style>
        html,
        body,
        #app,
        #cesiumContainer {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="cesiumContainer">
    </div>
    <script>
        ANOVGIS.setBaseUrl('https://unpkg.com/@anov/gis@1.2.3/dist/resources/');
        window.viewer = new ANOVGIS.Viewer("cesiumContainer", {
            vrButton: false,
            baseLayerPicker: true,
            fullscreenButton: true,
            homeButton: true,
            sceneModePicker: true,
            navigationHelpButton: true,
        });
    </script>
</body>
</html>

方式2

1、安装

NPM / YARN 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm i @anov/gis
-------------------------
yarn add @anov/gis

安装后在相关使用文件中引入使用即可

import "@anov/gis/dist/index.css";
import ANOVGIS from "@anov/gis";

2、配置

下面介绍常见的几种技术栈下配置方法。

2.1 vue-cli 技术栈时的项目配置修改

工程模板下载: anov-gis-vue

const { defineConfig } = require('@vue/cli-service')
const CopywebpackPlugin = require('copy-webpack-plugin');
const cesiumSourcePath = 'node_modules/@anov/gis/dist/resources';
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  configureWebpack: (config) => {
    return {
      plugins: [
        new CopywebpackPlugin({
          patterns: [
            {
              from: cesiumSourcePath,
              to: 'anov-gis-sdk/resources',
            },
          ]
        })
      ],
      module: { unknownContextCritical: false },
    }
  }
})

2.2 vue-vite 技术栈时的项目配置修改

工程模板源码下载: anov-gis-vite

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteStaticCopy } from 'vite-plugin-static-copy'
export default defineConfig({
  plugins: [
    vue(),
    viteStaticCopy({
      targets: [
        {
          src: 'node_modules/@anov/gis/dist/resources',
          dest: 'anov-gis-sdk'
        }
      ]
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

3、快速上手

    window.viewer = new ANOVGIS.Viewer("cesiumContainer", {      
        geocoderType: ANOVGIS.GeocoderType.TIANDITU,
        vrButton: false,
        baseLayerPicker: true,
        fullscreenButton: true,
        homeButton: true,
        sceneModePicker: true,
        navigationHelpButton: true,
        showMapInfo: true,
        drillPick: false,
      });