点和文本展示 - ArcGIS API for JavaScri

需求

根据提供的 xls 文件中的 地点名称 和 地点位置 进行在地图上面标注

步骤

使用的工具

1. node 的 库 ： xls-to-json
2. arcgis api for javascript

难点

1. arcgis api for javascript 用的不多，已经记不得怎么使用了。
   其中主要是使用相关 API Reference 和 Samples 来学习和上手
2. 不知道用 哪个类 来渲染，应该是有多种方法，
   所以还是选择了最快的办法，进行百度，搜索别人的分享和成果，看别人怎么写的，
   -> point 渲染不是很难，之前有实现过
   -> 文本 想到了 TextSymbol ，但是不知道怎么渲染到相应的位置
   -> 进行搜索，终于找到符合需求的 ......
   -> 其中主要使用了 SimpleMarkerSymbol 来实现文本背景的展示，TextSymbol 来实现文本的展示
   -> 将 Symbol 添加到绑定的点的位置

   var point = new Point(item.point[0], item.point[1]);
   _this.view.graphics.add(bgGraphic); // 文本背景
   _this.view.graphics.add(new Graphic(point, ts, {}));  // 文本

关键编码

const points = [{
  'name': '北京',
  '坐标': '116.498738,39.906484'
}]
// 将百度地图经纬度 转换为 腾讯/高德地图经纬度
function bMapTransQQMap(point) {
    var x_pi = 3.14159265358979324 * 3000.0 / 180.0;
    var x = point[0] - 0.0065;
    var y = point[1] - 0.006;
    var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
    var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
    var lngs = z * Math.cos(theta);
    var lats = z * Math.sin(theta);
    return [lngs, lats]
}
const imgsetting = [{'bgBorder': '#00ffff', 'bgContent': [52, 209, 173, 0.7], 'img': './img/icon_green.png'},
    {'bgBorder': '#44FFFF', 'bgContent': [0, 255, 255, 0.5], 'img': './img/icon_blue.png'}]
...
,
renderPoint: function (point, img) {
    var _this = this
    var point = new Graphic({
        geometry: {
            type: 'point',
            longitude: point[0],
            latitude: point[1]
        },
        symbol: {
            type: "picture-marker",  // autocasts as new PictureMarkerSymbol()
            url: imgsetting[img].img,
            width: 20,
            height: 20
        }
    })
    _this.view.graphics.add(point)
},
renderPointText: function (item, bgColor) {
    var _this = this;
    var _fontsize = 12;
    var _radius = 0;
    var _infoTem = item.name;
    var point = new Point(item.point[0], item.point[1]);
    var width = (chkstrlen(_infoTem)) * 0.5 * (_fontsize + 2) + 4; //
    var height = _fontsize * 1.5;
    // 背景框圆角半径
    var radius = _radius;

    // 设置背景框的大小
    var path = "M0" + " " + radius + "L0" + " " + (height - radius) + "Q0" + " " + height + " " + radius + " " + height + "L" + (width - radius) + " " + height + "Q" + width + " " + height + " " + width + " " + (height - radius) + "L" + width + " " + radius + "Q" + width + " " + "0" + " " + (width - radius) + " " + "0L" + radius + " " + "0Q0" + " " + "0" + " " + "0" + " " + radius;  // 应该与 SVG 图 有关
    var bgSymbol = new SimpleMarkerSymbol({
        path: path,
        color: imgsetting[bgColor].bgContent,
        outline: new SimpleLineSymbol("solid", imgsetting[bgColor].bgBorder, 1),
        size: Math.max(height, width),
        xoffset: 0,
        yoffset: 24
    });
    var bgGraphic = new Graphic(point, bgSymbol);
    _this.view.graphics.add(bgGraphic); // 文本背景
    var ts = new TextSymbol({
        color: "white",
        font: {
            size: _fontsize,
            // family: "Josefin Slab",
            weight: "bold"
        },
        text: _infoTem,
        verticalAlignment: 'baseline',
        xoffset: 0,
        yoffset: 20
    });
    _this.view.graphics.add(new Graphic(point, ts, {}));  // 文本
    // 获取包含汉字字符串长度
    function chkstrlen(str) {
        var strlen = 0;
        for (var i = 0; i < str.length; i++) {
            if (str.charCodeAt(i) > 255) {
                // 如果是汉字，则字符串长度加2
                strlen += 2;
            } else {
                strlen++;
            }
        }
        return strlen;
    }
},
renderPoints: function (points, img) {
    var _this = this
    for (var i = 0; i < points.length; i++) {
        var obj = {
            name: points[i]['name'],
            point: bMapTransQQMap(points[i]['坐标'].split(','))
        }
        _this.renderPoint(obj.point, img)
        _this.renderPointText(obj, img)
    }
},

如有问题，请指教！！仅供学习！！
如果对您有帮助的话，可以给我一个赞哦！ ~~_求鼓励~~