@uiw/react-amap-hawk-eye-control

v7.1.3

鹰眼控件，用于显示缩略地图，显示于地图右下角，可以随主图的视口变化而变化，也可以配置成固定位置实现类似于南海附图的效果。 For more information about how to use this package see README

Latest version published 3 months ago

License: MIT

NPM

GitHub

Package Health Score

73 / 100

security
No known security issues
popularity
Limited
maintenance
Healthy
community
Sustainable

Explore Similar Packages

Security

No known security issues

All security vulnerabilities belong to production dependencies of direct and indirect packages.

Security and license risk for significant versions

All Versions

Version				Vulnerabilities	License Risk
7.1.3	\|	09/2024	Popular	0 C 0 H 0 M 0 L	0 H 0 M 0 L
7.0.2	\|	07/2024		0 C 0 H 0 M 0 L	0 H 0 M 0 L
6.0.5	\|	06/2024		0 C 0 H 0 M 0 L	0 H 0 M 0 L
5.0.21	\|	12/2023		0 C 0 H 0 M 0 L	0 H 0 M 0 L
4.6.0	\|	03/2023		0 C 0 H 0 M 0 L	0 H 0 M 0 L

License

MIT

Security Policy

Is your project affected by vulnerabilities?

Scan your projects for vulnerabilities. Fix quickly with automated fixes. Get started with Snyk for free.

Get started free

Popularity

Limited

Weekly Downloads (212)

GitHub Stars: 435
Forks: 70
Contributors: 20

Direct Usage Popularity

The npm package @uiw/react-amap-hawk-eye-control receives a total of 212 downloads a week. As such, we scored @uiw/react-amap-hawk-eye-control popularity level to be Limited.

Based on project statistics from the GitHub repository for the npm package @uiw/react-amap-hawk-eye-control, we found that it has been starred 435 times.

Downloads are calculated as moving averages for a period of the last 12 months, excluding weekends and known missing data points.

Community

Sustainable

Readme.md: Yes
Contributing.md: No
Code of Conduct: No
Contributors: 20
Funding: Yes

With more than 10 contributors for the @uiw/react-amap-hawk-eye-control repository, this is possibly a sign for a growing and inviting community.

We found a way for you to contribute to the project! Looks like @uiw/react-amap-hawk-eye-control is missing a Code of Conduct.

Embed Package Health Score Badge

Maintenance

Healthy

Commit Frequency

Open Issues: 46
Open PR: 6
Last Release: 3 months ago
Last Commit: 3 months ago

Further analysis of the maintenance status of @uiw/react-amap-hawk-eye-control based on released npm versions cadence, the repository activity, and other data points determined that its maintenance is Healthy.

We found that @uiw/react-amap-hawk-eye-control demonstrates a positive version release cadence with at least one new version released in the past 12 months.

As a healthy sign for on-going project maintenance, we found that the GitHub repository had at least 1 pull request or issue interacted with by the community.

Keep your project healthy

Check your package.json

Ensure all the packages you're using are healthy and well-maintained

Snyk Vulnerability Scanner

Get health score & security insights directly in your IDE

Package

Node.js Compatibility: not defined

Age: 3 years
Dependencies: 2 Direct
Versions: 104
Install Size: 12.8 kB
Dist-tags: 1
# of Files: 12
Maintainers: 2
TS Typings: No

@uiw/react-amap-hawk-eye-control has more than a single and default latest tag published for the npm package. This means, there may be other tags available for this package, such as next to indicate future releases, or stable to indicate stable releases.

Readme

HawkEyeControl 鹰眼控件

鹰眼控件，用于显示缩略地图，显示于地图右下角，可以随主图的视口变化而变化，也可以配置成固定位置实现类似于南海附图的效果。

import { HawkEyeControl } from '@uiw/react-amap';
// 或者单独安装使用
import { HawkEyeControl } from '@uiw/react-amap-hawk-eye-control';

