稳稳在哪个网站做的消防直播,网站建设咨询服务合同,无锡免费做网站,wordpress微信群发助手一、此 demo 实现的基本功能 1.中国地图的显示 2.地图点击下钻的功能 3.地图相关组件的使用#xff0c;例 tooltip… 二、实现思路 初始使用下载本地的中国 geo 格式的 json 数据来绘制地图#xff0c;点击某一区划#xff08;例#xff1a;山东省#xff09;时#xff0…一、此 demo 实现的基本功能 1.中国地图的显示 2.地图点击下钻的功能 3.地图相关组件的使用例 tooltip… 二、实现思路 初始使用下载本地的中国 geo 格式的 json 数据来绘制地图点击某一区划例山东省时以点击的区划名称使用 AMap.DistrictSearch(opts) 构造函数查询下一级的区划信息例青岛市区划 id 为 370200和业务数据整合处理然后以点击的区划 id 用AMapUI中的组件DistrictExplorer相关方法获取下一级的地图 json 数据继而绘制下一级地图例青岛市再点下同… 三、引入 echarts 因为 echarts 在 5.0 及之后版本因 包体积优化和法规规定 取消了内置 json 地图数据但仍然可以下载之前版本的依赖包来使用或下载曾经内置的地图数据。 若要引地图 json 数据建议下载 echarts4.9.0 这是 echarts 取消内置前的最新版本地图 json 数据之前的版本地图数据比如 3.x2.x 或多或少在地图边界和岛屿精度部分有所不准亲测~ 1. 通过 npm 方式下载 echarts $ npm i echarts4.9.02. 引入 echarts import echarts from echarts3. 相关 api 说明
echarts.registerMap echarts 方法在 echarts 5.0 及之后版本取消了registerMap 此方法所以最新 echartsv5.2.2版本引用会报错所以这里我使用 v4.9.0 来注册地图。
// registerMap 接收两个参数
// 第一个是地图名称china 为显示右下角南海诸岛china1 则不显示右下角南海诸岛
// 第二个参数是绘制地图所需的json数据在这里我下载了两个版本的json数据放在本地引用来使用见下文echarts.registerMap(china, chinaJson)echarts.init echarts 方法创建一个 ECharts 实例返回 echartsInstance不能在单个容器上初始化多个 ECharts 实例。 // 创建实例接收三个参数
// 参数dom实例容器一般是一个具有高宽的div元素
// 参数theme可选应用的主题。可以是一个主题的配置对象
// 参数opts可选附加参数this.myChart echarts.init(dom, theme, opts)echartsInstance.on 实例方法绑定事件处理函数对应 off解绑事件处理函数 // 创建实例接收三个参数
// 参数eventName事件名称全小写例如clickmousemove, legendselected
// 参数query可选过滤条件能够只在指定的组件或者元素上进行响应。可为 string 或者 Object
// 参数handler事件处理函数this.myChart.on(eventName, query, handler)echartsInstance.setOption 实例方法设置图表实例的配置项以及数据万能接口所有参数和数据的修改都可以通过 setOption 完成ECharts 会合并新的参数和数据然后刷新图表。
配置项部分用法见下文五、echarts 部分配置项。官方配置项手册 // 参数 option配置项this.myChart.setOption(option)四、AMap 相关 api 使用说明 1. 引入 AMap !-- html文件 --!--引入高德地图JSAPIkey值是在AMap官方申请的哦plugin是项目中用到的插件 --
script src//webapi.amap.com/maps?v2.0keybb36205e1ab4869979c6505a3cc362eepluginAMap.DistrictSearch/script!--引入UI组件库1.1版本 --
script src//webapi.amap.com/ui/1.1/main.js/script2. AMap.DistrictSearch(opt) 插件行政区查询服务提供行政区相关信息。官方文档 /**
参数opts对象实例时的配置
opts{level: String, 关键字对应的行政区级别或商圈可选值showbiz: Boolean, 是否显示商圈默认值trueextensions: String是否返回行政区边界坐标点。默认值base不返回行政区边界坐标点取值all返回完整行政区边界坐标点subdistrictNumber默认1显示下级行政区级数行政区级别包括国家、省/直辖市、市、区/县4个级别商圈为区/县下一级。0不返回下一级区划1返回下一级区划2...3...。
}
**/const districtSearch new AMap.DistrictSearch(opts)
// 根据关键字查询行政区或商圈信息 关键字支持行政区名、citycode、adcode、商圈名默认值“全国”
districtSearch.search(obj.data.name, (status, result) {console.log(加载区划信息, status, result)
})3. DistrictExplorer 加载绘制地图所需的 geo 格式的 json 数据。行政区划浏览 提供了全国范围内到区县一级的行政区划数据含边界同时提供一些辅助功能比如区划面绘制、事件监听以及快速判断经纬度所属的子级区划等。官方文档 // 使用AMapUI.loadUI([geo/DistrictExplorer], (DistrictExplorer) {let districtExplorer new DistrictExplorer({eventSupport: true, // 打开事件支持map: null, // 地图对象实例。仅仅获取数据不涉及地图相关的操作时可以不设置})districtExplorer.loadAreaNode(obj.data.cityCode, (error, areaNode) {if (error) returnconst mapJson {}// 返回该区域中全部的子级区划Feature数组mapJson.features areaNode.getSubFeatures() || []console.log(绘制地图所需的json数据, mapJson)})
})五、echarts 部分配置项 const option {visualMap: {// 视觉映射组件配置type: continuous, // 定义为连续型 visualMapshow: true,bottom: 5%,left: 2%,text: [高, 低], // 两端的文本min: 0, // 指定 visualMapContinuous 组件的允许的最小值max: 100, // 指定 visualMapContinuous 组件的允许的最大值inRange: {// 定义 在选中范围中 的视觉元素color: [#fff, #A0CFFF, #409EFF], // 图元的颜色},calculable: true, // 是否显示拖拽用的手柄手柄能拖拽调整选中范围},tooltip: {// 提示框组件trigger: item,formatter: function (item) {if (item.name 南海诸岛) {return } else {return item.name br业务数据 (item.value || 0) 个}},},series: [// 系列列表。每个系列通过 type 决定自己的图表类型{type: map, // 系列列表。每个系列通过 type 决定自己的图表类型map: china, // 地图。china 为中国全国地图右下角南海诸岛china1 为中国全国地图name: 业务数据, // 系列名称用于tooltip的显示legend 的图例筛选在 setOption 更新数据和配置项时用于指定对应的系列aspectScale: 0.75, // 用于 scale 地图的长宽比zoom: 1.2, // 地图缩放多少倍roam: true, // 允许缩放和平移mapType: 自定义地图,selectedMode: single, // 点击区域会处于选中状态single单选showLegendSymbol: false, // 在图例相应区域显示图例的颜色标识系列标识的小圆点存在 legend 组件时生效// center: [100.97, 35.71], // 初始化时的地图位置可通过改变地图中心视角的经纬度来实现地图的平移itemStyle: {// 地图区域的多边形图形样式normal: {// 正常时的样式color: #ccc, // 图形的颜色borderColor: #303133, // 图形的描边颜色areaColor: #d4f7fc, // 地图区域颜色borderWidth: 0.5, // 描边线宽。为 0 时无描边label: {// 设置地图区域名的文本样式例如地名的字体大小等show: true, // 显示地区的文本名称,默认是不显示的默认状态是hoverORclick才显示fontSize: 12,textStyle: {color: #606266,},},},emphasis: {// 选中后的样式areaColor: #4382F6,borderColor: #fff,areaStyle: {color: #fff,},label: {show: true,fontSize: 12,textStyle: {color: #003767,},},},},data: this.mapData, // 地图系列中的数据内容数组。数组项可以为单个数值},],
}六、地图 json 数据说明及 demo 效果图
地图 json 数据说明比较# echarts5.0 版本之前内置的 geo 地图 json 数据这里特指v4.9.0是不显示海南省下方的南海诸岛海域所以地图较方正。
阿里datav的地图 json 数据是显示海南省下方的南海诸岛海域所以地图偏高。
demo 效果图# 1.使用echarts4.9.0内置的地图 json 数据绘制 2.使用阿里datav下载的地图 json 数据绘制 到这里就全部介绍完毕了希望对你有用的话可以帮俺点点赞点点关注谢谢哈
