echarts 地图 自己圈地图 乡镇街道

本文详细描述了如何在公司项目中处理未审核区域的地图展示,通过BigemapGISOffice获取地图数据,导入乡镇集合,圈定所需区域,最终导出GeoJSON文件并进行调整的整个过程。
摘要由CSDN通过智能技术生成

这个是方式是我实在不愿意做的!

如果有现成的最好,没有办法的情况下再用这个东西。

今天公司有一个项目,地方划分了一块区域,但是国家没有审核,但是项目里面用到了一个地图展示数据!然后就需要我们自己把那个地圈出来!!

上手!

1、拿到地图的区县这个是我们公司给我的乡镇集合!

2、下载Bigemap GIS Office

3、找客服激活试用

4、按照客服的说明导入地图,这样你才能够用更多的地图模板

5、在Bigemap GIS Office左侧找到新政边界,找到你要圈的乡镇街道

6、记得勾选乡镇。

7、加载完后就可以在左侧我的图层找到你加载好的乡镇

然后选中要的几个乡镇。

8、打开DataV.GeoAtlas地理小工具系列 进行圈图

9、使用左侧工具进行圈图

 10、导出圈好的json文件 ,右侧下载工具

 11、如果需要细节调整 geojson.io | powered by Mapbox 用这个网页

把你导出来的json文件复制,粘贴到右侧

12、右侧工具栏里面可以对你的地图进行添加修改

好了,祝大家找到的地图都能找到,最好别自己扣,老难受了!

function getGzMap(_data) { if (_chinaMap == undefined) { var dom = document.getElementById("container"); _chinaMap = echarts.init(dom); _chinaMap.on('click', function(params) { console.log(params); var _type = params.seriesType; if (_type == "map") { //window.parent.aaa('aa') //调用父页面方法 } else if (_type == "effectScatter") { window.parent.showMap(); } }) } var option = { backgroundColor: 'rgba(0,0,0,0)', visualMap: { type: 'piecewise', show: false, min: 0, max: 300, splitNumber: 3, itemWidth: 10, itemHeight: 10, itemGap: 5, seriesIndex: [1], pieces: [ { min: 0, max: 100, label: '优' }, { min: 101, max: 200, label: '良' }, { min: 201, max: 300, label: '高风险' } ], //color: ['#FA4D08', '#4BD94F', '#FBD32B'], //红、绿、黄 color: ['#F8DAE6', '#FEF9B5', '#B0D8B3'], //红、黄、绿 textStyle: { color: '#9EA8B1', fontSize: 10 } }, tooltip: { formatter: '{b}' }, geo: { map: 'guangdong', roam: true, aspectScale: 1, zoom: 1.5, layoutCenter: ['55%', '40%'], layoutSize: 500, label: { normal: { show: true }, emphasis: { show: true } }, itemStyle: { normal: { areaColor: '#323c48', borderColor: '#111', borderColor: '#3BB4DF', shadowColor: '#25A3FC', shadowBlur: 10 }, emphasis: { areaColor: '#ddb926' } } }, series: [{ type: 'effectScatter', coordinateSystem: 'geo', data: unitData, symbolSize: 10, symbol: 'image://../../../../Content/images/One/fire.png', //symbolRotate: 35, rippleEffect: { period: 4, scale: 5, brushType: 'fill', }, label: { normal: { formatter: '{b}', position: 'right', show: false }, emphasis: { show: false } }, itemStyle: { normal: { color: '#fff' } } }, { name: '', type: 'map', geoIndex: 0, mapType: 'guangdong', // 自定义扩展图表类型 label: { normal: { show: true, } }, itemStyle: { normal: { label: { show: true, fontSize: 10, color: '#111' }, shadowColor: '#ddb926', shadowBlur: 5, }, emphasis: { label: { show: true }, shadowColor: 'rgba(0, 0, 0, 0.5)', shadowBlur: 10 } }, data: _data }, { type: 'effectScatter', coordinateSystem: 'geo', data: windData, symbolSize: 10, symbol: 'image://../../../../Content/images/One/wind.png', //symbolRotate: 35, rippleEffect: { period: 4, scale: 5, brushType: 'fill', }, label: { normal: { formatter: '{b}', position: 'right', show: false }, emphasis: { show: false } }, itemStyle: { normal: { color: '#fff' } } }, ] }; $.getJSON('../../MapCN/guangdong.json', function(chinaJson) { echarts.registerMap('guangdong', chinaJson); _chinaMap.setOption(option, true); }); }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值