Gis专辑gis

arcgis js:文字标注

2018-05-20  本文已影响6人  gis杭州

通过设置TextSymbol,设置文字标注,api参考:
https://developers.arcgis.com/javascript/3/jsapi/textsymbol-amd.html

代码示例:

/**
 * 绘制点图层
 * @param name 点位数组 array
 * @param imgUrl 图标url地址 string
 */
function addGraphic(pointArr,imgUrl) {

  pointGraphicLayer.clear();
  pointTextLayer.clear();
  for(var i=0;i < pointArr.length;i++){

    //对坐标加偏移后叠加
    var coorArr = coordtransform.wgs84togcj02(pointArr[i].x,pointArr[i].y);
    var point = new esri.geometry.Point(coorArr);
    // var point = new esri.geometry.Point([pointArr[i].x,pointArr[i].y]);
    // var imgUrl = "img/defaultPoint.png";
    var pictureMarkerSymbol = new esri.symbol.PictureMarkerSymbol(imgUrl, 32, 55);
    pictureMarkerSymbol.setOffset(0, 27.5);
    var graphic = new esri.Graphic(point, pictureMarkerSymbol);
    var textsymbol = new esri.symbol.TextSymbol(pointArr[i].name);
    textsymbol.setFont(new esri.symbol.Font("12pt").setWeight(esri.symbol.Font.WEIGHT_BOLD));
    textsymbol.setOffset(32, 55);
    textsymbol.setColor(new esri.Color([255,0,0,0.8]));
    var graphicText = new esri.Graphic(point, textsymbol);
    pointGraphicLayer.add(graphic);
    pointTextLayer.add(graphicText);
  }

}

效果截图:


image.png

更多参考:# 解决arcgis javascript textsymbol不支持多行文本标注的问题

另附openlayer文字标注http://anzhihun.coding.me/ol3-primer/ch07/07-03-07.html

上一篇 下一篇

猜你喜欢

热点阅读