mapRenderChart

快速上手

安装

npm install map-render-chart
or
yarn add map-render-chart
or
pnpm install map-render-chart

使用

import Map from 'map-render-chart';
const geoJson = {
  ...
}
const map = new Map({
  container: 'container'
});

map.registerMap(geoJson, '100000');

通过 CDN 使用

// 引入 map-render-chart
<script src="https://unpkg.com/map-render-chart@0.1.7/dist/index.global.js"></script>

<div id="container" style="width: 500px; height: 500px"></div>

const geoJson = {
  ...
}

const { Map } = mapRenderChart

function initMap () {
  map = new Map({
    container: 'map'
  })

  map.registerMap(geoJson, 100000)
}

initMap()

演示

在线演示

<iframe src="https://p3j76k-1234.csb.app/" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="devbox"></iframe>

Map 实例参数

参数名	参数说明	参数类型	是否必要	默认值
container	地图容器	string | HTMLElement	是	-
zoom	地图初始等级	number	否	0.8
style	地图初始样式	PathStyleProps 参考 zrender 文档	否	-
boundBox	地图边框属性	BoundBoxOptions	否	-
boundBox.show	是否显示地图边框	boolean	是	-
boundBox.style	地图初始样式	PathStyleProps 参考 zrender 文档	否	-
boundBox.level	地图初始样式	number	否	1

Map 实例方法

方法名	方法说明	参数类型	参数说明	返回值
registerMap	注册地图 (注: 此函数在其它所有函数之前调用)	geoJson: object mapName: string | number	geoJson: ( 标准GeoJson格式 ) mapName: 地图名称(当前所绘制地图的名称，如: 中国 | 100000)	void
setMapZoom	设置地图缩放等级	opt: { minZoom: number; maxZoom: number; }	opt: { minZoom: 最小缩放等级; maxZoom: 最大缩放等级; }	void
enableScrollWheelZoom	是否启用鼠标滚轮缩放功能	status: boolean	true: 启用 false: 关闭	void
enableDragging	是否启用拖拽功能	status: boolean	true: 启用 false: 关闭	void
setMapBackground	设置地图背景图片	image: string opt: object	image: 图片url(必传) opt: {width: 图片宽度，height: 图片高度. x: 图片起始x位置, y: 图片起始y位置} (可选)	void