echarts地图开发经验分享

一、前言最近工作中客户要求使用地图展示省-市-县区三级业务关系并且可实现地图三级钻取。过程中遇到了以下几个问题在此经验分享希望大家少走弯路。1.业务地图与实际行政区域关系不完全一致。2.不同权限的人进入到系统后由于权限不同所呈现的对应的地图这个地图可以是省级地图、市级地图、县区级地图。3.后期四级区域变更需要灵活配置而不是进行地图的二次开发调测。针对以上问题我们逐步解决。二、地图灵活加载假设 mapJson 为某区域地图的 geojson。我们只需要使用如下方式就可以进行地图加载echarts.registerMap(my_area,mapJson);varchartecharts.init(document.getElementById(area));chart.setOption({……series:[{type:map,map:my_area,//要和echarts.registerMap中第一个参数一致……}]……});从上面代码可以看到我们只需要让echarts注册地图的名称和series中map的值保持一致就可以。下面是我的实际代码中进行的函数封装mapname为地图文件的名称也是地图对应区域的编码(adcode)。functionmapRefresh(mapname,mapData){varjsurlctxajax/libs/report/echarts/qinghaimap/mapname.json;$.get(jsurl,function(mapJson){echarts.registerMap(mapname,mapJson);optionGS.series[0].mapmapname;optionGS.geo.mapmapname;optionGS.series[0].datamapData;myChartGS.setOption(optionGS);});};三、地图json文件的获取3.1 地图基本区域获取最新行政区划获取基于高德地图API获取数据下面是我的代码基于python获取importjsonimportrequestsdefparse_district(districtObj:dict,idx1,parent_id0):res[]ifnameindistrictObj.keys():ifdistrictObj[level]street:returnres lng,latdistrictCenter(districtObj[center])leveldistrictLevel(districtObj[level])citycodedistrictObj[citycode]ifisinstance(districtObj[citycode],str)else# {citycode:0379,adcode:410300,name:洛阳市,center:112.434468,34.663041,level:city}# idx, districtObj[adcode], districtObj[name], level, citycode, lng, lat, parent_iditem{id:idx,adcode:districtObj[adcode],name:districtObj[name],level:level,citycode:citycode,lng:lng,lat:lat,parent_id:parent_id}res.append(item)parent_ididx idxidx1ifisinstance(districtObj.get(districts),list)andlen(districtObj[districts])0:forsubitemindistrictObj[districts]:subsparse_district(subitem,idx,parent_id)ressubs idxlen(subs)returnresdefdistrictLevel(levelStr):map_val{country:0,province:1,city:2,district:3}returnmap_val[levelStr]defdistrictCenter(center):itemscenter.split(,)returnfloat(items[0]),float(items[1])# 结果保存为json数组defsaveJson(data):withopen(area_dict.json,w,encodingutf-8)asfp:json.dump(data,fp,ensure_asciiFalse,indent4)print(Save json file: area_dict.json)# 保存为SQL脚本defsaveSqlFile(data,includeCreateTrue):# ---------------------------------------------------------------# | Field | Type | Null | Key | Default | Extra |# ---------------------------------------------------------------# | area_id | int(11) | NO | PRI | NULL | auto_increment |# | area_code | char(6) | NO | MUL | NULL | |# | area_name | varchar(20) | NO | MUL | NULL | |# | level | tinyint(1) | NO | MUL | 0 | |# | city_code | char(4) | YES | | NULL | |# | longitudinal | int(11) | YES | | 0 | |# | lateral | int(11) | YES | | 0 | |# | parent_id | int(11) | NO | MUL | -1 | |# ---------------------------------------------------------------createCode CREATE TABLE area_dict ( area_id int(11) NOT NULL AUTO_INCREMENT COMMENT 地区Id, area_code char(6) NOT NULL COMMENT 地区编码, area_name varchar(20) NOT NULL COMMENT 地区名, level tinyint(1) NOT NULL DEFAULT 0 COMMENT 地区级别1:省份province,2:市city,3:区县district,4:街道street, city_code char(4) DEFAULT NULL COMMENT 城市编码, lng int(11) DEFAULT 0 COMMENT 城市中心经度, lat int(11) DEFAULT 0 COMMENT 城市中心纬度, parent_id int(11) NOT NULL DEFAULT -1 COMMENT 地区父节点, PRIMARY KEY (area_id), KEY areaCode (area_code), KEY parentId (parent_id), KEY level (level), KEY areaName (area_name) ) ENGINEInnoDB AUTO_INCREMENT3261 DEFAULT CHARSETutf8 COMMENT地区码表; withopen(area_dict.sql,w,encodingutf-8)asfp:ifincludeCreate:fp.write(createCode)foritemindata:item[lng]int(item[lng]*1e6)item[lat]int(item[lat]*1e6)sqlINSERT INTO area_dict(area_id,area_code,area_name,level,city_code,lng,lat,parent_id) \VALUES({id},{adcode},{name},{level},{citycode},{lng},{lat},{parent_id});\n.format(**item)fp.write(sql)print(Save sql file: area_dict.sql)if__name____main__:urlhttps://restapi.amap.com/v3/config/district?keywords中国subdistrict3key[你的高德地图key]responserequests.get(url)ifresponse.okandresponse.status_code200:dataresponse.json()dataparse_district(data)print(Download data successful, total:{0}!.format(len(data)))saveJson(data)saveSqlFile(data)else:print(Request error!)程序执行结束会生成area_dict.sql和area_dict.json方便我们入库进行后台管理。3.2 地图geojson下载我们使用上面生成的area_dict.json进行地图geojson下载importrequestsimportjsonimportosdefloadDistrict(filename):data[]withopen(filename,r,encodingutf-8)asfp:datajson.load(fp)returndatadefsaveGeoJson(areaCode,forceFalse):saveNamegeoV3/{0}.json.format(areaCode)ifnotforceandos.path.isfile(areaCode):returnNonebaseUrlhttps://geo.datav.aliyun.com/areas_v3/bound/{0}_full.jsonbaseUrl2https://geo.datav.aliyun.com/areas_v3/bound/{0}.jsonifareaCode[-2:]00:urlbaseUrl.format(areaCode)else:urlbaseUrl2.format(areaCode)print(url)responserequests.get(url)ifresponse.okandresponse.status_code200:res_jsonresponse.json()withopen(saveName,w,encodingutf-8)asfp:json.dump(res_json,fp,ensure_asciiFalse)else:returnareaCodeif__name____main__:districtsloadDistrict(area_dict.json)errorCodes[]fordistrictindistricts:codesaveGeoJson(district[adcode])ifnotcodeisNone:errorCodes.append(code)print(errorCodes)fordistrictindistricts:codesaveGeoJson(district[adcode],district[name],district[level])ifnotcodeisNone:errorCodes.append(code)print(errorCodes)这个时候我们就已经把标准行政区的geojson全部下载到本地了基于编码还有文件结合第二章我们就已经可以实现中国区域地图的中国、省、市、县区的钻取。其他下载可参考《实战 抓取安徽省所有市、县、镇矢量坐标数据》四、地图区域定制4.1 geojson解读首先我们看过地图的geojson文件其大概如下{type:FeatureCollection,features:[{type:Feature,properties:{adcode:630105,name:城北区,center:[101.761297,36.648448],centroid:[101.699377,36.680565],childrenNum:0,level:district,acroutes:[100000,630000,630100],parent:{adcode:630100}},geometry:{type:MultiPolygon,coordinates:[[[[101.74077987670899,36.6482446264917],[101.73983573913573,36.646617714744369],……]]]}}]}地图里面核心的几个参数features[0].properties.adcode : 区域编码features[0].properties.name : 区域名称features[0].geometry.coordinates : 区域边沿的经纬度信息4.1 地图加载我们打开https://geojson.io或者https://www.strerr.com/geojson/geojson.html 点击open-file选择我们需要编辑的地图这里我们打开了青海地图。在右边的table区域就会展示当前地图所包含的子模块然后我们按照下面操作勾选出我们需要制定的区域。最后我们在table区域进行区域编辑就可以制作好我们的地图文件最后点击save-geojson可以保存我们地图json压缩文件也可以拷贝右边的json进行保存。