使用QGIS生成自定义图片的GeoJson

发布于：2024年07月02日

更新于：2024年07月08日

gis echarts

#效果预览

效果浏览

#思路介绍

自定义图片最关键的即为将图片生成对应的GeoJson数据，然后就能导入到Echarts中去。

首先下载QGIS软件
添加图片栅格图层
新建自定义shapeFile图层
选项中编码选择utf-8，图形类型选择多边形，如果需要新建字段可以在下方选择，有字符串、整数、小数、日期四种类型
左下方图层选择新建的shapeFile图层
手图标为拖动模式，铅笔图标为开启编辑模式，绿色多边形为开启标线
标线模式下，点击鼠标左键，右键为完成区域划分，点手图标可以拖动图层
完成全部区域划分（矢量化）后，左下角图层导出为geojson格式即可

#示例代码

html
<div id="map" style="width: 600px;height:400px;"></div>
 
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script>
  var myChart = echarts.init(document.getElementById('map'));
 
  const data = {
    "type": "FeatureCollection",
    "name": "西游记四大洲",
    "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
    "features": [
      { "type": "Feature", "properties": { "id": 2, "name": "北俱芦洲", "desc": "北为水", "area": 20.0 }, "geometry": { "type": "MultiPolygon", "coordinates": [[[[296.018031827975165, -99.124496229924432], [319.096599429141406, -96.279193374986122], [352.686980355496416, -95.01461432834688], [364.226264156079537, -96.595338136645935], [372.841208911309423, -102.285943846522542], [381.930370809029, -109.557273364698204], [386.040252710606524, -113.98330002793557], [368.968435580976688, -122.677280973580395], [339.962153698689008, -123.862823829804697], [329.055159421425458, -127.656560969722435], [309.138039436857355, -129.79053811092615], [289.299955642704163, -124.890294305199092], [281.791517553283597, -110.031490507187925], [289.695136594778887, -100.626183847808534], [296.018031827975165, -99.124496229924432]]]] } },
      { "type": "Feature", "properties": { "id": 3, "name": "南赡部洲", "desc": "南为火", "area": 300.0 }, "geometry": { "type": "MultiPolygon", "coordinates": [[[[244.960652819915424, -209.775162810858603], [259.187167094606991, -200.290819961064244], [275.784767081747077, -200.290819961064244], [286.849833739840506, -196.339010440316599], [306.766953724408665, -196.497082821146506], [323.522626092378687, -185.906233305542798], [336.168416558771128, -186.064305686372734], [352.76601654591127, -187.486957113841868], [383.27398604608311, -175.947673313258747], [394.655197465836295, -175.631528551598933], [412.675448880445629, -188.119246637161496], [420.262923160281048, -189.541898064630658], [420.895212683600676, -200.290819961064244], [410.936652691316681, -228.743848510447322], [417.101475543682966, -240.283132311030442], [417.101475543682966, -247.554461829206105], [411.885086976296066, -252.138560873273377], [406.036408885589594, -252.454705634933191], [407.617132693888607, -244.867231355097715], [408.40749459803817, -240.441204691860349], [402.558816507331585, -234.276381839494036], [404.29761269646059, -229.376138033766949], [392.60025651504759, -237.437829456092118], [389.913026040939144, -236.805539932772518], [391.019532706748464, -224.159749466380049], [377.741452717036395, -235.066743743643542], [379.164104144505586, -240.91542183435007], [387.858085090150382, -244.07686945094818], [397.500500320774677, -243.128435165968767], [397.974717463264369, -248.028678971695854], [385.48699937770175, -254.509646585721981], [393.390618419197097, -275.849417997759247], [393.390618419197153, -296.714972267306905], [363.831083204004699, -321.058118915112402], [354.346740354210397, -319.951612249303025], [351.343365118442136, -319.00317796432364], [348.498062263503869, -320.583901772622653], [343.597818457776782, -320.900046534282467], [341.068660364498271, -319.951612249303025], [339.171791794539388, -325.800290340009553], [333.955403227152487, -320.741974153452588], [324.629132758188064, -320.425829391792774], [320.045033714120791, -325.642217959179675], [319.886961333290856, -333.229692239015151], [326.209856566487133, -343.030179850469324], [325.735639423997384, -348.088496037026289], [322.099974664909553, -351.249943653624427], [313.722138480924571, -352.83066746192344], [302.024782299511514, -352.672595081093561], [293.963090877186346, -349.51114746449548], [290.327426118098515, -339.236442710551557], [284.952965169881679, -334.81041604731422], [272.149102322659303, -316.157875109385316], [271.516812799339675, -301.77328845386387], [278.15585279419571, -292.921235127389139], [274.994405177597628, -282.488457992615338], [259.503311856266862, -273.320259904480793], [250.018969006472446, -244.393014212607994], [249.860896625642539, -235.066743743643542], [260.451746141246247, -234.59252660115385], [260.609818522076125, -229.376138033766949], [244.960652819915424, -209.775162810858603]]]] } },
      { "type": "Feature", "properties": { "id": 4, "name": "东胜神洲", "desc": "东为木", "area": 30.0 }, "geometry": { "type": "MultiPolygon", "coordinates": [[[[448.776052146125267, -153.198423172154548], [458.146231609764754, -152.91447833992305], [464.818935167204927, -156.037871494469528], [481.713652684979024, -178.327540824642142], [483.133376846136571, -184.716299549850817], [481.145763020516029, -195.364230758532017], [480.577873356053033, -209.561472370106912], [477.738425033738054, -215.808258679199866], [476.460673288696341, -224.610548478376302], [473.90516979861286, -233.696783109784235], [470.497831811834885, -233.980727942015733], [457.720314361417479, -219.783486330440837], [450.195776307282813, -206.580051631676156], [446.646465904389061, -194.654368677953244], [444.090962414305579, -175.346120086211386], [442.529265837032312, -172.790616596127904], [444.374907246537077, -166.685802703150728], [449.911831475051258, -161.290850890752267], [448.492107313893825, -154.19223008496482], [448.776052146125267, -153.198423172154548]]]] } },
      { "type": "Feature", "properties": { "id": 1, "name": "西牛贺洲", "desc": "西为金", "area": 105.0 }, "geometry": { "type": "MultiPolygon", "coordinates": [[[[146.995182291666566, -141.031510416666606], [167.025390624999915, -126.192057291666586], [174.597786458333275, -126.558463541666583], [184.002213541666606, -130.222526041666583], [201.162239583333303, -128.879036458333246], [219.177213541666646, -136.695703124999937], [232.0625, -137.306380208333252], [238.35247395833332, -139.44375], [244.825651041666674, -152.695442708333275], [250.871354166666663, -152.512239583333269], [265.161197916666652, -170.52721354166664], [270.046614583333337, -170.893619791666623], [270.840494791666686, -174.61875], [257.199601463035208, -185.609877296730275], [245.902075421368522, -195.275538465711776], [233.16097660771112, -206.133716272424749], [234.227965178312957, -213.665400300202521], [247.847760461877783, -228.414948187933987], [242.826637776692564, -233.059486671730298], [245.46272718641481, -236.323216417100667], [246.404187689886953, -248.248382794415448], [252.178478777849932, -258.102336064091389], [254.124163818359193, -268.270109501591378], [253.935871717664725, -272.851883951822856], [246.090367522062877, -273.479524287471008], [213.390306034794321, -257.662987829137705], [201.716195791738755, -254.273730016637671], [191.799478488498011, -249.754719599970997], [182.824221688729494, -230.172341127748751], [167.823617666738727, -216.803601978443197], [156.212271457247965, -210.589962655526563], [148.241239194516481, -207.640053077980241], [136.25330878363684, -171.236913610387631], [135.751196515118295, -162.638241012007995], [146.995182291666566, -141.031510416666606]]]] } }
    ]
  }
 
  echarts.registerMap('西游记地图', data);
 
  const option = {
    backgroundColor: '#f0f0f0', // 设置地图背景色为灰色
    tooltip: {
      // 窗口外框
      trigger: 'item',
      padding: 0,
      borderWidth: 0,
      borderColor: '#FFFFFF',
      backgroundColor: '#FFFFFF',
      formatter: function (params) {
        const { data } = params
 
        var content = '<div style="padding: 10px; background-color: #fff; border: 1px solid #ccc; border-radius: 5px;">';
        content += '<h4 style="margin: 0 0 10px; font-size: 14px;">' + data.name + '</h4>';
 
        content += '<div style="margin-bottom: 5px; display: flex; align-items: center;">';
        content += '<span style="display: inline-block; width: 10px; height: 10px; background-color: ' + params.color + '; margin-right: 5px;"></span>';
        content += '<span style="flex: 1;">' + '面积' + '：</span>';
        content += '<span>' + data.area * 100 + 'k㎡' + '</span>';
        content += '</div>';
 
        content += '<div style="margin-bottom: 5px; display: flex; align-items: center;">';
        content += '<span style="display: inline-block; width: 10px; height: 10px; background-color: ' + params.color + '; margin-right: 5px;"></span>';
        content += '<span style="flex: 1;">' + '描述' + '：</span>';
        content += '<span>' + data.desc + '</span>';
        content += '</div>';
 
        content += '</div>';
        return content;
      }
    },
    series: [{
      name: "西游记地图",
      type: "map",
      map: '西游记地图',
      data: data.features.map(feature => feature.properties),
      // roam: true, // 鼠标缩放和平移漫游
      itemStyle: {
        areaColor: '#FCF3CF',
        borderColor: '#00a5fe',
        borderWidth: 1
      },
      label: {
        show: true,
        color: '#2E86C1',
        fontSize: 14,
        fontWeight: 'bold',
        emphasis: { // 设置鼠标悬停时的样式
          color: "#21618C" // 修改hover地图item的label颜色为绿色
        }
      },
 
    }]
  };
 
  myChart.setOption(option);
 
</script>

#QGIS移动或旋转多边形要素

首先打开编辑模式
编辑选项中使用移动或旋转，鼠标单击即可

#参考文章

以西游记四大部洲地图为例，制作Echarts自定义地图