zoukankan      html  css  js  c++  java
  • 解决arcgis javascript textsymbol不支持多行文本标注的问题

    一直没有关注textsymbol标注的换行问题,今天群里一个人提出了这个问题,于是查了下文档测试了下 " "、" "、<br/>都试过了,发现多个空格或者换行都只会保留一个空格,于是百度了一下 没找到解决方案,度娘不行,咱还有谷歌,终于找到了解决方案

    首先,下载这段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 
     by <br>
                a = a.replace(/
    /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(/<brs*/?>/ig, "
    ").split("
    ");
                    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中这样引用,就可以使用 来换行了

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     5     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
     6     <title>Simple Map</title>
     7     <link rel="stylesheet" href="https://js.arcgis.com/3.13/esri/css/esri.css">
     8     <style>
     9         html, body, #map {
    10             height: 100%;
    11             width: 100%;
    12             margin: 0;
    13             padding: 0;
    14         }
    15 
    16         body {
    17             background-color: #FFF;
    18             overflow: hidden;
    19             font-family: "Trebuchet MS";
    20         }
    21     </style>
    22     <script src="https://js.arcgis.com/3.13/"></script>
    23     <script src="./esri.symbol.MultiLineTextSymbol.js"></script>
    24     <script>
    25         var map;
    26         require(["esri/map",
    27             "esri/symbols/TextSymbol",
    28             "esri/graphic",
    29             "esri/geometry/Point",
    30             "dojo/domReady!"], function (Map, TextSymbol, Graphic, Point) {
    31             map = newMap("map", {basemap: "topo", center: [0, 0], zoom: 4, sliderStyle: "small"});
    32             map.on("load", function () {
    33                 map.graphics.add(newGraphic(newPoint(0, 0), newTextSymbol("Multi-Line 
     Text"), {}));
    34             });
    35         });
    36     </script>
    37 </head>
    38 <body>
    39 <div id="map"></div>
    40 </body>
    41 </html>
  • 相关阅读:
    Druid 使用 Kafka 将数据载入到 Kafka
    Druid 使用 Kafka 数据加载教程——下载和启动 Kafka
    Druid 集群方式部署 —— 启动服务
    Druid 集群方式部署 —— 端口调整
    Druid 集群方式部署 —— 配置调整
    Druid 集群方式部署 —— 配置 Zookeeper 连接
    Druid 集群方式部署 —— 元数据和深度存储
    Druid 集群方式部署 —— 从独立服务器部署上合并到集群的硬件配置
    Druid 集群方式部署 —— 选择硬件
    Druid 独立服务器方式部署文档
  • 原文地址:https://www.cnblogs.com/wandergis/p/4615802.html
Copyright © 2011-2022 走看看