PHP SVG动态创建彩色美国地图

时间:2015-08-16 00:50:55

标签: php css svg maps

我试图创建一个美国地图,其某些状态将某些颜色用于参考。

目前我的代码只会为一种颜色设置颜色。 我需要两种颜色,所以目前我不得不创建两张地图。

使用一种颜色代码创建单个地图的代码之一是:

$bumperStates = array(
     "tn", // Tennessee
     "al", // Alabama
     "ga", // Georgia
     "ky", // Kentucky
     "ca", // California
     "nm", // New Mexico
     "wy", // Wyoming
     "ne", // Nebraska
     "ks", // Kansas
     "ok", // Oklahoma
     "tx", // Texas
     "ia", // Iowa
     "mo", // Montana
     "ar", // Arkansas
     "la", // Louisiana
     "ms", // Mississippi
     "fl", // Florida
     "nc", // North Carolina
     "va", // Virginia
     "wv", // West Virginia
     "oh", // Ohio
     "sd", // South Dakota
     "in", // Indiana
     "ky", // Kentucky
     "sc", // South Carolina
     "pa", // Pennsylvania
     "ny", // New York
     "vt", // Vermont
     "me", // Maine
     "il", // Illinois
     "de", // Delaware
     "nj", // New Jersey
     "nh", // New Hampshire
     "ri" // Rhode Island
);
error_reporting( E_ALL );
ini_set( 'display_errors', 1 );

function createPNG( $svgfile, $pngfile ) {
    $command = "rsvg " . $svgfile . " " . $pngfile;
    $make_map = system( $command, $retval );
    if ( $retval ) echo "PNG creation failed."; // Did it work?
}

$bumperstateArray = array();
// Add dot in front of each state to make it a CSS class selector
foreach ( $bumperStates as $bumperstate ) {
    $bumperstateArray[] = '.' . $bumperstate;
}
// Make array into a string consisting of a list of states
$bumperstateList = implode( ', ', $bumperstateArray );

// Generate new map data
$map = file_get_contents( "USA-map.svg" );
if ( $bumperStates ) {
    $newdata = preg_replace( '/\.bumperSign {/i', '.bumperSign, ' . $bumperstateList . ' {', $map );
}

// Write the new map to a file
/*
$fh = fopen( "newmap.svg", "w" );
fwrite( $fh, $newdata );
fclose( $fh );
*/

//createPNG( 'newmap.svg', 'newmap.png' );

// Output new SVG map
header( 'Content-type: image/svg+xml' );
print( $newdata );
flush();

另一个是:

$topstates = array(
     "wa", // Washington
     "ut", // Utag
     "co", // Colorado
     "mi", // Michigan
     "id", // Idaho
     "wy", // Wyoming
     "ct", // Connecticut
     "az", // Arizona
     "or", // Oregon
     "mt", // Montana
     "nv", // Nevada
     "nd", // North Dakota
     "mn", // Minnessota
     "wi", // Wisconsin
     "md", // Maryland
     "de", // Delaware
     "ma" // Massechusetts

);
error_reporting( E_ALL );
ini_set( 'display_errors', 1 );

function createPNG( $svgfile, $pngfile ) {
    $command = "rsvg " . $svgfile . " " . $pngfile;
    $make_map = system( $command, $retval );
    if ( $retval ) echo "PNG creation failed."; // Did it work?
}

$topstateArray = array();
// Add dot in front of each state to make it a CSS class selector
foreach ( $topstates as $topstate ) {
    $topstateArray[] = '.' . $topstate;
}
// Make array into a string consisting of a list of states
$topstateList = implode( ', ', $topstateArray );

// Generate new map data
$map = file_get_contents( "USA-map.svg" );
if ( $topstates ) {
    $newdata = preg_replace( '/\.topSign {/i', '.topSign, ' . $topstateList . ' {', $map );
}

// Write the new map to a file
/*
$fh = fopen( "newmap.svg", "w" );
fwrite( $fh, $newdata );
fclose( $fh );
*/

//createPNG( 'newmap.svg', 'newmap.png' );

// Output new SVG map
header( 'Content-type: image/svg+xml' );
print( $newdata );
flush();

当我尝试将两者结合起来时,我提出了:

