zoukankan      html  css  js  c++  java
  • echarts加载geojson

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    </head>
    
    <body>
        <div id="main" style="height: 500px; 500px;"></div>
    </body>
    <script type="text/javascript">
    //
    $.get('../../json/fmq1.json', function (Json) { echarts.registerMap('fmq1', Json); var chart = echarts.init(document.getElementById('main')); chart.setOption({ series: [{ type: 'map', mapType: 'fmq1' }] }); }); </script> </html>

    注意geojson中的属性字段,name字段需要小写,不识别NAME


    geojson:

    {
        "type": "FeatureCollection",
        "features": [{
                "type": "Feature",
                "geometry": ,
                "properties": {
                    "OBJECTID": 0,
                    "CC": "",
                    "GB": "",
                    "name": "斗山历史文化街区核心保护范围",
                    "PAC": "",
                    "PRCTAG": "",
                    "ELEMSTIME": "",
                    "ELEMETIME": "",
                    "AREACODE": 0,
                    "FEATID": "",
                    "CHANGETYPE": 0,
                    "CHANGEATT": "",
                    "Shape_Leng": 0,
                    "Shape_Area": 0
                }
            },
  • 相关阅读:
    CSU-ACM2020寒假集训比赛2
    js动画(一)
    响应式基本知识
    移动web基本知识
    premere cs4绿色版 安装 并且 视频导出 讲解
    样式重置
    html5图片标签与属性
    我眼中的科研
    Chrome浏览器上无法使用西瓜影音???
    双系统引导菜单设置
  • 原文地址:https://www.cnblogs.com/weixiaoxiang/p/13139138.html
Copyright © 2011-2022 走看看