SVG ¶

作者: 杰夫麦克纳
联系: jmckenna在gatewaygeomatics.com
最后更新: 2020-09-22

SVG

介绍 ¶

SVG（或可缩放矢量图形）是一种标准化的XML语言，用于通过矢量图形、文本和栅格图形描述二维图形。从4.5版开始，MapServer可以输出SVG 1.1版地图。以下文档基于 World Wide Web Consortium's (W3C) Scalable Vector Graphics (SVG) 1.1 Specification .

本文档假定您已经熟悉MapServer的某些方面：

MapServer应用程序开发和设置映射文件。

备注

从6.0版开始，通过cairo支持SVG输出。这并没有反映在当前文档中。

功能类型和SVG支持状态 ¶

圆层¶

还不支持圆形图层。

线层¶

以下各项描述了MapServer如何处理SVG输出的行层：

行转换为SVG polyline 元素。
样式对象的宽度参数用于线粗细的符号0。
样式对象的大小参数用于线条粗细的其他符号。
绘制所有线条时不带符号-仅更改线条粗细。
如果样式使用符号，并且该符号具有虚线样式，则它将转换为SVG stroke-dasharray 元素。

点图层¶

以下各项描述了MapServer如何处理SVG输出的点图层：

支持向量、椭圆和TrueType符号。
当前不支持PixMap符号。
支持附加符号的标签（请参见 Text Features 详情请参见下文）。

多边形层¶

以下各项描述了MapServer如何处理SVG输出的多边形层：

多边形转换为SVG polygon 元素。
样式的颜色用于填充。
该样式的大纲颜色用于笔划。
SVG patterns 目前不支持。

栅格层¶

以下各项描述了MapServer如何处理SVG输出的栅格层：

通过gd库创建临时图像，并使用gd函数绘制层。
必须至少在MapServer中编译PNG或JPEG支持。
必须在映射文件中正确设置Web对象的ImagePath和ImageURL。

文本特征¶

以下各项描述了MapServer如何处理SVG输出的文本功能：

文本转换为SVG text 元素。
仅支持TrueType字体。
支持带编码的标签（输出为UTF-8十六进制值）。
对mapserver中使用的字体名进行分析，以形成svg。 font-family ， font-style 和 font-weight .

WMS层¶

您可以配置 OUTPUTFORMAT 在您的WMS服务器映射文件中，允许GetMap请求SVG输出，如下所示。

为SVG输出设置映射文件 ¶

必须在映射文件的Web对象中设置有效的ImagePath和ImageURL参数。
为了能够输出有效的SVG文件，用户需要在映射文件中定义一个outputformat对象，并将imagetype参数设置为SVG。下面是一个例子：
```
MAP
  ...
  IMAGETYPE svg
  ...
  OUTPUTFORMAT
    NAME svg
    MIMETYPE "image/svg+xml"
    DRIVER svg
    FORMATOPTION  "COMPRESSED_OUTPUT=TRUE"
    FORMATOPTION  "FULL_RESOLUTION=TRUE"
  END
  ...
  WEB
    IMAGEPATH "/tmp/ms_tmp/"
    IMAGEURL  "/ms_tmp/"
  END
  ...
  LAYER
    ...
  END
END
```
注：

如果设置了formatOption“compressed_output=true”，MapServer将生成压缩的SVG文件（SVGZ）。默认情况下，此选项为假。请注意，为了能够创建压缩输出，必须使用编译标志use_zlib构建MapServer。

如果设置了formatOption“full_resolution=true”，则在输出SVG时，mapserver不会消除重复点和共线。默认情况下，此选项设置为假。

测试SVG输出 ¶

测试SVG映射文件的最简单方法是使用 MapServer CGI . 例如，您可以在浏览器中输入以下URL:
```
http://127.0.0.1/cgi-bin/mapserv.exe?map=my/path/to/my-svg.map&mode=map&layers=layer1 layer2
```

您也可以使用 PHP/MapScript 测试SVG映射文件。您的PHP文件可能如下所示：

<?php

  dl("php_mapscript_45.dll");

  $oMap = ms_newmapObj("my/path/to/my-svg.map");

  $img = $oMap->draw();

  header("Content-type: image/svg+xml");

  $url = $img->saveImage("");

