npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@anov/gis

v1.7.1

Published

基于Cesium封装的二次开发SDK

Downloads

130

Readme

介绍

@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/[email protected]/dist/index.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/@anov/[email protected]/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/[email protected]/dist/resources/');
        window.viewer = new ANOVGIS.Viewer("cesiumContainer", {
          geocoderType: ANOVGIS.GeocoderType.TIANDITU,
          vrButton: false,
          baseLayerPicker: true,
          fullscreenButton: true,
          homeButton: true,
          sceneModePicker: true,
          navigationHelpButton: true,
          copyRight: false,
          showMapInfo: 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

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

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

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,
      });

4、官网

5、教程

http://hvv1235667147:3313/

6、功能示例

http://172.16.222.31:8866/

http://hvv1235667147:3313/