效果如下
// 安装的依赖
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
});
参考链接如下:
geojson2svg 案例
npm geojson2svg npm官方说明
如何用 JS 获取 SVG 内 path 元素中的图形的实际位置及尺寸?
参考源:
geojson大杀器
Node.js 笔记二:入门及GeoNode.js GIS相关库
方案2:geojsonTosvg
geojsonTosvg 案例 (这个挺好的_后续优化可能会选择它)