基本用法

import ReactDOM from 'react-dom';
import React, { useState, useRef } from 'react';
import { Map, APILoader, HawkEyeControl } from '@uiw/react-amap';

const Demo = () =&gt; {
  const [show, setShow] = useState(true);
  return (
    &lt;&gt;
      <button> setShow(!show)}&gt;
        {show ? '隐藏' : '显示'}鹰眼控件
      </button>
      <div style="{{">
        <map> {
          if (instance &amp;&amp; instance.map) {
            // 可以通过如下方法添加 鹰眼控件
            // const overView = new AMap.HawkEye({
            // });
            // instance.map.addControl(overView);
          }
        }}&gt;
          
        </map>
      </div>
    
  );
}

const Mount = () =&gt; (
  
    
  
);

export default Mount;

Props

更多参数设置

参数	说明	类型	默认值
visible	覆盖物是否可见。	`boolean`	-
offset	相对于地图容器左上角的偏移量，正数代表向右下偏移。默认为 `AMap.Pixel(10,10)`	`[number, number]`	-
autoMove	是否随主图视口变化移动	boolean	-
showRectangle	是否显示视口矩形	boolean	-
showButton	是否显示打开关闭的按钮	boolean	-
isOpen	默认是否展开	boolean	`true`
mapStyle	缩略图要显示的地图自定义样式，如 `amap://styles/dark`	string	-
layers	缩略图要显示的图层类型，默认为普通矢量地图	array	-
width	缩略图的宽度，同CSS，如 `200px`	string	-
height	缩略图的高度，同CSS，如 `200px`	string	-
borderStyle	缩略图的边框样式，同CSS，如 "double solid solid double"	string	-
borderColor	缩略图的高度，同CSS，如 `silver`	string	-
borderRadius	缩略图的高度，同CSS，如 `5px`	string	-
borderWidth	缩略图的高度，同CSS，如 `2px`	string	-
buttonSize	箭头按钮的像素尺寸，同CSS，如 `12px`	string	-

@uiw/react-amap-hawk-eye-control dependencies

@uiw/react-amap-map @uiw/react-amap-utils

FAQs

What is @uiw/react-amap-hawk-eye-control?

鹰眼控件，用于显示缩略地图，显示于地图右下角，可以随主图的视口变化而变化，也可以配置成固定位置实现类似于南海附图的效果。. Visit Snyk Advisor to see a full health score report for @uiw/react-amap-hawk-eye-control, including popularity, security, maintenance & community analysis.

Is @uiw/react-amap-hawk-eye-control popular?

The npm package @uiw/react-amap-hawk-eye-control receives a total of 212 weekly downloads. As such, @uiw/react-amap-hawk-eye-control popularity was classified as limited. Visit the popularity section on Snyk Advisor to see the full health analysis.

Is @uiw/react-amap-hawk-eye-control well maintained?

We found that @uiw/react-amap-hawk-eye-control demonstrated a healthy version release cadence and project activity. It has a community of 20 open source contributors collaborating on the project. See the full package health analysis to learn more about the package maintenance status.

Is @uiw/react-amap-hawk-eye-control safe to use?

The npm package @uiw/react-amap-hawk-eye-control was scanned for known vulnerabilities and missing license, and no issues were found. Thus the package was deemed as safe to use. See the full health analysis review.

Last updated on 22 December-2024, at 07:14 (UTC).

Build a secure application checklist

Select a recommended open source package

Minimize your risk by selecting secure & well maintained open source packages

DONE

Scan your app for vulnerabilities

Scan your application to find vulnerabilities in your: source code, open source dependencies, containers and configuration files

SCAN NOW

Fix identified vulnerabilities

Easily fix your code by leveraging automatically generated PRs

AUTO FIX

Monitor for new issues

New vulnerabilities are discovered every day. Get notified if your application is affected

MONITOR APP