$bumperStates = array(
     "tn", // Tennessee
     "al", // Alabama
     "ga", // Georgia
     "ky", // Kentucky
     "ca", // California
     "nm", // New Mexico
     "wy", // Wyoming
     "ne", // Nebraska
     "ks", // Kansas
     "ok", // Oklahoma
     "tx", // Texas
     "ia", // Iowa
     "mo", // Montana
     "ar", // Arkansas
     "la", // Louisiana
     "ms", // Mississippi
     "fl", // Florida
     "nc", // North Carolina
     "va", // Virginia
     "wv", // West Virginia
     "oh", // Ohio
     "sd", // South Dakota
     "in", // Indiana
     "ky", // Kentucky
     "sc", // South Carolina
     "pa", // Pennsylvania
     "ny", // New York
     "vt", // Vermont
     "me", // Maine
     "il", // Illinois
     "de", // Delaware
     "nj", // New Jersey
     "nh", // New Hampshire
     "ri" // Rhode Island
);
$topStates = array(
     "wa", // Washington
     "ut", // Utag
     "co", // Colorado
     "mi", // Michigan
     "id", // Idaho
     "wy", // Wyoming
     "ct", // Connecticut
     "az", // Arizona
     "or", // Oregon
     "mt", // Montana
     "nv", // Nevada
     "nd", // North Dakota
     "mn", // Minnessota
     "wi", // Wisconsin
     "md", // Maryland
     "de", // Delaware
     "ma" // Massechusetts

);
error_reporting( E_ALL );
ini_set( 'display_errors', 1 );

function createPNG( $svgfile, $pngfile ) {
    $command = "rsvg " . $svgfile . " " . $pngfile;
    $make_map = system( $command, $retval );
    if ( $retval ) echo "PNG creation failed."; // Did it work?
}

$bumperstateArray = array();
// Add dot in front of each state to make it a CSS class selector
foreach ( $bumperStates as $bumperstate ) {
    $bumperstateArray[] = '.' . $bumperstate;
}
$topstateArray = array();
// Add dot in front of each state to make it a CSS class selector
foreach ( $topStates as $topstate ) {
    $topstateArray[] = '.' . $topstate;
}
// Make array into a string consisting of a list of states
$bumperstateList = implode( ', ', $bumperstateArray );
$topstateList = implode( ', ', $topstateArray );

// Generate new map data
$map = file_get_contents( "USA-map.svg" );
if ( $bumperStates ) {
    $newdata = preg_replace( '/\.bumperSign {/i', '.bumperSign, ' . $bumperstateList . ' {', $map );
}
if ( $topStates ) {
    $newdata .= preg_replace( '/\.topSign {/i', '.topSign, ' . $topstateList . ' {', $map );
}

// Write the new map to a file
/*
$fh = fopen( "newmap.svg", "w" );
fwrite( $fh, $newdata );
fclose( $fh );
*/

//createPNG( 'newmap.svg', 'newmap.png' );

// Output new SVG map
header( 'Content-type: image/svg+xml' );
print( $newdata );
flush();

地图的一半生成但后来我收到以下错误:

error on line 390 at column 12: XML declaration allowed only at the start of the document

错误必须来自SVG文件,因为它是唯一一个超过300行的文件。

我无法发布SVG文件的内容,因为它太长了:/ StackOverflow说Body is limited to 30000 characters; you entered 113909

所有原始文件都位于此处:https://github.com/kaldari/SVG-map-maker

也许有人可以告诉我,我在PHP方面做错了什么?

1 个答案:

答案 0 :(得分:2)

解决方案

您需要将第二次替换应用于已处理的文档:

// Generate new map data (and assuming you want to keep $map intact)
$newdata = $map = file_get_contents( "USA-map.svg" );
if ( $bumperStates ) {
    $newdata = preg_replace( '/\.bumperSign {/i', '.bumperSign, ' . $bumperstateList . ' {', $newdata  );
}
if ( $topStates ) {
    $newdata = preg_replace( '/\.topSign {/i', '.topSign, ' . $topstateList . ' {', $newdata );
}

解释

错误很明显,您正在尝试重新声明已存在的xml文档。详情:

  • svg文件本质上是一个xml文件
  • 您无法在同一文件中两次声明xml文档
  • 您正在将svg文件附加到另一个svg文件,这意味着您在一个文件中声明两个xml文档

问题在于:

if ( $topStates ) {
    $newdata .= preg_replace( '/\.topSign {/i', '.topSign, ' . $topstateList . ' {', $map );
}

这基本上导致了这一点(而且这是不允许的):

<?xml ...?><svg>...</svg><?xml ...?><svg>...</svg>