?>

应该在imagepath目录中创建SVG文件。如果在文本编辑器中打开SVG文件，可以看到它是一个XML文件。以下是带标签的点图层的SVG文件示例：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-flat.dtd">
<svg version="1.1" width="400" height="300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<!-- START LAYER popplace -->
<ellipse cx="252" cy="130" rx="3" ry="3" fill="#000000"  />
<ellipse cx="37" cy="227" rx="3" ry="3" fill="#000000"  />
<ellipse cx="127" cy="239" rx="3" ry="3" fill="#000000"  />
<ellipse cx="255" cy="282" rx="3" ry="3" fill="#000000"  />
<polygon fill="#000000"   stroke-width="1"  points=" 267,263 270,263 271,260 272,263 275,263 273,265 274,268 271,266 268,268 269,265"/>
<ellipse cx="288" cy="247" rx="3" ry="3" fill="#000000"  />
<ellipse cx="313" cy="243" rx="3" ry="3" fill="#000000"  />
<ellipse cx="328" cy="233" rx="3" ry="3" fill="#000000"  />
<ellipse cx="331" cy="245" rx="3" ry="3" fill="#000000"  />
<ellipse cx="366" cy="196" rx="3" ry="3" fill="#000000"  />
<ellipse cx="161" cy="246" rx="3" ry="3" fill="#000000"  />
<ellipse cx="92" cy="208" rx="3" ry="3" fill="#000000"  />
<ellipse cx="40" cy="125" rx="3" ry="3" fill="#000000"  />
<ellipse cx="108" cy="146" rx="3" ry="3" fill="#000000"  />
<text  x="40" y="143" font-family="fritqat" font-size="8pt"   fill="#000000" stroke="#ffffff" stroke-width="0.5"  >Yellowknife</text>
<text  x="43" y="121" font-family="fritqat" font-size="8pt"   fill="#000000" stroke="#ffffff" stroke-width="0.5"  >Whitehorse</text>
<text  x="34" y="205" font-family="fritqat" font-size="8pt"   fill="#000000" stroke="#ffffff" stroke-width="0.5"  >Edmonton</text>
<text  x="164" y="258" font-family="fritqat" font-size="8pt"   fill="#000000" stroke="#ffffff" stroke-width="0.5"  >Winnipeg</text>
<text  x="316" y="190" font-family="fritqat" font-size="8pt"   fill="#000000" stroke="#ffffff" stroke-width="0.5"  >St. John's</text>
<text  x="334" y="258" font-family="fritqat" font-size="8pt"   fill="#000000" stroke="#ffffff" stroke-width="0.5"  >Halifax</text>
<text  x="249" y="230" font-family="fritqat" font-size="8pt"   fill="#000000" stroke="#ffffff" stroke-width="0.5"  >Charlottetown</text>
<text  x="241" y="242" font-family="fritqat" font-size="8pt"   fill="#000000" stroke="#ffffff" stroke-width="0.5"  >Quebec</text>
<text  x="223" y="260" font-family="fritqat-italic" font-size="8pt"   fill="#ff0000" stroke="#ffffff" stroke-width="0.5"  >Ottawa</text>
<text  x="210" y="279" font-family="fritqat" font-size="8pt"   fill="#000000" stroke="#ffffff" stroke-width="0.5"  >Toronto</text>
<text  x="82" y="234" font-family="fritqat" font-size="8pt"   fill="#000000" stroke="#ffffff" stroke-width="0.5"  >Regina</text>
<text  x="40" y="223" font-family="fritqat" font-size="8pt"   fill="#000000" stroke="#ffffff" stroke-width="0.5"  >Victoria</text>
<text  x="214" y="125" font-family="fritqat" font-size="8pt"   fill="#000000" stroke="#ffffff" stroke-width="0.5"  >Iqaluit</text>
</svg>

现在，您可以在支持的浏览器中查看SVG文件（请参见 list of SVG implementations 对于可能的SVG查看器）。这个 Adobe Viewer plugin 很受欢迎。

GOGVG ¶

