geojson生成圖片_ JS【聰明人都知道的】

阿新 • • 發佈：2021-02-01

技術標籤：工具

效果如下

// 安裝的依賴
npm install geojson2svg
npm install reproject
npm install proj4

dom 如下
在這裡插入圖片描述
js 如下

/**
 * @param {*} geojson = {"type": "FeatureCollection","crs": {
    "type": "name","properties": {"name": "EPSG:4326"}},"features": [ {"type": "Feature","geometry": 
    {"type": "Polygon","coordinates": [
      [[108.153213989268,41.08685720641945],[109.32264273102045,24.027757043029396],[121.53887198705156,26.069893222620774],[118.50246904763671,40.027401130129945],[108.153213989268,41.08685720641945]]]}}],"properties":{"type": "building","height":3 ,"id": "fide53sk_-0"}}
 * @param {*} options   {
          viewportSize: {width:78,height:56}, // svg 大小
          mapExtent:  { // 墨卡託投影座標 包圍盒
            left: 11039560.707265345, // minx
            right: 13529645.3393041,    
            bottom: 2756790.790458125,
            top: 5025161.534985688 },// maxy
          attributes: {
            'style': 'stroke:#006600; fill: #F0F8FF;stroke-width:0.5px;',
            'vector-effect':'non-scaling-stroke'
          },
          explode: false
        }
 */ 

function drawGeoJSON (geojson, options) {
	// 座標轉換成EPSG:3857
    var geojson3857 = reproject.reproject(JSON.parse(geojson),'EPSG:4326','EPSG:3857',proj4.defs);
    // var svgMap = document.getElementById(domId);
    var convertor = geojson2svg(options);
    var svgElements = convertor.convert(geojson3857) 
;
     
    let arrPath = []
    svgElements.forEach(function(svgStr) {
     arrPath.push(svgStr)
        // var svg = parseSVG(svgStr);
        // svgMap.appendChild(svg);
    });
    return arr
}
// 生成svg
function parseSVG(s, id) {
    // var svgMap = document.getElementById(domId);
    var div= document. 
createElementNS('http://www.w3.org/1999/xhtml', 'div');
    div.innerHTML= '<svg xmlns="http://www.w3.org/2000/svg" style="border: 1px solid">'+s+'</svg>';
    var frag= document.createDocumentFragment();
    while (div.firstChild.firstChild)
        frag.appendChild(div.firstChild.firstChild);
    return frag;
}```

// ** 具體使用 
//content就是你的geojson
let num = Math.floor(Math.random() * 25)  % colors.length
let colors = ['#705ca2','#32a9af','#3cc177','#ec985d','#71a05d','#81b7ec']
let color = colors[num]
let options = {
    viewportSize: {width:70, height:50}, // svg 大小
    mapExtent:  item.mapExtent,
    attributes: {
      'style': 'stroke:#ffffff; fill: '+color+'; stroke-width:2px;',
      'vector-effect':'non-scaling-stroke'
    },
    explode: false
}
let pathArr = drawGeoJSON(content, options)
let that = this

pathArr.forEach((element,index) => {
	// 給map + index 生成svg
  that.parseSVG(element,'map' + index)
  // 獲取path 大小
  let svgMap = document.getElementById('map' + index).children[0].getBBox()
  let width = svgMap.width > 78 ? 78 : svgMap.width
  let height = svgMap.height > 56 ? 56 : svgMap.height
  
  // document.getElementById('map' + index).style.width = width
  // document.getElementById('map' + index).style.height = height
  let top = ((56 - height) / 2)  - 15 > 0 ? ((56 - height) / 2)  - 10 : 0
  let left = ((78 - width) / 2) - 10  > 0 ? ((78 - width) / 2) - 10 : 0
  
  // 為了使生成的svg 在div 居中
  document.getElementById('map' + index).style.top = (56 - height) / 2 
  document.getElementById('map' + index).style.left = (78 - width) / 2
});