精华内容
下载资源
问答
  • 地图数据json
    千次阅读 热门讨论
    2019-01-03 14:21:37

    首先来一个echarts map地图使用的教程(对应地图的数据包我的下载里有 echarts地图离线数据包 有需要的可以自行下载或在博客下留言我会单独发你)

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<link href="css/map.css" rel="stylesheet" type="text/css"/>
    	</head>
    	<body>
    		<div class="map_out">
    			<div style="width: 1206px;height: 1065px;" id="main"></div>
    		</div>
    		<script src="js/xiongan.js"></script>
    		<script src="js/jquery.min.js"></script>
    		<script src="js/echarts.js"></script>
    		<script src="js/citymap.js"></script>
    		<script>
    			
    			var chart = echarts.init(document.getElementById('main'));
    			var mapdata = [];
    			//加载地图
    			$.getJSON('xiongAn.json', function(data){
    				d = [];
    				for( var i=0;i<data.features.length;i++ ){
    					d.push({
    						name:data.features[i].properties.name
    					})
    				}
    				mapdata = d;
    				//注册地图
    				echarts.registerMap('zhejiang', data);
    				//绘制地图
    				option.series[0].data = d;
    				chart.setOption(option);
    			});
    		</script>
    	</body>
    </html>

    上面案例代码。因为就写几个简单的dom我就直接使用<script>引入了,需要走脚手架的自行研究,我这里就不见了。

    echarts使用

    1.首先引入对应的echarts.js

    2.创建一个echarts挂在的标签dom

    3.echarts.init初始化

    4.echarts对象.setoption设置对应json数据

    地图的话多一步

    需要在3之后 调用 echarts.registerMap()设置对应的数据

    这里我提供一个简单的echarts map option有需要的可以查考下(具体参数意义官网都有我就不注释了 echarts官网)

    var option = {
    	backgroundColor: '#061421',
        tooltip: {
            trigger: 'item',
            formatter: '{b}'
        },
        xAxis: {
        	show:false,
        	min:0,
    	    max:100,
    	    splitNumber:30,
    	    axisLine:{
    	    	lineStyle:{
    	    		color:"#ffffff"
    	    	}
    	    },
        },
        yAxis: {
        	splitNumber:30,
        	show:false,
        	min:0,
    	    max:100,
    	    axisLine:{
    	    	lineStyle:{
    	    		color:"#ffffff"
    	    	}
    	    },
        },
    	series:[{
    		geoIndex:0,
    		type: 'map',
    		label: {
                normal:{
    				show:true,
    				textStyle:{
    					color:'#999',
    					fontSize:13
    				}  
                },
                emphasis: {
                    show: true,
                    textStyle:{
    					color:'#fff',
    					fontSize:13
    				}
                }
            },
            itemStyle: {
                normal: {
                    areaColor: '#102D4A',
                    borderColor: '#57789F'
                },
                emphasis: {
                    areaColor: 'darkorange'
                }
            },
            mapType: 'zhejiang',
    	}]
    };

    接下来直接将重点如何制作echart地图数据json包

    这里我们需要用到一个网站 http://geojson.io/#map=2/20.0/0.0 

    我这里因为项目要求精度要求比较高所以就利用高德地图导出了需要区域的经纬度.

    导出数据是这样的

    你们也可以用网站上的工具来自行绘制区域范围

    因为经纬度数据量比较大所以直接使用代码操作了(下发时方法)

    //josn对象
    var eachart = {
      "type": "FeatureCollection",
      "features": [
        {
          "type": "Feature",
          "properties": {},
          "geometry": {
            "type": "Polygon",
            "coordinates": [
              //存放经纬度
            ]
          }
        }
      ]
    }
    
    
    function get(){
        var lsit = [];
        //xmJson你要的区域的经纬度字符串
        var xmList = xmJson.split(';');
        xmList.forEach(item=>{
            lsit.push([Number(item.split(',')[0]),Number(item.split(',')[1])]);
        })
        eachart.features[0].geometry.coordinates.push(lsit);
        console.log(JSON.stringify(eachart))
    }

    输出结果

    然后将json放入网站运行

    能展示出你要的区域是就成功了.

    这个json就可以在echarts中使用了(运行展示效果)

     

     

    更多相关内容
  • Echarts 官方Geojson 地图数据 全国及省市自治区的地图
  • 包含了广东省、全市、全区县。所有地图数据json文件。命名是区划编码。
  • 全国省市地图json数据

    2021-08-25 11:57:54
    全国省市县的json数据,echarts等可视化插件拿来即用
  • echarts 上海市json数据
  • 世界地图JSON数据格式

    2022-01-14 09:32:45
    世界地图JSON数据格式
  • 山西地图数据json文件

    2017-12-28 11:40:52
    山西地图数据json文件数据包 echarts山西省地理数据shanxi.json,json格式
  • 包括重庆json格式地图数据,和重庆所有区县的json格式地图数据。用于echarts.js等可视化工具中绘制地图。
  • 很多朋友在找中国各省具体到市县级的 JSON 地图文件这里面包含了中国的地图的模块json,以及对应的省市地图json
  • 中国地图边界数据json具体到县市
  • 省、市、县各级地图数据json 可直接配合插件调用 附有《最新县及县以上行政区划代码》方便查找
  • echarts可以使用的全国地图Json数据,包含省、市、区县
  • echarts地图做三级省市县联动JSON格式资源
  • echart全国省市县地图数据json文件

    热门讨论 2017-11-22 15:50:02
    最近项目用到echart的地图,发现echart官方已不提供地图数据下载,上传该资源应该用得上
  • ECharts 之前提供下载的矢量地图数据来自第三方,由于部分数据不符合国家《测绘法》规定,目前暂时停止下载服务。 建议大家使用以百度地图为底图的形式,参考实例:...
  • 全国主要城市地图数据json 格式 340 多个城市,爬虫出来的。可以做echarts 等空间的地图数据
  • Echarts 深圳地图 最新10区 json 格式数据,可用于Echarts地图相关应用展示
  • 成都市最新区域json数据
  • 2022年自己调整过使用过的echarts南京市最新11区json地图,包括鼓楼区、玄武区、建邺区、秦淮区、雨花台区、栖霞区、六合区、浦口区、江宁区、溧水区、高淳区。echarts直接调用json文件。
  • 安徽省地图json数据

    2020-06-16 10:27:45
    echars实现地图市级 安徽省地图json数据
  • 地图mock数据json文件

    2020-10-20 17:38:27
    var provinces = [{ "name": "北京市", "id": "110000" }, { "name": "天津市", "id": "120000" }, { "name": "河北省", "id": "130000" }, { "name": "山西省", "id": "140000" }, { ...}, {
  • 美国地图json文件usa.json美国地图json文件usa.json美国地图json文件usa.json
  • 贵州地图json数据

    2020-10-10 17:06:39
    贵州的json地图数据,包含新增贵安地区,百度echarts地图,谷歌地图均可使用,地图的名称可以根据自己的需要进行修改
  • 2022年自己调整过使用过的echart杭州市最新10区json地图,包括上城区,下城区,江干区,拱墅区,西湖区,滨江区,萧山区,余杭区,富阳区,临安区。echarts直接调用json文件。
  • 2022年自己调整过使用过的echarts常州市最新5区1县级市json地图,包括金坛区、武进区、新北区、天宁区、钟楼区、溧阳市。echarts直接调用json文件。
  • 2021年2月制作,包含翠亨新区。画线大致准确。数据有adcode和name。
  • 自己整理的中国各区县的json文件,可用于百度Echart图标地图展示,包含带子区域和不带子区域两种文件,子文件夹以区划代码命名,方便程序获取,如需要区划代码对照请查看我的共享资源下载
  • 全国省市区乡镇街道四级行政区json数据,含城市电话区号,行政编码,高德地图坐标系准确的中心点和边界线。
  • 四川省地市地图经纬度json数据;包含了四川省所有的地市州的地图经纬度数据,需要自己绘制地图的拿去用
  • echarts地图json数据(含全国和省以及全国、省、地市)最全,绝对有县级数据,非常完整的省市区县json数据,本人也是找了很久才找到

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 42,985
精华内容 17,194
关键字:

地图数据json