在MapServer4.5（及更高版本）中，现在支持将gosvg作为矢量输出格式。

定义¶

gosvg的定义来自 here .

gosvg是“g-xml over svg”和“g-contents over svg”的缩写。这是在 G-XML （一种日本空间信息格式，是一种基于XML的协议，能够描述、通信和交换空间信息和电子地图），是一种空间信息交换格式，决定了扩展空间信息并连接到后端系统的方法（G-XML标准标记格式）。gosvg是一个扩展的 SVG Tiny profile （移动配置文件 SVG 1.1 . 适用于移动电话），增加了对空间信息服务（SVG地图服务）有用的功能。

支持特定的gosvg元素¶

命名空间扩展：支持
内容区定义（边界框）：支持
地理坐标系：支持
映射请求协议：支持

为gosvg输出设置映射文件¶

要求¶

有效的映射服务器 Mapfile .
在映射文件的Web对象中设置的有效ImagePath和ImageURL参数。

使用EPSG代码在地图对象下定义的投影对象。例如：

MAP
  ...
  WEB
    IMAGEPATH "/tmp/ms_tmp/"
    IMAGEURL  "/ms_tmp/"
  END
  ...
  PROJECTION
    "init=epsg:3978"
  END
  ...
  LAYER
  ...
  END
END

设置输出格式¶

要能够输出有效的gosvg文件，必须定义 OUTPUTFORMAT 对象，并将ImageType设置为SVG。下面是一个例子：

MAP
  ...
  IMAGETYPE svg
  ...
  OUTPUTFORMAT
    NAME svg
    MIMETYPE "image/svg+xml"
    DRIVER svg
    FORMATOPTION "GOSVG=TRUE"
    FORMATOPTION "GOSVG_ZoomInTH=20"
    FORMATOPTION "GOSVG_ZoomOutTH=40"
    FORMATOPTION "GOSVG_ScrollTH=60"
  END
  ...
  WEB
    IMAGEPATH "/tmp/ms_tmp/"
    IMAGEURL  "/ms_tmp/"
  END
  ...
  PROJECTION
    "init=epsg:3978"
  END
  ...
  LAYER
  ...
  END
END

测试gosvg输出¶

请参阅本节 Testing your SVG Output 生成和测试您的gosvg输出。gosvg可以由常规的svg查看器读取（它们只会忽略gosvg头）。

MapServer生成的示例gosvg文件¶

下面是带有标签的点图层的示例gosvg文件：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-flat.dtd">
<svg version="1.1" width="400" height="300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:au="http://www.svgmovile.jp/2004/kddip"  au:boundingBox="0 0 400 300">
<title>DEMO</title>
<metadata>
<rdf:RDF xmlns:rdf = "http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:crs = "https://www.ogc.org/crs" xmlns:svg="http://wwww.w3.org/2000/svg">
<rdf:Description>
<crs:CoordinateReferenceSystem svg:transform="matrix(0.000066,0.000000,0.000000,-0.000066,171.243002,253.040495)"
rdf:resource="http://www.opengis.net/gml/srs/epsg.xml#3978"/>
</rdf:Description>
 </rdf:RDF>
<au:lbs protocol="maprequest">
<au:zoomin th="20" xlink:href="."/>
<au:zoomout th="40" xlink:href="."/>
<au:scroll th="60" xlink:href="."/>
</au:lbs>
</metadata>

