svg+echarts实现自定义厂区平面图

一、最终效果

最终效果图

二、设计思路

  • 身为后端开发,对前端的理解致涉及基础的html+css+js这老三样,等上手做项目的时候发现还是掌握不够。
  • 思路来源于这篇文章,通过svg矢量图来实现自定义地图。
  • 最初也只是打算通过上述的方式来实现,但echarts又有很强的图表功能,不忍放弃。遂又从网上发现了另一个开源项目,该项目通过将svg转为geojson数据,通过echarts实现自定义地图功能,正好满足我的需求。

三、开发步骤

3.1 在AI中画矢量图,并保存为svg格式

  1. 作为专业的设计软件,AI可以画矢量图,但由于能力首先,作者花了两杯喜茶的钱,请专业设计师学姐帮我画了矢量图。

  1. 将矢量图存储为svg格式,编码选择utf-8,可查看svg源码。

3.2 使用svg2geojson插件,将svg转为geojson格式

按照该项目的插件,将准备好的svg按步骤转化为geojson文件

3.3 使用echarts,展现效果

  • 由于单位隐私要求,只展示svg2geojson的代码,供大家参考。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="lib/echarts.min.js"></script>
  <script src="lib/jquery.min.js"></script>
  <script src="json/map/zhongshang-geojson.json"></script>
</head>

<body>
  <div id="main" style="width: 230px;height:300px;margin:0 auto"></div>
  <script>
    function randomData() {
    return Math.round(Math.random() * 1000);
}
var option = {
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高', '低'], // 文本,默认为数值文本
        calculable: true,
        color:["#f6f4aa","#c9e6ea"]
    },
    series: [{
        type: 'map',
        mapType: 'zhongshan',
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
        roam: false,
        label: {
            normal: {
                show: false
            },
            emphasis: {
                show: true,
                textStyle: {
                    color: "#943b3b"
                }
            }
        },
        itemStyle: {
            normal: {
                borderColor: "#2f3035",
            },
            emphasis: {
                areaColor:"#ff8a6b",
                textStyle: {
                    color: "#fbcacd"
                }
            }
        },
        data: [{
            name: "古镇",
            value: randomData()
        }, {
            name: "小榄镇",
            value: randomData()
        }, {
            name: "东风镇",
            value: randomData()
        }, {
            name: "南头镇",
            value: randomData()
        }, {
            name: "黄圃镇",
            value: randomData()
        }, {
            name: "阜沙镇",
            value: randomData()
        }, {
            name: "三角镇",
            value: randomData()
        }, {
            name: "横栏镇",
            value: randomData()
        }, {
            name: "东升镇",
            value: randomData()
        }, {
            name: "港口镇",
            value: randomData()
        }, {
            name: "民众镇",
            value: randomData()
        }, {
            name: "火炬开发区",
            value: randomData()
        }, {
            name: "坦洲镇",
            value: randomData()
        }, {
            name: "板芙镇",
            value: randomData()
        }, {
            name: "南朗镇",
            value: randomData()
        }, {
            name: "三乡镇",
            value: randomData()
        }, {
            name: "大涌镇",
            value: randomData()
        }, {
            name: "石岐区",
            value: randomData()
        }, {
            name: "五桂山镇",
            value: randomData()
        }, {
            name: "南区",
            value: randomData()
        }, {
            name: "沙溪镇",
            value: randomData()
        }, {
            name: "西区",
            value: randomData()
        }, {
            name: "东区",
            value: randomData()
        }, {
            name: "神湾镇",
            value: randomData()
        }]

    }]
};

/*$.get('zhongshang-geojson.json', function(geoJson) {
    echarts.registerMap('zhongshan', geoJson);
    var chart = echarts.init(document.getElementById('main'));
    chart.setOption(option);
});*/

