1.0.4 • Published 3 months ago
@zhuyukeji/z-map v1.0.4
@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 |