解决arcgis api自定义给FeatureLayer添加文字标注(label)
2018-03-23 22:49
555 查看
问题描述:arcgis api添加文字标注,一般的,由TextSymbol控制文字标注的样式,再结合LabelClass中设置的字段信息,直接由featurelayer.setLabelingInfo([ labelclass ]);函数将sde中的字段信息在地图页面上面标注出来。但这种方法显示的label只能简单显示字段信息,不能动态显示不在图层字段而是经过关联其他表格查询出来的动态信息。
解决:
1、思路:
放弃setLabelingInfo()函数吧(虽然它很努力了,但你们不合适╮( ̄▽ ̄)╭)
要用添加text类型graphic到graphiclayer的方式添加自定义的文字标注,这个过程中,用后台查询标注内容,用featureLayer中的geomytry(点线面都可以)确定图层内每个要素标注的位置。
代码如下: //创建绘制图层graphiclayer
var graphicsLayer = new GraphicsLayer();
//创建文字内容
var textSym = new TextSymbol("Hello World");
//添加为每个文字graphic添加位置、文字内容
var graphicText = new Graphic(featureLayer.graphics[0].geometry,textSym);
//将graphic加入图层
graphicsLayer.add(graphicText);
//map添加graphiclayer图层
map.addLayer(graphicsLayer);
另注:textsymbol标注的换行问题!!
"\n"、"\r"、<br/>都试过了,是不行的!!
找到了结局方法,链接如下:www.cnblogs.com/wandergis/p/4615802.html
首先,下载这段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>
解决:
1、思路:
放弃setLabelingInfo()函数吧(虽然它很努力了,但你们不合适╮( ̄▽ ̄)╭)
要用添加text类型graphic到graphiclayer的方式添加自定义的文字标注,这个过程中,用后台查询标注内容,用featureLayer中的geomytry(点线面都可以)确定图层内每个要素标注的位置。
代码如下: //创建绘制图层graphiclayer
var graphicsLayer = new GraphicsLayer();
//创建文字内容
var textSym = new TextSymbol("Hello World");
//添加为每个文字graphic添加位置、文字内容
var graphicText = new Graphic(featureLayer.graphics[0].geometry,textSym);
//将graphic加入图层
graphicsLayer.add(graphicText);
//map添加graphiclayer图层
map.addLayer(graphicsLayer);
另注:textsymbol标注的换行问题!!
"\n"、"\r"、<br/>都试过了,是不行的!!
找到了结局方法,链接如下:www.cnblogs.com/wandergis/p/4615802.html
首先,下载这段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>
相关文章推荐
- 百度地图API多个点聚合时,标注添加的标签label地图刷新就丢失的问题解决
- cocos2d 中添加显示文字的三种方式(CCLabelTTF 、CCLabelBMFont 和CCLabelAtlas)
- cocos2d-x 中添加显示文字的三种方式 LabelTTF 、LabelBMFont 和 LabelAtlas
- Qt添加窗口背景图片、Label图片显示、、Label文字显示
- cocos2d-x 中添加显示文字的三种方式 LabelTTF 、LabelBMFont 和 LabelAtlas
- cocos2d-x 中添加显示文字的三种方式 LabelTTF 、LabelBMFont 和 LabelAtlas
- FlexViewer3.4中CompositeSymbol复合型标注中添加图片与文字后第一次点击后不显示图片,二次点击后才显示
- label和input里面文字不对齐的解决方法!
- [ExtJS5学习笔记]第22 Extjs5正在使用beforeLabelTpl添加所需的配置选项标注星号标记
- “display:block-inline形式的Span或Div中添加文字后,导致Span或Div排版掉落、错位”的原因及解决方法
- 用Label方式添加标注
- cocos2d 中添加显示文字的三种方式(CCLabelTTF 、CCLabelBMFont 和CCLabelAtlas)
- cocos中添加显示文字的三种方式(CCLabelTTF 、CCLabelBMFont 和CCLabelAtlas)
- cocos2d 中添加显示文字的三种方式(CCLabelTTF 、CCLabelBMFont 和CCLabelAtlas)比较
- margin-top负值解决label 文字与input 垂直居中对齐问题
- CAD编辑指南4:新建空白图纸以及添加文字标注
- iOS开发小技巧 - label中的文字添加点击事件
- 完美解决textarea输入框提示文字,必须添加默认内容
- Cocos2d-x中添加显示文字的三种方式 LabelTTF 、LabelBMFont 和 LabelAtlas
- 解决给div中添加文字后位置发生偏移的问题