<!-- START LAYER popplace -->
<ellipse cx="252" cy="130" rx="3" ry="3" fill="#000000"  />
<ellipse cx="37" cy="227" rx="3" ry="3" fill="#000000"  />
<ellipse cx="127" cy="239" rx="3" ry="3" fill="#000000"  />
<ellipse cx="255" cy="282" rx="3" ry="3" fill="#000000"  />
<polygon fill="#000000"   stroke-width="1"  points=" 267,263 270,263 271,260 272,263 275,263 273,265 274,268 271,266 268,268 269,265"/>
<ellipse cx="288" cy="247" rx="3" ry="3" fill="#000000"  />
<ellipse cx="313" cy="243" rx="3" ry="3" fill="#000000"  />
<ellipse cx="328" cy="233" rx="3" ry="3" fill="#000000"  />
<ellipse cx="331" cy="245" rx="3" ry="3" fill="#000000"  />
<ellipse cx="366" cy="196" rx="3" ry="3" fill="#000000"  />
<ellipse cx="161" cy="246" rx="3" ry="3" fill="#000000"  />
<ellipse cx="92" cy="208" rx="3" ry="3" fill="#000000"  />
<ellipse cx="40" cy="125" rx="3" ry="3" fill="#000000"  />
<ellipse cx="108" cy="146" rx="3" ry="3" fill="#000000"  />
<text  x="40" y="143" font-family="fritqat" font-size="8pt"   fill="#000000" stroke="#ffffff" stroke-width="0.5"  >Yellowknife</text>
<text  x="43" y="121" font-family="fritqat" font-size="8pt"   fill="#000000" stroke="#ffffff" stroke-width="0.5"  >Whitehorse</text>
<text  x="34" y="205" font-family="fritqat" font-size="8pt"   fill="#000000" stroke="#ffffff" stroke-width="0.5"  >Edmonton</text>
<text  x="164" y="258" font-family="fritqat" font-size="8pt"   fill="#000000" stroke="#ffffff" stroke-width="0.5"  >Winnipeg</text>
<text  x="316" y="190" font-family="fritqat" font-size="8pt"   fill="#000000" stroke="#ffffff" stroke-width="0.5"  >St. John's</text>
<text  x="334" y="258" font-family="fritqat" font-size="8pt"   fill="#000000" stroke="#ffffff" stroke-width="0.5"  >Halifax</text>
<text  x="249" y="230" font-family="fritqat" font-size="8pt"   fill="#000000" stroke="#ffffff" stroke-width="0.5"  >Charlottetown</text>
<text  x="241" y="242" font-family="fritqat" font-size="8pt"   fill="#000000" stroke="#ffffff" stroke-width="0.5"  >Quebec</text>
<text  x="223" y="260" font-family="fritqat-italic" font-size="8pt"   fill="#ff0000" stroke="#ffffff" stroke-width="0.5"  >Ottawa</text>
<text  x="210" y="279" font-family="fritqat" font-size="8pt"   fill="#000000" stroke="#ffffff" stroke-width="0.5"  >Toronto</text>
<text  x="82" y="234" font-family="fritqat" font-size="8pt"   fill="#000000" stroke="#ffffff" stroke-width="0.5"  >Regina</text>
<text  x="40" y="223" font-family="fritqat" font-size="8pt"   fill="#000000" stroke="#ffffff" stroke-width="0.5"  >Victoria</text>
<text  x="214" y="125" font-family="fritqat" font-size="8pt"   fill="#000000" stroke="#ffffff" stroke-width="0.5"  >Iqaluit</text>
</svg>

SVG ¶

介绍 ¶

功能类型和SVG支持状态 ¶

圆层¶

线层¶

点图层¶

多边形层¶

栅格层¶

文本特征¶

WMS层¶

为SVG输出设置映射文件 ¶

测试SVG输出 ¶

GOGVG ¶

定义¶

支持特定的gosvg元素¶

为gosvg输出设置映射文件¶

要求¶

设置输出格式¶

测试gosvg输出¶

MapServer生成的示例gosvg文件¶

Navigation

Current Table Of Contents

	Home \| Products \| Issue Tracker \| Service Providers \| FAQ \| Twitter \| Download \|

SVG¶

介绍¶

指向SVG相关信息的链接¶

功能类型和SVG支持状态¶

圆层¶

线层¶

点图层¶

多边形层¶

栅格层¶

文本特征¶

WMS层¶

为SVG输出设置映射文件¶

测试SVG输出¶

GOGVG¶

定义¶

支持特定的gosvg元素¶

为gosvg输出设置映射文件¶

要求¶

设置输出格式¶

与gosvg相关的特定格式选项¶

测试gosvg输出¶

MapServer生成的示例gosvg文件¶

SVG ¶

介绍 ¶

功能类型和SVG支持状态 ¶

为SVG输出设置映射文件 ¶

测试SVG输出 ¶

GOGVG ¶