z-map-views是一个gis地图可视化插件，用于交互式地图。

安装

使用 npm 或 yarn 安装

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

$ npm install z-map-views

$ yarn add z-map-views

引入

import { ZMap } from 'z-map-views'

引入样式

import 'z-map-views/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.2.3 | mapStyle| 地图瓦片样式 | Object | null | 1.2.3 | isProminent | 是否凸显中间基地，city/base | String | base | 1.2.3 | cityMap| 城市地图数据 | Object/String | geojson | 1.2.3 | baseMap| 基地地图数据 | Array/String | [{title: "",id: "",mapPosition: "",}] | 1.2.3 | farmMap| 场景地图数据 | Array/String | [{title: "",id: "",mapPosition: "",}] | 1.2.3 | pointMap| 地图点数据 | Array | [] | 1.2.3 | heatMap| 热力数据 | Array | [] | 1.2.3 | center| 地图中心点 | Array | [] | 1.2.3 | minZoom| 最小放缩值 | Number | 0 | 1.2.3 | maxZoom| 最大放缩值 | Number | 20 | 1.2.3 | zoom| 放缩值 | Number | 6.5 | 1.2.3 | pitch| 地图倾斜角度 | Number | 0 | 1.2.3 | prominentFillColor| 地图外部区域蒙层颜色 | String | 'rgba(0, 0, 0, 0.5)' | 1.2.3 |

baseMap

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

farmMap

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

pointMap

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

事件

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