解决arcgis javascript textsymbol不支持多行文本标注的问题

时间：2023-03-09 07:44:47
解决arcgis javascript textsymbol不支持多行文本标注的问题

首先，下载这段js文件，命名为esri.symbol.MultiLineTextSymbol.js 

require(["esri/layers/LabelLayer"], function(ll)

{

    if( typeof esri.layers.LabelLayer.prototype._addLabel == 'function' )

    {

        esri.layers.LabelLayer.prototype._addLabel2 = esri.layers.LabelLayer.prototype._addLabel;

        esri.layers.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);

        }

    }

});

require(["esri/symbols/TextSymbol", "dojox/gfx/svg"], function(ts, svg)

{

    if( typeof dojox.gfx.svg.Text.prototype.setShape == 'function' )

    {

        dojox.gfx.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);

            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;

        }

    }

});

然后在html中这样引用，就可以使用\n来换行了

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>

    <title>Simple Map</title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.13/esri/css/esri.css">

    <style>

        html, body, #map {

            height: 100%;

            width: 100%;

            margin: 0;

            padding: 0;

        }

        body {

            background-color: #FFF;

            overflow: hidden;

            font-family: "Trebuchet MS";

        }

    </style>

    <script src="https://js.arcgis.com/3.13/"></script>

    <script src="./esri.symbol.MultiLineTextSymbol.js"></script>

    <script>

        var map;

        require(["esri/map",

            "esri/symbols/TextSymbol",

            "esri/graphic",

            "esri/geometry/Point",

            "dojo/domReady!"], function (Map, TextSymbol, Graphic, Point) {

            map = newMap("map", {basemap: "topo", center: [0, 0], zoom: 4, sliderStyle: "small"});

            map.on("load", function () {

                map.graphics.add(newGraphic(newPoint(0, 0), newTextSymbol("Multi-Line \n Text"), {}));

            });

        });

    </script>

</head>

<body>

<div id="map"></div>

</body>

</html>