ArcGIS JS API多行文字标注

最新推荐文章于 2022-04-22 19:36:22 发布

shijie_nihao

最新推荐文章于 2022-04-22 19:36:22 发布

阅读量1.5k

点赞数

分类专栏： ArcGIS JS API 文章标签：多行文本标注

本文链接：https://blog.csdn.net/shijie_nihao/article/details/100179133

版权

ArcGIS JS API 专栏收录该内容

14 篇文章 3 订阅

订阅专栏

ArcGIS JS API本身不支持多行文字标注，可以扩展类，实现多行文本标注，案例代码如下。

<!DOCTYPE html>
<html>
    <head lang="zh-CN">
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="https://js.arcgis.com/3.25/esri/css/esri.css">
        <script>
            var dojoConfig = {
                async: true,
                packages: [{
                    name: "extModule",
                    location: location.pathname.replace(/\/[^/]*$/, '') + '/extModule'
                }]
            };
        </script>
        <script src="https://js.arcgis.com/3.25/"></script>
    </head>
    <body>
        <div id="map" style="width: 700px;height: 450px;"></div>
        <script type="text/javascript">
            require([
                'esri/map',
                'esri/SpatialReference',
                'esri/Color',
                'esri/geometry/Point',
                "esri/symbols/Font",
                'esri/graphic',
                'extModule/MultiLineTextSymbol',  //扩展的类
            ], function (
                         Map,
                         SpatialReference,
                         Color,
                         Point,
                         Font,
                         Graphic,
                         MultiLineTextSymbol,
            ) {
                var map=new Map('map',{
                    basemap:"streets"
                });
                map.on('load',function () {
                    var font = new Font("20px", Font.STYLE_NORMAL, Font.VARIANT_NORMAL, Font.WEIGHT_BOLDER);
                    // 使用扩展类定义textSymbol,支持 \n 换行符
                    var textSymbol = new MultiLineTextSymbol("hello \n world", font, new Color([255, 0, 0]));
                    var point = new Point( {"x": 117, "y": 36, "spatialReference": {"wkid": 4326 } });
                    map.graphics.add(new Graphic(point,textSymbol));
                    map.setZoom(11);
                    map.centerAt(point);
                })
            });
        </script>
    </body>
</html>

hello \n word 换行标注效果：

define("extModule/MultiLineTextSymbol",[
    "esri/layers/LabelLayer",
    "dojox/gfx/svg",
    "esri/symbols/TextSymbol",
    "dojo/_base/declare"
],function (
    LabelLayer,
    svg,
    TextSymbol,
    declare
) {
    var obj = declare(TextSymbol,{
        constructor: function(options) {
            if( typeof LabelLayer.prototype._addLabel == 'function' ) {
                LabelLayer.prototype._addLabel2 = esri.layers.LabelLayer.prototype._addLabel;
                LabelLayer.prototype._addLabel = function(a,b,c,e,g,k,m)
                {
                    // replace \n by <br>
                    a = a.replace(/\n/g, "<br />");
                    this._addLabel2(a,b,c,e,g,k,m);
                }
            }
            if( typeof svg.Text.prototype.setShape == 'function' ) {
                svg.Text.prototype.setShape = function(p) {
                    this.shape = dojox.gfx.makeParameters(this.shape, p);
                    this.bbox = null;
                    var r = this.rawNode, s = this.shape;
                    r.setAttribute("x", s.x);
                    r.setAttribute("y", s.y);
                    r.setAttribute("text-anchor", s.align);
                    r.setAttribute("text-decoration", s.decoration);
                    r.setAttribute("rotate", s.rotated ? 90 : 0);
                    r.setAttribute("kerning", s.kerning ? "auto" : 0);
                    r.setAttribute("text-rendering", "optimizeLegibility");

                    while(r.firstChild)
                        r.removeChild(r.firstChild);
                    s.text+="";//保证text为数字时不报错
                    if(s.text) {
                        var texts = s.text.replace(/<br\s*\/?>/ig, "\n").split("\n");
                        var lineHeight = 1.1 * parseInt(document.defaultView.getComputedStyle(r, "").getPropertyValue("font-size"), 10);
                        if( isNaN(lineHeight) || !isFinite(lineHeight) )
                            lineHeight = 15;
                        for(var i = 0, n = texts.length; i < n; i++) {
                            var tspan = (document.createElementNS ? document.createElementNS(dojox.gfx.svg.xmlns.svg, "tspan") : document.createElement("tspan"));
                            tspan.setAttribute("dy", i ? lineHeight : -(texts.length-1)*lineHeight/2);
                            tspan.setAttribute("x", s.x);
                            tspan.appendChild((dojox.gfx.useSvgWeb ? document.createTextNode(texts[i], true) : document.createTextNode(texts[i])));
                            r.appendChild(tspan);
                        }
                    }
                    return this;
                }
            }
        }
    });
    return obj;
})

shijie_nihao

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
4
评论
ArcGIS JS API多行文字标注

ArcGIS JS API本身不支持多行文字标注，可以扩展类，实现多行文本标注，案例代码如下。<!DOCTYPE html><html> <head lang="zh-CN"> <meta charset="UTF-8"> <title></title> ...
复制链接

扫一扫