//在线编辑器不能跨域所以使用下面代码导入geojson
var geoJson={"type":"FeatureCollection","features":[{"type":"Feature","properties":{"name":"古镇","cp":[-237.079,1102.087]},"geometry":{"type":"Polygon","coordinates":[[[-173.25,1057.666],[-173.25,1067.291],[-173.25,1072.166],[-174.625,1078.416],[-178.625,1085.541],[-181.625,1090.916],[-185.625,1097.541],[-188.375,1105.416],[-190.25,1111.791],[-194.5,1122.666],[-198,1130.416],[-203.5,1137.166],[-208.75,1147.166],[-213.5,1154.166],[-219.25,1165.166],[-222.75,1172.166],[-222.75,1173.666],[-228.5,1175.416],[-234.75,1178.666],[-239.25,1181.666],[-247,1187.166],[-252.25,1191.416],[-253.75,1191.416],[-257.25,1187.416],[-262.75,1180.916],[-271.25,1171.916],[-272.75,1166.916],[-272.75,1160.916],[-270.75,1156.166],[-267.5,1151.666],[-263.25,1147.166],[-262.75,1144.416],[-265.5,1141.166],[-272.75,1136.416],[-277.75,1131.916],[-279.25,1128.916],[-279.25,1123.416],[-279.25,1116.916],[-280.5,1111.416],[-280.5,1106.916],[-280.5,1101.416],[-280.5,1093.166],[-280.5,1089.416],[-276.25,1081.166],[-271.25,1073.166],[-265.25,1066.666],[-260.25,1057.666],[-254.25,1049.666],[-250.5,1041.666],[-247.5,1035.416],[-244.5,1027.916],[-240.75,1021.166],[-237.25,1016.666],[-232.25,1013.666],[-228.5,1013.666],[-225.5,1020.666],[-222,1027.916],[-217,1036.416],[-210.5,1043.916],[-203.5,1050.416],[-197.5,1055.416],[-192.5,1056.416],[-188.25,1052.916],[-183.75,1049.916],[-178,1049.666],[-176,1054.166]]]}},{"type":"Feature","properties":{"name":"小榄镇","cp":[-153.812,1128.853]},"geometry":{"type":"Polygon","coordinates":[[[-173.25,1057.666],[-173.25,1067.291],[-173.25,1072.166],[-174.625,1078.416],[-178.625,1085.541],[-181.625,1090.916],[-185.625,1097.541],[-188.375,1105.416],[-190.25,1111.791],[-194.5,1122.666],[-198,1130.416],[-203.5,1137.166],[-208.75,1147.166],[-213.5,1154.166],[-219.25,1165.166],[-222.75,1172.166],[-222.75,1173.666],[-221.25,1176.416],[-215.5,1178.666],[-212.75,1185.416],[-211,1193.666],[-207.75,1201.666],[-206.25,1207.916],[-201.5,1210.666],[-196.75,1212.166],[-190.75,1215.166],[-186.75,1218.416],[-182.5,1224.416],[-177,1230.916],[-175.5,1232.666],[-173.25,1230.166],[-166.25,1222.916],[-158,1208.916],[-151.25,1196.416],[-145.25,1189.416],[-137.5,1186.666],[-122.75,1182.666],[-115.25,1178.416],[-109.25,1169.666],[-103.25,1160.416],[-96.5,1152.666],[-91.25,1148.416],[-89.25,1147.166],[-89.25,1137.916],[-89.25,1130.666],[-93.25,1123.166],[-95.75,1116.416],[-102,1109.416],[-107,1104.666],[-109,1101.166],[-110.75,1098.666],[-109.25,1094.416],[-108.75,1091.416],[-109,1087.666],[-110.75,1085.166],[-112.5,1080.916],[-113,1075.666],[-112.75,1070.916],[-112.5,1065.916],[-111.75,1060.166],[-109.75,1056.666],[-106.5,1050.916],[-104,1045.166],[-103.5,1041.666],[-104,1036.666],[-105.5,1032.666],[-110.25,1029.416],[-117.75,1027.916],[-123.25,1027.916],[-126.25,1027.916],[-132.5,1032.916],[-140.25,1036.416],[-147,1040.666],[-154,1046.916],[-161,1052.916],[-164.5,1058.166],[-166.75,1060.166],[-168.5,1060.416],[-171.5,1059.166]]]}},{"type":"Feature","properties":{"name":"东风镇","cp":[-106.667,1199.666]},"geometry":{"type":"Polygon","coordinates":[[[-87.333,1147.333],[-81.917,1145.999],[-73.5,1140.999],[-66.333,1133.333],[-60.333,1124.666],[-52.833,1114.999],[-46,1108.999],[-38.333,1103.999],[-33.667,1103.999],[-28.167,1104.666],[-21.167,1107.833],[-13.833,1111.499],[-6.667,1114.499],[0.5,1115.833],[7.5,1115.833],[11.668,1115.833],[10.834,1120.166],[7,1123.666],[2.333,1126.999],[-3.667,1128.999],[-10.333,1131.333],[-15,1132.999],[-18.167,1136.499],[-22.167,1141.666],[-26.667,1147.666],[-30.833,1151.499],[-34.333,1155.166],[-38.167,1157.166],[-41.167,1159.666],[-42.5,1163.166],[-42.167,1166.666],[-39.5,1169.666],[-36.333,1173.666],[-29.333,1177.166],[-20.833,1181.499],[-13.833,1184.666],[-8.167,1187.999],[-5.667,1190.499],[-2.833,1193.833],[-18.5,1195.333],[-24.333,1190.999],[-33.333,1187.166],[-41.333,1184.333],[-50.333,1184.499],[-58.167,1186.999],[-65.167,1190.333],[-72,1195.999],[-76,1200.166],[-79,1204.833],[-80.167,1209.661],[-82.333,1216.166],[-83.167,1223.499],[-85.5,1227.666],[-89.25,1232.666],[-98.167,1241.666],[-103,1246.499],[-105,1249.666],[-107.5,1249.666],[-110.667,1252.166],[-113.167,1255.833],[-117.833,1261.833],[-120.833,1266.999],[-124.667,1270.833],[-128.833,1276.166],[-132.375,1279.999],[-136.833,1281.333],[-142.167,1281.333],[-147.167,1279.333],[-151.333,1275.333],[-155.167,1269.999],[-156,1265.166],[-157.5,1262.166],[-159.833,1257.833],[-164.333,1250.833],[-173.542,1236.248],[-175.5,1232.666],[-173.25,1230.166],[-166.25,1222.916],[-158,1208.916],[-151.25,1196.416],[-145.25,1189.416],[-137.5,1186.666],[-122.75,1182.666],[-115.25,1178.416],[-109.25,1169.666],[-103.25,1160.416],[-96.5,1152.666],[-91.25,1148.416],[-89.25,1147.166]]]}},{"type":"Feature","properties":{"name":"南头镇","cp":[-58.417,1236.833]},"geometry":{"type":"Polygon","coordinates":[[[-18.5,1195.333],[-24.333,1190.999],[-33.333,1187.166],[-41.333,1184.333],[-50.333,1184.499],[-58.167,1186.999],[-65.167,1190.333],[-72,1195.999],[-76,1200.166],[-79,1204.833],[-80.167,1209.661],[-82.333,1216.166],[-83.167,1223.499],[-85.5,1227.666],[-89.25,1232.666],[-98.167,1241.666],[-103,1246.499],[-105,1249.666],[-101.833,1254.999],[-96.333,1260.999],[-90.333,1264.999],[-83.167,1268.999],[-76.167,1271.166],[-69.667,1271.166],[-64.167,1271.166],[-59,1268.833],[-54.167,1268.333],[-47.833,1267.833],[-43.167,1267.499],[-36,1268.166],[-29.667,1269.499],[-25,1271.166],[-19.833,1273.166],[-17.5,1269.999],[-15,1265.666],[-14.167,1262.333],[-14.167,1257.999],[-14.167,1254.999],[-17.167,1251.499],[-19.167,1247.999],[-18.5,1245.166],[-16.5,1241.499],[-15.167,1237.666],[-15.5,1233.499],[-17.833,1228.749],[-21.5,1225.666],[-23.333,1222.499],[-22.167,1218.166],[-20.333,1214],[-19.167,1209.833],[-18.5,1205],[-18,1199.833]]]}},{"type":"Feature","properties":{"name":"黄圃镇","cp":[48.584,1244.916]},"geometry":{"type":"Polygon","coordinates":[[[-18.369,1195.499],[-18.369,1195.499],[-17.869,1200],[-18.369,1205.167],[-19.036,1210],[-20.202,1214.167],[-22.036,1218.333],[-23.202,1222.666],[-21.369,1225.833],[-17.702,1228.916],[-15.369,1233.666],[-15.036,1237.833],[-16.369,1241.666],[-18.369,1245.333],[-19.036,1248.166],[-17.036,1251.666],[-14.036,1255.166],[-14.036,1258.166],[-14.036,1262.499],[-14.869,1265.833],[-17.369,1270.166],[-19.702,1273.333],[-16,1278.663],[-9,1289.166],[-2.702,1293.166],[8.5,1300.666],[21,1305.666],[30.5,1309.166],[37,1313.166],[40,1317.166],[43.5,1322.666],[47,1322.666],[52,1322.666],[61.5,1314.166],[75,1306.166],[87,1297.166],[100.5,1289.666],[111.5,1281.406],[123,1278.166],[137.5,1273.166],[153.5,1273.166],[170,1273.166],[186,1269.666],[191.5,1268.666],[197.5,1264.666],[202.5,1262.166],[204.75,1257.416],[207.75,1252.416],[207.75,1249.166],[205.75,1247.166],[200.75,1244.166],[194.75,1242.166],[188,1240.416],[180.5,1239.416],[174,1236.916],[165.25,1234.916],[154.25,1232.416],[142.25,1233.666],[134,1231.416],[130.75,1229.916],[126.25,1228.749],[121.75,1225.166],[118.25,1221.416],[115.25,1217.416],[111.5,1210.666],[110.5,1203.916],[106.75,1202.666],[98.25,1199.416],[92.274,1197.666],[85.5,1193.999],[78.25,1187.416],[75.5,1180.416],[75.25,1175.666],[69,1175.666],[58.75,1175.666],[48,1181.166],[37.5,1186.416],[28.25,1188.416],[16.5,1190.916],[4,1192.406],[-2.833,1193.833]]]}},{"type":"Feature","properties":{"name":"阜沙镇","cp":[26.25,1148.666]},"geometry":{"type":"Polygon","coordinates":[[[75.25,1175.666],[69,1175.666],[58.75,1175.666],[48,1181.166],[37.5,1186.416],[28.25,1188.416],[16.5,1190.916],[4,1192.406],[-2.833,1193.833],[-5.667,1190.499],[-8.167,1187.999],[-13.833,1184.666],[-20.833,1181.499],[-29.333,1177.166],[-36.333,1173.666],[-39.5,1169.666],[-42.167,1166.666],[-42.5,1163.166],[-41.167,1159.666],[-38.167,1157.166],[-34.333,1155.166],[-30.833,1151.499],[-26.667,1147.666],[-22.167,1141.666],[-18.167,1136.499],[-15,1132.999],[-10.333,1131.333],[-3.667,1128.999],[2.333,1126.999],[7,1123.666],[10.834,1120.166],[11.668,1115.833],[16.375,1114.166],[22,1110.916],[26.75,1108.166],[31.75,1104.666],[37.5,1100.666],[38.25,1099.166],[39.75,1103.406],[42,1106.166],[44.25,1109.166],[48.25,1109.916],[52.5,1109.916],[63.5,1110.166],[69,1110.416],[72,1112.166],[72.25,1115.666],[71,1123.166],[70.5,1127.416],[70.5,1130.291],[72.75,1131.666],[77,1132.166],[80,1132.166],[82,1133.916],[82,1137.166],[80.25,1139.666],[78.75,1142.166],[76.75,1146.499],[75.25,1148.166],[75.25,1151.666],[75.5,1154.666],[78.25,1158.666],[80.5,1163.666],[80.25,1168.166],[77.5,1173.416]]]}},{"type":"Feature","properties":{"name":"三角镇","cp":[154.25,1184.166]},"geometry":{"type":"Polygon","coordinates":[[[82,1137.166],[80.25,1139.666],[78.75,1142.166],[76.75,1146.499],[75.25,1148.166],[75.25,1151.666],[75.5,1154.666],[78.25,1158.666],[80.5,1163.666],[80.25,1168.166],[77.5,1173.416],[75.25,1175.666],[75.5,1180.416],[78.25,1187.416],[85.5,1193.999],[92.274,1197.666],[98.25,1199.416],[106.75,1202.666],[110.5,1203.916],[111.5,1210.666],[115.25,1217.416],[118.25,1221.416],[121.75,1225.166],[126.25,1228.749],[130.75,1229.916],[134,1231.416],[142.25,1233.666],[154.25,1232.416],[165.25,1234.916],[174,1236.916],[180.5,1239.416],[188,1240.416],[194.75,1242.166],[200.75,1244.166],[205.75,1247.166],[209.335,1244.333],[212.168,1242.166],[219.168,1238.166],[222.668,1234.833],[226.834,1231.166],[232.834,1225.833],[237.168,1222.166],[241,1218.833],[246,1213.999],[252.668,1211.166],[260.168,1208.333],[265,1206.499],[266.334,1205.499],[263.834,1203.166],[262,1198.833],[259.5,1195.166],[256.334,1193.166],[251.668,1188.833],[245.668,1184.833],[242.334,1182.333],[237.5,1179.499],[230.668,1177.833],[228.334,1176.499],[226,1174.666],[225.834,1169.338],[225.834,1165.505],[226.168,1160.338],[226,1156.005],[225.668,1150.171],[224.668,1146.005],[222.334,1143.505],[218.334,1143.671],[212.5,1146.671],[205,1148.505],[195.668,1150.171],[186.668,1150.005],[182.668,1148.505],[176.5,1144.671],[170.793,1140.838],[164.5,1135.505],[160.168,1132.674],[153,1129.841],[146.668,1127.341],[140.5,1127.341],[138.5,1124.341],[138,1120.674],[137.668,1115.674],[137.168,1112.507],[134,1113.174],[126.168,1116.007],[116.168,1119.841],[110,1122.007],[101.834,1125.341],[91.168,1129.174],[85.668,1132.674],[83,1135.841]]]}},{"type":"Feature","properties":{"name":"横栏镇","cp":[-167.938,968.103]},"geometry":{"type":"Polygon","coordinates":[[[-240.75,1021.166],[-237.25,1016.666],[-232.25,1013.666],[-228.5,1013.666],[-225.5,1020.666],[-222,1027.916],[-217,1036.416],[-210.5,1043.916],[-203.5,1050.416],[-197.5,1055.416],[-192.5,1056.416],[-188.25,1052.916],[-183.75,1049.916],[-178,1049.666],[-176,1054.166],[-173.25,1057.666],[-171.5,1059.166],[-168.5,1060.416],[-166.75,1060.166],[-164.5,1058.166],[-161,1052.916],[-154,1046.916],[-147,1040.666],[-140.25,1036.416],[-132.5,1032.916],[-126.25,1027.916],[-123.333,1025.833],[-121.833,1023.666],[-120.167,1019.999],[-118.5,1016.333],[-118.5,1011.333],[-117.333,1006.166],[-117.333,1002.166],[-117.333,998.499],[-116,993.666],[-114.167,990.333],[-110.5,988.166],[-106.333,987.333],[-100.667,985.833],[-94.667,984.333],[-89.5,982.333],[-84.333,979.666],[-83.5,975.666],[-84.5,971.499],[-86.667,966.999],[-88.333,960.333],[-89,954.666],[-89.833,949.333],[-90,944.166],[-90.167,937.833],[-91.667,933.333],[-94.5,929.499],[-99.5,923.999],[-103,919.999],[-107.833,916.166],[-112,913.833],[-116.5,912.666],[-121.5,912.666],[-126,912.666],[-130.5,912.666],[-132.333,910.833],[-133.333,908.499],[-134.333,905.666],[-138.167,904.499],[-142.667,903.333],[-146,901.666],[-148,898.833],[-158,897.166],[-164,897.166],[-167,895.999],[-170.333,897.833],[-175.167,902.499],[-179.833,909.333],[-183.5,915.666],[-188,923.999],[-193.167,929.999],[-198.333,934.999],[-205.833,941.333],[-215.333,948.333],[-220.833,952.499],[-227.667,959.499],[-232.167,966.333],[-235.667,973.499],[-237,978.999],[-238.667,989.166],[-238.167,999.499],[-237.833,1007.833],[-239.667,1013.666]]]}},{"type":"Feature","properties":{"name":"东升镇","cp":[-52.75,1070.333]},"geometry":{"type":"Polygon","coordinates":[[[-84.333,979.666],[-89.5,982.333],[-94.667,984.333],[-100.667,985.833],[-106.333,987.333],[-110.5,988.166],[-114.167,990.333],[-116,993.666],[-117.333,998.499],[-117.333,1002.166],[-117.333,1006.166],[-118.5,1011.333],[-118.5,1016.333],[-120.167,1019.999],[-121.833,1023.666],[-123.333,1025.833],[-126.25,1027.916],[-123.25,1027.916],[-117.75,1027.916],[-110.25,1029.416],[-105.5,1032.666],[-104,1036.666],[-103.5,1041.666],[-104,1045.166],[-106.5,1050.916],[-109.75,1056.666],[-111.75,1060.166],[-112.5,1065.916],[-112.75,1070.916],[-113,1075.666],[-112.5,1080.916],[-110.75,1085.166],[-109,1087.666],[-108.75,1091.416],[-109.25,1094.416],[-110.75,1098.666],[-109,1101.166],[-107,1104.666],[-102,1109.416],[-95.75,1116.416],[-93.25,1123.166],[-89.25,1130.666],[-89.25,1137.916],[-89.25,1147.166],[-87.333,1147.333],[-81.917,1145.999],[-73.5,1140.999],[-66.333,1133.333],[-60.333,1124.666],[-52.833,1114.999],[-46,1108.999],[-38.333,1103.999],[-33.667,1103.999],[-28.167,1104.666],[-21.167,1107.833],[-13.833,1111.499],[-6.667,1114.499],[0.5,1115.833],[7.5,1115.833],[11.668,1115.833],[16.375,1114.166],[22,1110.916],[26.75,1108.166],[31.75,1104.666],[37.5,1100.666],[38.25,1099.166],[39.875,1097.791],[42.5,1095.666],[45.125,1093.166],[48,1089.791],[49.875,1087.166],[52.75,1083.166],[55.75,1078.416],[59.75,1073.166],[63.5,1069.291],[63.5,1068.041],[60.5,1068.541],[56.25,1070.916],[50.625,1072.916],[46,1074.666],[41,1074.791],[35.625,1073.416],[32.125,1070.291],[29.375,1066.291],[27,1063.499],[25,1060.041],[22.625,1056.916],[19.75,1054.291],[16.5,1051.541],[12.875,1048.791],[9.875,1044.666],[7,1041.791],[3.625,1038.166],[0,1037.166],[-2.625,1035.791],[-6.625,1033.916],[-13.125,1030.291],[-21,1026.416],[-26.25,1023.041],[-31.375,1019.541],[-35.75,1018.916],[-39.375,1018.041],[-42.25,1015.791],[-44.375,1013.541],[-47,1010.541],[-51.75,1005.291],[-53.375,1002.416],[-56.875,997.666],[-59.75,993.541],[-63.625,990.666],[-68.5,988.666],[-72.75,987.791],[-76.625,987.666],[-79.625,986.916],[-81.75,984.416]]]}},{"type":"Feature","properties":{"name":"港口镇","cp":[106.165,1068.001]},"geometry":{"type":"Polygon","coordinates":[[[3.625,1038.166],[7,1041.791],[9.875,1044.666],[12.875,1048.791],[16.5,1051.541],[19.75,1054.291],[22.625,1056.916],[25,1060.041],[27,1063.499],[29.375,1066.291],[32.125,1070.291],[35.625,1073.416],[41,1074.791],[46,1074.666],[50.625,1072.916],[56.25,1070.916],[60.5,1068.541],[63.5,1068.041],[63.5,1069.291],[59.75,1073.166],[55.75,1078.416],[52.75,1083.166],[49.875,1087.166],[48,1089.791],[45.125,1093.166],[42.5,1095.666],[39.875,1097.791],[38.25,1099.166],[39.75,1103.406],[42,1106.166],[44.25,1109.166],[48.25,1109.916],[52.5,1109.916],[63.5,1110.166],[69,1110.416],[72,1112.166],[72.25,1115.666],[71,1123.166],[70.5,1127.416],[70.5,1130.291],[72.75,1131.666],[77,1132.166],[80,1132.166],[82,1133.916],[82,1137.166],[83,1135.841],[85.666,1132.674],[91.166,1129.174],[101.835,1125.341],[110,1122.007],[116.166,1119.841],[126.166,1116.007],[134,1113.174],[137.166,1112.507],[141.25,1107.666],[147,1102.416],[155.5,1094.666],[161.25,1089.666],[166.5,1082.916],[172,1075.666],[178.5,1067.916],[183.75,1060.416],[188.5,1056.166],[196.5,1047.916],[201.5,1041.916],[208.25,1038.166],[217,1030.916],[225,1026.916],[226.25,1024.666],[221.5,1024.666],[206.75,1024.666],[197.75,1025.916],[188.75,1028.416],[183,1030.166],[175.25,1029.916],[168.5,1029.666],[160.75,1030.416],[151.25,1031.166],[145.75,1030.166],[138.25,1022.416],[134,1020.666],[128.25,1020.666],[124.5,1019.416],[118.75,1014.666],[114.938,1008.666],[110.75,1004.916],[103.5,1004.916],[100,1004.916],[97,1008.416],[92.25,1011.666],[88,1011.916],[85.75,1009.666],[83,1006.166],[80.25,1004.916],[77,1004.916],[75.5,1006.666],[72.75,1006.416],[71.5,1004.916],[69,1002.416],[65.25,1002.416],[63.5,1001.416],[60,999.416],[55.5,999.416],[52,999.416],[48,1004.166],[46.75,1008.416],[45,1013.666],[42.75,1018.166],[38,1023.666],[33.25,1029.416],[29.25,1032.916],[23,1034.416],[20.25,1032.666],[17.5,1028.416],[15.5,1024.666],[14,1019.916],[11.25,1017.916],[8.75,1017.166],[7.25,1019.166],[5.75,1023.666],[3.625,1027.166],[2,1030.916],[2,1033.916]]]}},{"type":"Feature","properties":{"name":"民众镇","cp":[260,1091.666]},"geometry":{"type":"Polygon","coordinates":[[[266.334,1205.499],[263.834,1203.166],[262,1198.833],[259.5,1195.166],[256.334,1193.166],[251.668,1188.833],[245.668,1184.833],[242.334,1182.333],[237.5,1179.499],[230.668,1177.833],[228.334,1176.499],[226,1174.666],[225.834,1169.338],[225.834,1165.505],[226.168,1160.338],[226,1156.005],[225.668,1150.171],[224.668,1146.005],[222.334,1143.505],[218.334,1143.671],[212.5,1146.671],[205,1148.505],[195.668,1150.171],[186.668,1150.005],[182.668,1148.505],[176.5,1144.671],[170.793,1140.838],[164.5,1135.505],[160.166,1132.674],[153,1129.841],[146.666,1127.341],[140.5,1127.341],[138.5,1124.341],[138,1120.674],[137.666,1115.674],[137.166,1112.507],[141.25,1107.666],[147,1102.416],[155.5,1094.666],[161.25,1089.666],[166.5,1082.916],[172,1075.666],[178.5,1067.916],[183.75,1060.416],[188.5,1056.166],[196.5,1047.916],[201.5,1041.916],[208.25,1038.166],[217,1030.916],[225,1026.916],[226.25,1024.666],[229.5,1022.666],[237.75,1020.666],[245,1022.166],[261,1023.416],[272.25,1025.166],[282,1026.416],[291.25,1027.416],[308.5,1027.666],[330.25,1030.416],[348.5,1030.166],[364,1031.416],[376.75,1034.166],[386.5,1036.916],[394.5,1038.666],[396.75,1038.916],[396.75,1043.166],[396.75,1051.916],[395.5,1052.916],[391.75,1052.916],[384.25,1052.416],[378.5,1051.916],[369.75,1056.416],[364.75,1061.166],[360.25,1067.166],[355.5,1072.916],[348.5,1079.916],[342.75,1087.666],[338.25,1095.666],[333,1108.666],[325.5,1122.916],[321.5,1131.166],[317.75,1141.416],[316,1150.416],[316.5,1156.166],[316.25,1160.916],[310.75,1167.416],[306.75,1172.916],[301.25,1179.837],[293.25,1184.666],[286.75,1189.416],[279.5,1194.916],[271.75,1201.416]]]}},{"type":"Feature","properties":{"name":"火炬开发区","cp":[210.875,977.791]},"geometry":{"type":"Polygon","coordinates":[[[396.75,1038.916],[394.5,1038.666],[386.5,1036.916],[376.75,1034.166],[364,1031.416],[348.5,1030.166],[330.25,1030.416],[308.5,1027.666],[291.25,1027.416],[282,1026.416],[272.25,1025.166],[261,1023.416],[245,1022.166],[237.75,1020.666],[229.5,1022.666],[226.25,1024.666],[221.5,1024.666],[206.75,1024.666],[197.75,1025.916],[188.75,1028.416],[183,1030.166],[175.25,1029.916],[168.5,1029.666],[160.75,1030.416],[151.25,1031.166],[145.75,1030.166],[138.25,1022.416],[134,1020.666],[134,1014.416],[134,1009.166],[134,999.416],[135.25,991.666],[134,986.916],[131.25,981.666],[131.25,977.416],[131.25,971.916],[131.25,967.916],[128,964.166],[125.5,961.416],[125.5,956.666],[125.5,949.666],[127.25,945.416],[131.75,943.916],[137.166,943.166],[141,941.916],[147.75,937.416],[151,935.916],[152.75,934.166],[151.25,931.166],[151.75,927.166],[154,924.916],[158.25,924.916],[164,923.666],[169.25,922.166],[175.875,916.916],[180,913.666],[186.5,909.416],[193,905.166],[195.75,902.916],[201.75,902.916],[207.75,902.916],[210.5,906.666],[215.25,909.416],[219.25,912.416],[223.75,913.666],[228,914.416],[230,916.166],[232,919.666],[236.25,924.666],[238.5,935.166],[238.5,940.666],[234.5,948.666],[235.25,956.166],[239.75,957.666],[245,957.916],[254.75,957.166],[266.959,959.166],[273,961.666],[277.5,967.041],[280.75,971.916],[285,973.166],[291.25,972.166],[299,972.166],[304.75,973.666],[314.5,978.916],[319,979.916],[324.75,980.916],[331.5,983.916],[335.5,988.166],[339.25,990.666],[345.75,991.666],[353.25,991.916],[360,994.666],[364,994.666],[371.75,993.666],[378.25,989.916],[384.25,987.166],[386.5,985.916],[389.5,988.666],[391.25,994.666],[392.75,1000.166],[394.75,1009.916],[395.75,1020.666],[396.75,1029.791],[396.75,1034.666]]]}},{"type":"Feature","properties":{"name":"坦洲镇","cp":[163.418,541.25]},"geometry":{"type":"Polygon","coordinates":[[[224.75,626.916],[232.25,619.416],[240.75,612.916],[248,601.916],[252.5,593.166],[259,586.166],[267.25,579.416],[274.5,573.166],[280.834,566.833],[288.834,559.833],[292.834,552.833],[294.834,545.166],[292.5,540.166],[290.168,534.166],[286.5,528.499],[281.834,524.833],[273.834,523.499],[266.5,523.499],[257.834,520.833],[250.834,518.166],[242.834,516.166],[238.5,511.499],[238.168,505.499],[237.834,498.499],[237.168,492.499],[228.5,486.833],[217.168,483.499],[200.168,476.166],[188.168,470.166],[173.834,462.833],[164.168,457.166],[162.5,452.833],[157.168,449.166],[152.168,443.833],[146.168,435.833],[146.168,432.5],[140.5,432.5],[136.168,435.833],[133.5,441.5],[129.168,451.833],[124.834,459.5],[120.834,463.5],[117.168,467.5],[111.5,474.166],[104.834,478.5],[100.5,480.833],[95.834,485.833],[87.834,493.833],[79.168,502.166],[79.168,506.499],[74.168,510.499],[67.168,516.833],[59.5,522.166],[54.5,527.166],[49.5,534.166],[44.834,540.833],[43.5,544.499],[43.5,546.499],[47.5,550.833],[52.5,555.833],[60.5,563.833],[66.834,573.166],[69,581.499],[69,589.499],[75.168,595.166],[78.168,599.166],[79.5,613.166],[78.168,620.499],[87.168,623.499],[103.834,626.916],[112.5,631.499],[123.168,640.833],[126.5,643.833],[137.5,645.833],[146.5,645.833],[154.834,641.833],[169.303,633.499],[179.5,628.166],[188.835,625.166],[193.5,624.833],[197.168,629.166],[205.168,632.499],[215.5,632.499]]]}},{"type":"Feature","properties":{"name":"板芙镇","cp":[-33.719,745.385]},"geometry":{"type":"Polygon","coordinates":[[[-129.5,817.826],[-121.5,817.826],[-115.833,817.826],[-111.167,812.492],[-106.167,808.159],[-102.833,804.492],[-96.833,804.492],[-90.833,804.492],[-85.5,807.159],[-83.5,801.492],[-80.167,798.826],[-71.833,798.826],[-61.833,798.826],[-57.167,802.492],[-51.833,805.826],[-48.5,802.826],[-46.5,801.159],[-43.167,799.826],[-39.167,800.492],[-36.5,805.159],[-30.833,805.826],[-25.5,805.826],[-16.5,802.826],[-10.167,800.159],[-3.833,796.159],[0.167,792.826],[5.5,790.826],[12.168,797.159],[14.834,801.159],[20.834,804.326],[29.834,809.826],[31.168,804.326],[31.168,798.159],[33.834,790.826],[36.834,784.492],[41.168,781.159],[44.834,777.492],[52.168,771.826],[60.168,767.826],[69,762.159],[75.5,762.159],[75.5,757.159],[72.834,750.159],[69,745.492],[69,741.492],[72.834,739.826],[81.834,739.826],[85.168,736.492],[85.168,732.492],[83.5,729.159],[78.5,726.826],[71.168,723.826],[63.168,720.159],[56.834,715.159],[53.834,708.826],[52.834,704.826],[43.5,703.159],[36.5,697.826],[29.168,691.492],[21.5,695.159],[13.168,698.826],[2.5,699.826],[-9.167,702.492],[-22.167,703.826],[-29.833,702.492],[-32.167,698.826],[-32.167,693.492],[-27.167,688.159],[-22.167,682.826],[-18.5,674.826],[-18.167,666.159],[-20.5,660.159],[-22.167,655.159],[-27.5,653.493],[-32.833,653.493],[-40.5,661.159],[-52.167,678.826],[-63.833,690.493],[-72.5,701.159],[-81.833,712.159],[-90.167,720.826],[-100.5,729.159],[-108.167,735.66],[-115.167,744.492],[-121.5,752.492],[-126.833,766.825],[-129.5,779.159],[-129.5,793.492],[-129.944,806.492]]]}},{"type":"Feature","properties":{"name":"南朗镇","cp":[325.764,887.249]},"geometry":{"type":"Polygon","coordinates":[[[219.25,912.416],[223.75,913.666],[228,914.416],[230,916.166],[232,919.666],[236.25,924.666],[238.5,935.166],[238.5,940.666],[234.5,948.666],[235.25,956.166],[239.75,957.666],[245,957.916],[254.75,957.166],[266.959,959.166],[273,961.666],[277.5,967.041],[280.75,971.916],[285,973.166],[291.25,972.166],[299,972.166],[304.75,973.666],[314.5,978.916],[319,979.916],[324.75,980.916],[331.5,983.916],[335.5,988.166],[339.25,990.666],[345.75,991.666],[353.25,991.916],[360,994.666],[364,994.666],[371.75,993.666],[378.25,989.916],[384.25,987.166],[386.5,985.916],[389,981.416],[393.25,975.916],[396.75,970.916],[398,964.916],[398,958.416],[400.25,948.666],[402.5,936.666],[405,927.666],[409,917.666],[409,909.666],[409,902.916],[409.111,895.416],[404,892.666],[396.75,890.666],[391,888.916],[386.25,885.166],[383.25,880.416],[380.75,872.166],[380.5,866.166],[386,864.166],[393.75,864.166],[396.75,861.416],[398.25,856.666],[396.75,850.166],[392,847.166],[379.5,845.916],[370.75,844.166],[366.75,841.666],[365.5,836.166],[363.75,829.916],[360.5,823.916],[355,814.416],[352.5,808.166],[351,799.916],[351.75,787.916],[352,779.666],[346.5,779.666],[337.75,781.166],[329.5,783.166],[322,785.666],[314.181,787.416],[306.25,786.916],[301,782.666],[293,775.916],[288.5,772.916],[283.75,772.916],[276.25,776.416],[268.5,779.166],[264.25,778.916],[260.75,775.416],[258,771.166],[250.75,780.916],[246.5,785.166],[240.5,787.666],[233.25,790.166],[225,793.666],[220.75,796.916],[222.5,803.916],[225.25,811.666],[229.5,816.166],[233.75,821.416],[239,826.416],[238.5,830.666],[236,833.166],[232.5,836.916],[228.5,837.166],[231.5,843.666],[236,852.166],[240.5,859.916],[241.75,863.916],[242,871.416],[240,877.166],[233.75,884.916],[230.75,889.916],[228.5,895.166],[228.25,902.916],[225.25,908.916]]]}},{"type":"Feature","properties":{"name":"神湾镇","cp":[20,616.5]},"geometry":{"type":"Polygon","coordinates":[[[103.835,626.916],[87.168,623.499],[78.168,620.499],[79.5,613.166],[78.168,599.166],[75.168,595.166],[69,589.499],[69,581.499],[66.834,573.166],[60.5,563.833],[52.5,555.833],[47.5,550.833],[43.5,546.499],[43.5,544.499],[44.834,540.833],[49.5,534.166],[54.5,527.166],[59.5,522.166],[67.168,516.833],[74.168,510.499],[79.168,506.499],[79.168,502.166],[73.668,502.166],[66.5,502.166],[57.75,502.166],[49.5,505.666],[40,509.666],[30.5,515.916],[25,522.666],[17.75,530.916],[11.75,539.166],[7.25,547.666],[3.75,558.666],[1.25,568.666],[-1.833,577.666],[-6.75,583.666],[-12.75,589.416],[-18,596.166],[-22.389,602.166],[-25,613.416],[-27.25,622.416],[-29.5,632.916],[-32.833,645.833],[-32.833,653.493],[-27.5,653.493],[-22.167,655.159],[-20.5,660.159],[-18.167,666.159],[-18.5,674.826],[-22.167,682.826],[-27.167,688.159],[-32.167,693.492],[-32.167,698.826],[-29.833,702.492],[-22.167,703.826],[-9.167,702.492],[2.5,699.826],[13.168,698.826],[21.5,695.159],[29.168,691.492],[30.25,686.416],[34,677.416],[37,670.666],[40.5,662.916],[45.5,659.416],[53,660.166],[58,660.916],[61.75,660.166],[63.25,656.666],[62.25,651.916],[62.5,647.916],[64,645.833],[70,645.833],[76,641.666],[79.25,640.416],[85.168,640.416],[96,639.166],[99.75,638.666],[102.5,636.916],[103.835,634.666],[105.5,632.666],[105.5,630.166]]]}},{"type":"Feature","properties":{"name":"三乡镇","cp":[161.334,677.166]},"geometry":{"type":"Polygon","coordinates":[[[224.75,626.916],[215.5,632.499],[205.168,632.499],[197.168,629.166],[193.5,624.833],[188.835,625.166],[179.5,628.166],[169.303,633.499],[154.835,641.833],[146.5,645.833],[137.5,645.833],[126.5,643.833],[123.168,640.833],[112.5,631.499],[103.834,626.916],[103.835,626.916],[105.5,630.166],[105.5,632.666],[103.835,634.666],[102.5,636.916],[99.75,638.666],[96,639.166],[85.168,640.416],[79.25,640.416],[76,641.666],[70,645.833],[64,645.833],[62.5,647.916],[62.25,651.916],[63.25,656.666],[61.75,660.166],[58,660.916],[53,660.166],[45.5,659.416],[40.5,662.916],[37,670.666],[34,677.416],[30.25,686.416],[29.168,691.492],[36.5,697.826],[43.5,703.159],[52.834,704.826],[53.834,708.826],[56.834,715.159],[63.168,720.159],[71.168,723.826],[78.5,726.826],[83.5,729.159],[85.168,732.492],[85.168,736.492],[92.5,736.492],[97.834,736.492],[103.168,733.832],[107.5,731.165],[113.834,726.832],[118.5,725.832],[126.959,728.499],[131.5,733.165],[135.834,736.492],[139.834,739.165],[147.834,741.499],[153.834,743.165],[157.834,744.499],[161.834,743.165],[169.303,737.499],[175.5,733.832],[180.5,732.832],[187.168,735.66],[194.834,741.165],[201.168,746.165],[205.168,747.499],[208.5,740.832],[215.5,735.66],[223.168,737.165],[233.5,738.832],[240.5,738.165],[247.5,737.499],[250.168,733.165],[250.168,727.499],[250.168,718.499],[253.5,709.499],[258.168,706.832],[256.834,701.832],[253.5,696.832],[252.168,690.832],[252.168,686.166],[258.168,675.832],[262.5,669.832],[265.5,667.832],[272.168,666.832],[275.5,663.832],[275.5,657.165],[275.5,650.499],[267.834,645.833],[258.834,639.499],[246.834,635.499],[235.834,633.165],[229.168,632.165],[224.834,629.165]]]}},{"type":"Feature","properties":{"name":"大涌镇","cp":[-106,858.666]},"geometry":{"type":"Polygon","coordinates":[[[-51.833,805.826],[-57.167,802.492],[-61.833,798.826],[-71.833,798.826],[-80.167,798.826],[-83.5,801.492],[-85.5,807.159],[-90.833,804.492],[-96.833,804.492],[-102.833,804.492],[-106.167,808.159],[-111.167,812.492],[-115.833,817.826],[-121.5,817.826],[-129.5,817.826],[-135,825.832],[-140.167,835.166],[-145.5,845.832],[-148.167,854.166],[-148.167,862.499],[-150.167,869.166],[-154.833,875.666],[-162.125,885.166],[-167,892.833],[-167,895.999],[-164,897.166],[-158,897.166],[-148,898.833],[-146,901.666],[-142.667,903.333],[-138.167,904.499],[-134.333,905.666],[-133.333,908.499],[-132.333,910.833],[-130.5,912.666],[-126,912.666],[-121.5,912.666],[-116.5,912.666],[-112,913.833],[-107.833,916.166],[-103,919.999],[-100.937,918.166],[-99.125,917.103],[-96.687,917.228],[-91.625,916.728],[-88.562,915.166],[-87.937,911.853],[-88.875,909.354],[-91.125,906.104],[-92.937,902.729],[-91.687,898.854],[-89,896.416],[-84.625,892.791],[-78.5,888.416],[-73.5,886.416],[-69.75,884.791],[-64.625,886.666],[-59.25,887.666],[-54.5,887.041],[-46,886.166],[-42.75,884.666],[-40.375,881.666],[-35.875,874.291],[-39.25,870.791],[-41.875,867.041],[-44.125,862.416],[-47,857.166],[-50.625,852.166],[-53.875,849.416],[-54.875,840.791],[-55.375,836.541],[-55.25,830.041],[-55.125,824.166],[-54.75,817.166],[-52.375,809.791]]]}},{"type":"Feature","properties":{"name":"石岐区","cp":[74.438,965.478]},"geometry":{"type":"Polygon","coordinates":[[[60,999.416],[63.5,1001.416],[65.25,1002.416],[69,1002.416],[71.5,1004.916],[72.75,1006.416],[75.5,1006.666],[77,1004.916],[80.25,1004.916],[83,1006.166],[85.75,1009.666],[88,1011.916],[92.25,1011.666],[97,1008.416],[100,1004.916],[100,1002.416],[102.75,999.416],[104.5,996.666],[104.5,992.666],[101.5,986.166],[100,977.666],[95.5,967.166],[90.5,955.666],[91,951.666],[92.75,946.666],[91.75,937.166],[88.5,935.416],[75.25,938.416],[70.75,935.416],[69,929.916],[63.5,917.916],[62,911.666],[50.5,909.666],[40.75,908.166],[40.75,911.666],[45.25,917.416],[46.5,925.666],[52,939.416],[52.5,955.916],[53.25,961.416],[56.5,969.416],[57.25,979.666],[53,986.166],[53,994.666]]]}},{"type":"Feature","properties":{"name":"五桂山镇","cp":[115.33,785.996]},"geometry":{"type":"Polygon","coordinates":[[[85.168,736.492],[81.834,739.826],[72.834,739.826],[69,741.492],[69,745.492],[72.834,750.159],[75.5,757.159],[75.5,762.159],[69,762.159],[60.168,767.826],[52.168,771.826],[44.834,777.492],[41.168,781.159],[36.834,784.492],[33.834,790.826],[31.168,798.159],[31.168,804.326],[29.834,809.826],[33.834,812.833],[36.334,820.833],[42.5,830.166],[46.168,834.166],[52.168,837.166],[57.5,838.499],[66.5,840.166],[77.168,842.499],[86.5,845.166],[91.834,848.166],[91.834,853.166],[94.834,859.413],[97.5,869.833],[104.5,877.166],[110.5,885.833],[116.834,895.999],[121.168,898.833],[126.834,898.833],[131.5,895.999],[134.5,894.499],[140.168,893.166],[143.834,891.499],[150.168,887.166],[150.168,882.916],[150.168,879.166],[143.168,875.666],[139.168,872.833],[140.168,867.833],[145.168,859.413],[148.5,855.833],[150.168,850.166],[150.168,847.166],[143.5,847.166],[139.5,842.166],[138.834,835.499],[138.834,829.166],[140.834,821.832],[145.834,817.826],[150.168,817.826],[156.834,826.499],[163.5,833.499],[168.168,834.499],[170.5,829.166],[175.168,822.832],[179.168,819.499],[183.5,814.499],[186.5,814.166],[191.834,815.832],[196.5,819.499],[196.5,825.832],[194.168,830.499],[191.5,835.499],[192.834,837.166],[196.5,839.499],[201.834,838.832],[205.5,837.166],[210.5,833.832],[219.25,832.166],[227.168,834.166],[228.5,837.166],[232.5,836.916],[236,833.166],[238.5,830.666],[239,826.416],[233.75,821.416],[229.5,816.166],[225.25,811.666],[222.5,803.916],[220.75,796.916],[225,793.666],[233.25,790.166],[240.5,787.666],[246.5,785.166],[250.75,780.916],[258,771.166],[260.834,765.499],[258.5,762.833],[253.5,759.499],[247.5,759.499],[243.168,755.166],[242.5,751.166],[244.5,745.833],[247.5,741.166],[247.5,737.499],[240.5,738.165],[233.5,738.832],[223.168,737.165],[215.5,735.66],[208.5,740.832],[205.168,747.499],[201.168,746.165],[194.834,741.165],[187.168,735.66],[180.5,732.832],[175.5,733.832],[169.303,737.499],[161.834,743.165],[157.834,744.499],[153.834,743.165],[147.834,741.499],[139.834,739.165],[135.834,736.492],[131.5,733.165],[126.959,728.499],[118.5,725.832],[113.834,726.832],[107.5,731.165],[103.168,733.832],[97.834,736.492],[92.5,736.492],[85.168,736.492]]]}},{"type":"Feature","properties":{"name":"南区","cp":[-0.542,854.455]},"geometry":{"type":"Polygon","coordinates":[[[29.834,809.826],[33.834,812.833],[36.334,820.833],[42.5,830.166],[46.168,834.166],[52.168,837.166],[57.5,838.499],[57.5,842.166],[57.5,845.166],[57.5,849.833],[57.5,855.833],[61.168,862.833],[61.168,869.833],[56.5,875.666],[51.834,878.499],[49.168,882.916],[47.834,894.166],[45.5,905.499],[40.75,908.166],[35.5,908.166],[33.168,908.166],[31.168,902.916],[27.5,898.833],[23.168,891.499],[18.834,888.833],[11.834,887.166],[3.5,886.833],[-8.833,886.833],[-22.389,886.166],[-26.833,882.916],[-35.875,874.291],[-39.25,870.791],[-41.875,867.041],[-44.125,862.416],[-47,857.166],[-50.625,852.166],[-53.875,849.416],[-54.875,840.791],[-55.375,836.541],[-55.25,830.041],[-55.125,824.166],[-54.75,817.166],[-52.375,809.791],[-51.833,805.826],[-48.5,802.826],[-46.5,801.159],[-43.167,799.826],[-39.167,800.492],[-36.5,805.159],[-30.833,805.826],[-25.5,805.826],[-16.5,802.826],[-10.167,800.159],[-3.833,796.159],[0.167,792.826],[5.5,790.826],[12.168,797.159],[14.834,801.159],[20.834,804.326],[29.834,809.826]]]}},{"type":"Feature","properties":{"name":"沙溪镇","cp":[-33.969,933.697]},"geometry":{"type":"Polygon","coordinates":[[[-84.333,979.666],[-83.5,975.666],[-84.5,971.499],[-86.667,966.999],[-88.333,960.333],[-89,954.666],[-89.833,949.333],[-90,944.166],[-90.167,937.833],[-91.667,933.333],[-94.5,929.499],[-99.5,923.999],[-103,919.999],[-100.937,918.166],[-99.125,917.103],[-96.687,917.228],[-91.625,916.728],[-88.562,915.166],[-87.937,911.853],[-88.875,909.354],[-91.125,906.104],[-92.937,902.729],[-91.687,898.854],[-89,896.416],[-84.625,892.791],[-78.5,888.416],[-73.5,886.416],[-69.75,884.791],[-64.625,886.666],[-59.25,887.666],[-54.5,887.041],[-46,886.166],[-42.75,884.666],[-40.375,881.666],[-35.875,874.291],[-26.833,882.916],[-22.389,886.166],[-8.833,886.833],[3.5,886.833],[11.834,887.166],[18.834,888.833],[23.168,891.499],[27.5,898.833],[31.168,902.916],[33.168,908.166],[34.5,914.167],[32.5,919.999],[29.834,925.5],[21.834,934.167],[12.5,946.167],[7.5,955.167],[2.896,963.5],[2.896,970.916],[5.5,979.666],[6.168,987.833],[5.5,991.041],[0.167,988.5],[-6.833,983.833],[-11.5,979.666],[-17.833,978.208],[-21.5,985.833],[-23.833,994.666],[-23.5,1003.833],[-24.167,1008.5],[-31.375,1010.167],[-34.25,1010.167],[-46.5,1002.416],[-53.375,1002.416],[-56.875,997.666],[-59.75,993.541],[-63.625,990.666],[-68.5,988.666],[-72.75,987.791],[-76.625,987.666],[-79.625,986.916],[-81.75,984.416],[-84.333,979.666]]]}},{"type":"Feature","properties":{"name":"西区","cp":[26.375,992.791]},"geometry":{"type":"Polygon","coordinates":[[[60,999.416],[55.5,999.416],[52,999.416],[48,1004.166],[46.75,1008.416],[45,1013.666],[42.75,1018.166],[38,1023.666],[33.25,1029.416],[29.25,1032.916],[23,1034.416],[20.25,1032.666],[17.5,1028.416],[15.5,1024.666],[14,1019.916],[11.25,1017.916],[8.75,1017.166],[7.25,1019.166],[5.75,1023.666],[3.625,1027.166],[2,1030.916],[2,1033.916],[3.625,1038.166],[0,1037.166],[-2.625,1035.791],[-6.625,1033.916],[-13.125,1030.291],[-21,1026.416],[-26.25,1023.041],[-31.375,1019.541],[-35.75,1018.916],[-39.375,1018.041],[-42.25,1015.791],[-44.375,1013.541],[-47,1010.541],[-51.75,1005.291],[-53.375,1002.416],[-46.5,1002.416],[-34.25,1010.167],[-31.375,1010.167],[-24.167,1008.5],[-23.5,1003.833],[-23.833,994.666],[-21.5,985.833],[-17.833,978.208],[-11.5,979.666],[-6.833,983.833],[0.167,988.5],[5.5,991.041],[6.168,987.833],[5.5,979.666],[2.896,970.916],[2.896,963.5],[7.5,955.167],[12.5,946.167],[21.834,934.167],[29.834,925.5],[32.5,919.999],[34.5,914.167],[33.168,908.166],[35.5,908.166],[40.75,908.166],[40.75,911.666],[45.25,917.416],[46.5,925.666],[52,939.416],[52.5,955.916],[53.25,961.416],[56.5,969.416],[57.25,979.666],[53,986.166],[53,994.666]]]}},{"type":"Feature","properties":{"name":"东区","cp":[120.043,914.083]},"geometry":{"type":"Polygon","coordinates":[[[57.5,838.499],[57.5,842.166],[57.5,845.166],[57.5,849.833],[57.5,855.832],[61.166,862.832],[61.166,869.832],[56.5,875.666],[51.835,878.5],[49.166,882.916],[47.835,894.166],[45.5,905.499],[40.75,908.166],[50.5,909.666],[62,911.666],[63.5,917.916],[69,929.916],[70.75,935.416],[75.25,938.416],[88.5,935.416],[91.75,937.166],[92.75,946.666],[91,951.666],[90.5,955.666],[95.5,967.166],[100,977.666],[101.5,986.166],[104.5,992.666],[104.5,996.666],[102.75,999.416],[100,1002.416],[100,1004.916],[103.5,1004.916],[110.75,1004.916],[114.938,1008.666],[118.75,1014.666],[124.5,1019.416],[128.25,1020.666],[134,1020.666],[134,1014.416],[134,1009.166],[134,999.416],[135.25,991.666],[134,986.916],[131.25,981.666],[131.25,977.416],[131.25,971.916],[131.25,967.916],[128,964.166],[125.5,961.416],[125.5,956.666],[125.5,949.666],[127.25,945.416],[131.75,943.916],[137.166,943.166],[141,941.916],[147.75,937.416],[151,935.916],[152.75,934.166],[151.25,931.166],[151.75,927.166],[154,924.916],[158.25,924.916],[164,923.666],[169.25,922.166],[175.875,916.916],[180,913.666],[186.5,909.416],[193,905.166],[195.75,902.916],[201.75,902.916],[207.75,902.916],[210.5,906.666],[215.25,909.416],[219.25,912.416],[225.25,908.916],[228.25,902.916],[228.5,895.166],[230.75,889.916],[233.75,884.916],[240,877.166],[242,871.416],[241.75,863.916],[240.5,859.916],[236,852.166],[231.5,843.666],[228.5,837.166],[227.168,834.166],[219.25,832.166],[210.5,833.832],[205.5,837.166],[201.834,838.832],[196.5,839.499],[192.834,837.166],[191.5,835.499],[194.168,830.499],[196.5,825.832],[196.5,819.499],[191.834,815.832],[186.5,814.166],[183.5,814.499],[179.168,819.499],[175.168,822.832],[170.5,829.166],[168.168,834.499],[163.5,833.499],[156.835,826.499],[150.166,817.826],[145.835,817.826],[140.835,821.832],[138.835,829.166],[138.835,835.499],[139.5,842.166],[143.5,847.166],[150.166,847.166],[150.166,850.166],[148.5,855.832],[145.166,859.413],[140.166,867.832],[139.166,872.832],[143.166,875.666],[150.166,879.166],[150.166,882.916],[150.166,887.166],[143.835,891.499],[140.166,893.166],[134.5,894.499],[131.5,895.999],[126.835,898.833],[121.166,898.833],[116.835,895.999],[110.5,885.833],[104.5,877.166],[97.5,869.832],[94.835,859.413],[91.835,853.166],[91.835,848.166],[86.5,845.166],[77.166,842.499],[66.5,840.166]]]}}]};


echarts.registerMap('zhongshan', geoJson);
    var chart = echarts.init(document.getElementById('main'));
    chart.setOption(option);
  </script>
</body>

</html>

四、踩的坑

4.1 正确的svg格式

  • 矢量图需要通过钢笔工具画出封闭路径,才能正确通过svg2geojson插件转化为geojson数据。

4.2 svg的<rect>标签在geojson中无点坐标

  • 出现这个问题的原因是,svg中的rect标签,即矩形标签,通过插件转换后,在geojson中是polygon,即多边形。但由于通过观察svg的代码发现,rect标签并非由多个点构成的面,而是以原点+宽高的形式表现,插件只能将polygon正确转化,rect则不行。

  • 解决办法:在AI中在矩形图像中,多添加几个锚点,将其转为polygon,最后再导出

4.3 最后在浏览器中,地图上下颠倒180度

  • 这是个小坑,有人也在gitee项目中留言并有解决办法,svg和geojson的坐标系不一致,会导致实际效果图是上下颠倒的状态,因此,最好在AI中预先矢量图上下颠倒,再存储为svg。

Last modification:November 16th, 2021 at 09:19 pm