@zhuyukeji/z-map这款 GIS 地图可视化插件，专为交互式地图打造，轻松实现数据直观呈现 。

安装

使用 npm 或 yarn 安装

推荐使用 npm 或 yarn 的方式进行开发，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。

npm install @zhuyukeji/z-map
npm install mapbox-gl

yarn add @zhuyukeji/z-map
yarn add mapbox-gl

引入

import { ZMap } from '@zhuyukeji/z-map'

引入样式

import '@zhuyukeji/z-map/es/ZMap/style/style.css'

组件示例

<ZMap ref="ZMap" :mapStyle="mapStyle" :cityMap="cityMap" :baseMap="baseMap" :farmMap="farmMap" :pointMap="pointMap" :center="center"
      :mapKey="mapKey" @point-click="pointClick" @farm-click="farmClick"></ZMap>

参数

| [属性]| [说明]| [类型]| [默认值]| [版本] | | --- | --- | --- | --- | --- | mapKey | mapbox的key | String | '' | 1.0.0 | mapStyle| 地图瓦片样式 | Object | null | 1.0.0 | isProminent | 是否凸显中间基地，city/base | String | base | 1.0.0 | cityMap| 城市地图数据 | Object/String | geojson | 1.0.0 | baseMap| 基地地图数据 | Array/String | [{title: "",id: "",mapPosition: "",}] | 1.0.0 | farmMap| 场景地图数据 | Array/String | [{title: "",id: "",mapPosition: "",}] | 1.0.0 | pointMap| 地图点数据 | Array | [] | 1.0.0 | heatMap| 热力数据 | Array | [] | 1.0.0 | center| 地图中心点 | Array | [] | 1.0.0 | minZoom| 最小放缩值 | Number | 0 | 1.0.0 | maxZoom| 最大放缩值 | Number | 20 | 1.0.0 | zoom| 放缩值 | Number | 6.5 | 1.0.0 | pitch| 地图倾斜角度 | Number | 0 | 1.0.0 | prominentFillColor| 地图外部区域蒙层颜色 | String | 'rgba(0, 0, 0, 0.5)' | 1.0.0 |

baseMap

| [属性]| [说明]| [类型]| [默认值]| [版本] | | --- | --- | --- | --- | --- |

farmMap

| [属性]| [说明]| [类型]| [默认值]| [版本] | | --- | --- | --- | --- | --- |

pointMap

| [属性]| [说明]| [类型]| [默认值]| [版本] | | --- | --- | --- | --- | --- |

事件

| [属性]| [说明]| [返回]| [版本] | | --- | --- | --- | --- | farm-click| 点击场景地图返回事件 | id | 1.0.0 | point-click| 点击地图点返回事件 | id | 1.0.0 | city-click| 点击省市区返回事件 | id | 1.0.0 | base-click| 点击基地返回事件 | id | 1.0.0 | heat-click| 点击热力返回事件 | id | 1.0.0 |