Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
map-chart - npm Package Compare versions
Comparing version 1.0.5 to 2.0.1
| { | ||
| "name": "map-chart", | ||
| "version": "1.0.5", | ||
| "description": "echarts map", | ||
| "main": "map-chart.common.js", | ||
| "private": false, | ||
| "version": "2.0.1", | ||
| "keywords": ["vue2 echarts map"], | ||
| "author": "user-r", | ||
| "license": "MIT", | ||
| "main": "dist/map-chart.esm.js", | ||
| "module": "dist/map-chart.esm.js", | ||
| "type": "module", | ||
| "scripts": { | ||
| "test": "echo \"Error: no test specified\" && exit 1" | ||
| "dev": "vite", | ||
| "build": "vite build", | ||
| "build:esm": "rollup --config build/rollup.config.js", | ||
| "preview": "vite preview" | ||
| }, | ||
| "keywords": [ | ||
| "vue2", | ||
| "echarts", | ||
| "map" | ||
| ], | ||
| "author": "R", | ||
| "license": "ISC" | ||
| } | ||
| "devDependencies": { | ||
| "@babel/core": "^7.25.9", | ||
| "@babel/plugin-transform-runtime": "^7.25.9", | ||
| "@babel/preset-env": "^7.25.9", | ||
| "@rollup/plugin-babel": "^6.0.4", | ||
| "@rollup/plugin-commonjs": "^28.0.1", | ||
| "@rollup/plugin-node-resolve": "^15.3.0", | ||
| "@rollup/plugin-terser": "^0.4.4", | ||
| "@vitejs/plugin-vue2": "^2.3.1", | ||
| "@vue/compiler-sfc": "^3.5.12", | ||
| "autoprefixer": "^10.4.20", | ||
| "core-js": "^3.38.1", | ||
| "rollup-plugin-css-only": "^4.5.2", | ||
| "rollup-plugin-postcss": "^4.0.2", | ||
| "vite": "^5.4.8", | ||
| "vue-template-compiler": "^2.7.16", | ||
| "rollup-plugin-vue": "^5.1.9", | ||
| "vite-plugin-require-transform": "^1.0.21", | ||
| "vue": "^2" | ||
| }, | ||
| "peerDependencies": { | ||
| "vue": "^2" | ||
| }, | ||
| "dependencies": { | ||
| "@amap/amap-jsapi-loader": "^1.0.1", | ||
| "echarts": "^4.9.0" | ||
| }, | ||
| "files": ["dist"], | ||
| "browserslist": [ | ||
| "> 1%", | ||
| "last 2 versions", | ||
| "not ie <= 8" | ||
| ] | ||
| } |
215
README.md
| # map-chart | ||
| ## Install | ||
| #### 介绍 | ||
| 基于 echarts+AMap 集成的支持地图下钻 vue2 组件 | ||
| 数据维护 依靠 adcode | ||
| #### Install | ||
| ``` | ||
| npm install map-chart -S | ||
| pnpm add map-chart | ||
| ``` | ||
| ## Quick Start | ||
| #### use | ||
| ``` | ||
@@ -13,7 +21,202 @@ import Vue from 'vue' | ||
| // or | ||
| <!-- or --> | ||
| import { MapChart } from 'map-chart' | ||
| ``` | ||
| ## 开源协议 | ||
| ISC | ||
| ### 属性 | ||
| | 属性 | 说明 | 类型 | 是否必传 | 默认值 | 可选值 | | ||
| | :----------------: | :----------------------------------------------------: | :------: | :------: | :----: | :------------------------------: | | ||
| | customizeKey | 配置选项 | Object | 是 | -- | 见下面配置选项 | | ||
| | useAmap | 是否开启高德地图 | Boolean | 否 | false | -- | | ||
| | AmapInfo | 高德地图配置信息，参考高德 | Object | 是 | -- | 见下面配置选项 | | ||
| | echartsEvents | 配置 echarts 事件 | Array | 否 | -- | 见下面配置选项 | | ||
| | drillDown | 配置下钻方式 | String | 否 | click | dblclick 双击下钻｜ off 关闭下钻 | | ||
| | drillingDownLevels | 可下钻层级 | String | 否 | '3' | 1-4 | | ||
| | generateOption | echarts option 具体参考https://echarts.apache.org | Function | 是 | -- | 见下面配置选项 | | ||
| | generateJson | 用户自定义图层 json | Function | 否 | -- | 见下面配置选项 | | ||
| | mapData | 业务数据 | Array | 是 | -- | -- | | ||
| | redrawMapView | 自定义 echarts 图层名称、区块合并、删除 | Object | 否 | -- | 见下面配置选项 | | ||
| | loadingCfg | 自定义 echarts 加载动画 参考https://echarts.apache.org | Object | 否 | -- | -- | | ||
| ### customizeKey 配置选项说明 | ||
| | 参数 | 说明 | 类型 | | ||
| | :-----: | :------------: | :----: | | ||
| | userKey | 业务数据 key | string | | ||
| | value | 业务数据 value | string | | ||
| | adname | 初始地图名称 | string | | ||
| | adcode | 初始 adcode | string | | ||
| ### AmapInfo 配置选项说明 | ||
| ``` | ||
| 详细配置参考高德开发者平台 | ||
| const AMapInfo = { | ||
| security: '', // 初始化时加载秘钥 | ||
| key: '', // 申请好的Web端开发者Key，首次调用 load 时必填 | ||
| plugins: [ | ||
| 'AMap.PolyEditor', | ||
| 'AMap.MarkerClusterer', | ||
| 'AMap.Driving', | ||
| 'AMap.DistrictSearch', | ||
| 'AMap.Autocomplete', | ||
| 'AMap.PlaceSearch', | ||
| 'AMap.Walking', | ||
| 'AMap.Riding', | ||
| 'AMap.DragRoute', | ||
| 'AMap.MassMarks', | ||
| ... | ||
| ], | ||
| amap: { | ||
| rotateEnable: true, //控制地图是否可以旋转 | ||
| pitchEnable: true, //控制地图是否可以倾斜 | ||
| terrain: true, // 开启地形图 | ||
| pitch: 50, //初始化角度 | ||
| viewMode: '2D', //是否为3D地图模式 | ||
| zoom: 12, //初始化地图级别 | ||
| center: [113.17, 23.8], //初始化地图中心点位置113°17',北纬23°8' | ||
| mapStyle: '', //初始化地图样式 | ||
| }, | ||
| AMapUI: { | ||
| version: '1.0', | ||
| }, | ||
| AMapUIPlugins: ['overlay/SimpleMarker', 'geo/DistrictExplorer'], | ||
| } | ||
| ``` | ||
| ### echartsEvents 配置选项说明 | ||
| ``` | ||
| computed: { | ||
| echartsEvents() { | ||
| return [ | ||
| { | ||
| type: 'click', | ||
| handler: (e) => { | ||
| console.log('自定义事件', e) | ||
| }, | ||
| }, | ||
| ] | ||
| }, | ||
| }, | ||
| ``` | ||
| ### generateOption 配置选项说明 | ||
| ``` | ||
| async generateOption() { | ||
| // 模拟业务数据 | ||
| const adcode = this.getNowAdcode() | ||
| const areaDataJson = await this.districtExplorer.loadAreaNode(adcode) | ||
| const mokeData = areaDataJson.features.map((item) => { | ||
| return { | ||
| name: item.properties.name, | ||
| value: (Math.random() * 1000).toFixed(2), | ||
| adcode: item.properties.adcode, | ||
| org_id: (Math.random() * 1000).toFixed(0), | ||
| } | ||
| }) | ||
| this.mapData = mokeData | ||
| // echartsOption为echarts option对象 | ||
| return echartsOption(mokeData) | ||
| } | ||
| ``` | ||
| ### generateJson 配置选项说明 | ||
| 配置 echarts 地图 | ||
| 在内部 json 不满足使用情况时 支持自定义 json | ||
| adcodeArr： 需要替换自定义 json 的 adcode | ||
| handler: 自定义 json 获取方式 | ||
| ``` | ||
| generateJson() { | ||
| return { | ||
| adcodeArr: ['210000', '220000', '222400'], | ||
| handler: async (adcode) => { | ||
| // 模拟数据自定义数据 | ||
| console.log('模拟数据自定义数据') | ||
| const areaDataJson = await this.districtExplorer.loadAreaNode(adcode) | ||
| return areaDataJson | ||
| }, | ||
| } | ||
| }, | ||
| ``` | ||
| ### generateJson 配置选项说明 | ||
| ``` | ||
| const redrawMapView = Object.freeze({ | ||
| 210000: [ | ||
| { | ||
| adcodeTarget: [210200], | ||
| properties: { | ||
| name: '自定义名称', | ||
| adcode: 210200, // 自定义adcode 转 number | ||
| centroid: [122.190893, 39.593378], // 图标展示位置 | ||
| cp: [122.190893, 39.593378], // 文字展示位置 | ||
| }, | ||
| }, | ||
| { | ||
| adcodeTarget: [211300, 211400, 210400, 210100], | ||
| properties: { | ||
| name: '朝阳+葫芦岛', | ||
| adcode: 211300, // 自定义adcode 转 number | ||
| centroid: [120.451176, 41.576758], // 图标展示位置 | ||
| cp: [120.451176, 41.576758], // 文字展示位置 | ||
| }, | ||
| }, | ||
| { | ||
| adcodeTarget: [210300], | ||
| properties: { | ||
| name: '鞍山新名字', | ||
| adcode: 210300, // 自定义adcode 转 number | ||
| centroid: [122.995632, 41.110626], // 图标展示位置 | ||
| cp: [122.995632, 41.110626], // 文字展示位置 | ||
| }, | ||
| }, | ||
| { | ||
| adcodeTarget: [210500, 210600], | ||
| delete: true, | ||
| }, | ||
| ], | ||
| 440000: [ | ||
| { | ||
| adcodeTarget: [440600, 440100], | ||
| properties: { | ||
| name: '广州+佛山', | ||
| adcode: 440100, // 自定义adcode 转 number | ||
| centroid: [113.122717, 24.028762], // 图标展示位置 | ||
| cp: [113.122717, 24.028762], // 文字展示位置 | ||
| }, | ||
| }, | ||
| { | ||
| adcodeTarget: [441300], | ||
| delete: true, | ||
| }, | ||
| ], | ||
| }) | ||
| ``` | ||
| ### 事件 | ||
| | 事件名称 | 说明 | 回调参数 | | ||
| | :----------: | :----------------: | :----------------------------------------: | | ||
| | update-stack | 地图层级变化时触发 | 基本层级信息 | | ||
| | created-amap | 高德地图初始化 | map:高德实例对象, aMapUIPlugins:配置的插件 | | ||
| | enter-amap | 进入高德地图时触发 | json：当前层级信息 | | ||
| | leave-amap | 离开高德地图时触发 | -- | | ||
| ### 方法 | ||
| 通过$refs 方式调用 | ||
| | 方法名称 | 说明 | 参数 | | ||
| | :---------------------: | :---------------: | :-------------: | | ||
| | drillUpEventRef | 上钻 | 目标区域 adcode | | ||
| | drillDownEventRef | 下钻 | 目标区域 adcode | | ||
| | updateEchartsMapDataRef | 更新 echarts 数据 | -- | | ||
| | showAmapRef | 显示高德地图 | -- | | ||
| | hideAmapRef | 隐藏高德地图 | -- | |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No tests
QualityPackage does not have any tests. This is a strong signal of a poorly maintained or low quality package.
Found 1 instance in 1 package
Improved metrics
- Number of low quality alerts
- decreased by-50%
1
- Number of lines in readme file
- increased by1068.42%
222
- Is type module
Yes
Worsened metrics
- Total package byte prevSize
- decreased by-99.78%
35173
- Dependency count
- increased byInfinity%
3
- Dev dependency count
- increased byInfinity%
18
- Number of package files
- decreased by-57.14%
3
- Lines of code
- decreased by-95.5%
90
- Number of low supply chain risk alerts
- increased by100%
2
- Number of medium supply chain risk alerts
- increased byInfinity%
1
Dependency changes
+ Addedecharts@^4.9.0
+ Added@amap/amap-jsapi-loader@1.0.1(transitive)
+ Added@babel/helper-string-parser@7.25.9(transitive)
+ Added@babel/helper-validator-identifier@7.25.9(transitive)
+ Added@babel/parser@7.26.2(transitive)
+ Added@babel/types@7.26.0(transitive)
+ Added@vue/compiler-sfc@2.7.16(transitive)
+ Addedcsstype@3.1.3(transitive)
+ Addedecharts@4.9.0(transitive)
+ Addednanoid@3.3.7(transitive)
+ Addedpicocolors@1.1.1(transitive)
+ Addedpostcss@8.4.49(transitive)
+ Addedprettier@2.8.8(transitive)
+ Addedsource-map@0.6.1(transitive)
+ Addedsource-map-js@1.2.1(transitive)
+ Addedvue@2.7.16(transitive)
+ Addedzrender@4.3.2(transitive)