点位和文本标注 - ArcGIS API for JavaScript 的 小练习

字数： 1.8k字   |    阅读时长： 9min  |   阅读量： 次

效果如下

效果展示

前提

官网API Reference：https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-TextSymbol.html#type

借鉴网站 :

  1. xls-to-json 库 （node）
    https://www.cnblogs.com/yingzi1028/p/6420731.html
  2. point 标注
    https://blog.csdn.net/u013236043/article/details/83817983
  3. text
    https://blog.csdn.net/hao7834232/article/details/71666908?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~aggregatepage~first_rank_ecpm_v1~rank_v31_ecpm-2-71666908.pc_agg_new_rank&utm_term=Graphic+arcgis+js+%E6%96%87%E6%9C%AC&spm=1000.2123.3001.4430
  4. 坐标转换
    https://blog.csdn.net/weixin_45284208/article/details/120461031

官网中 最有用的 就是 API 简介 和 例子部分，每次使用都要看一看。
在使用时候，多与 当前部署的 版本有很大限制，有些类 可能网上搜得到，但是 版本中没有，此时就考验我们对 ArcGIS API for JavaScript 的掌握和熟悉程度了
因为本人记忆力不好，每次使用都是从 百度搜索开始 TT (忧桑！！)

需求

看效果图即可知道需求，其中 根据给定的 地点名称 和 经纬度 在地图上按照相应的样式进行展示出来
数据给定 xls 表格：
效果展示

编码

引入 ArcGIS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<link rel="stylesheet" href="http://xxxx:xxx/arcgis/arcgis_js_api/library/4.15/esri/css/main.css">
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    html, body {
        height: 100%;
        width: 100%;
    }

    #map {
        height: 100%;
    }
</style>
<body>
<div id="map" class="container"></div>
</body>
<script>
    var dojoConfig = {
        parseOnLoad: true,
        packages: [{
            name: "src",
            location: location.pathname.replace(/\/[^/]+$/, "")+"/arcgis"
        }]
    };
</script>
<script src="http://xxxx:xxx/arcgis/arcgis_js_api/library/4.15/init.js"></script>

在当前目录下新建一个 arcgis 文件夹, 用于存放 引入的 地图 Layer, 比如 gaodeImageLayer

处理数据 - 转为 json 文件

  • 创建一个目录，进行 npm init，npm install xls-to-json

  • 编写 index.js 如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    node_xj = require("xls-to-json");
    node_xj({
        input: "../assets/坐标.xls",  // input xls
        output: "points.json", // output json
        sheet: "Sheet1"  // specific sheetname
    }, function (err, result) {
        if (err) {
            console.error(err);
        } else {
            // console.log(result);
            console.log('成功');
            // result.forEach(element => {
            //     // var point = element['坐标'].split(',')
            //     element.point = element['坐标'].split(',')
            // });
        }
    });

  • 运行命令： node index.js

  • 处理数据如下：

    1
    2
    3
    4
    5
    6
    const data1 = [
        {
            "序号": "1",
            "name": "地点1",
            "坐标": "118.705347,32.118729"
        }]

创建底图 - 高德地图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
require(["esri/Map",
        "src/gaodeMapLayer",
        "src/gaodeImageLayer",  // 本地引入的 地图
        "esri/views/MapView",
        "esri/geometry/Point",   // 部署可以引入的，后面会使用到
        "esri/Graphic",
        "esri/layers/GraphicsLayer",
        "esri/symbols/Font",
        "esri/symbols/TextSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleFillSymbol",
        "esri/geometry/SpatialReference",
        "esri/widgets/ScaleBar",
        "dojo/_base/Color",
        "dojo/domReady!"
    ], function (Map, gaodeMapLayer, gaodeImageLayer, MapView, Point,
                 Graphic, GraphicsLayer, Font, TextSymbol, SimpleLineSymbol,
                 SimpleMarkerSymbol, SimpleFillSymbol, SpatialReference, ScaleBar, Color) {
    var gaodeMapLayer = new gaodeMapLayer();
    var gaodeImageLayer = new gaodeImageLayer(); // 高德地图
    var _this = this
    var map = null
    var view = null
    function renderMap() {
        _this.map = new Map({
            layers: [gaodeMapLayer, gaodeImageLayer],
            showLabels: true
        });
        _this.view = new MapView({
            container: "map",
            center: [107.561493, 33.10955], // longitude, latitude
            map: _this.map,
            zoom: 4
        });
        // 比例尺
        var scaleBar = new ScaleBar({
            view: _this.view,
            style: 'ruler'
        });
        _this.view.ui.add(scaleBar, {
            position: "bottom-left"
        });
        var point = getCenterPoint()
        if (point.length > 0) {
            _this.view.center = point
        }
        var level = Number(getQueryString('level'))
        if (!isNaN(level) && level > 0) {
            _this.view.zoom = level
        }
        const enumType = ['basic', "edu"]
        var type = String(getQueryString('type'))
        if (type !== 'null' && type.length > 0) {
            if (enumType.indexOf(type) === -1) {
                alert('type 参数错误！！！')
            } else {
                if (type === enumType[1]) {
                    // 教育资源
                    _this.renderSchoolPoints()
                } else if (type === enumType[0]) {
                    // 基础设施
                    _this.renderParkPoints()
                    _this.renderServicePoints()
                }
            }
        }
        function getCenterPoint() {
            var point = []; // 默认情况
            var longitude = getQueryString('longitude')
            var latitude = getQueryString('latitude')
            if (longitude !== null && latitude !== null) {
                // 经度校验
                var longreg = /^(\-|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{0,6})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,6}|180)$/;
                // 纬度校验
                var latreg = /^(\-|\+)?([0-8]?\d{1}\.\d{0,6}|90\.0{0,6}|[0-8]?\d{1}|90)$/;
                // 正则过滤
                if (longreg.test(longitude)) {
                    point[0] = longitude
                }
                if (latreg.test(latitude)) {
                    point[1] = latitude
                }
            } else {
                console.info('当前地址没有传入完整的经纬度信息！')
            }
            return point;
        }
        function getQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return (r[2]);
            return null;
        }
    }
    renderMap()
})

其中关键的 是 Map MapView 这两个类的 使用和配置
在上面可以添加 Layer 和 Graphics 等等……

渲染点 和 文本

给出关键的代码，其他自己理。
其中发现，效果上面的点的位置和地图上位置不一致，发现给定的数据是 百度地图获取的，而本地图底图使用的是 高德， 所以进行了相应的转换。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
const imgsetting = [{'bgBorder': '#0BEEC4', 'bgContent': [5, 145, 119, 0.6], 'img': './img/icon_green.png'},
            {'bgBorder': '#18E6FF', 'bgContent': [86, 110, 139, 0.8], '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;
    }
},
renderParkPoints: function () {
    this.renderPoints(park, 0)
},
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)
    }
},
...

// 将百度地图经纬度 转换为 腾讯/高德地图经纬度
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]
}
本文作者： jeneen
发布时间： 2022-03-30
最后更新： 2023-05-09
本文标题： 点位和文本标注 - ArcGIS API for JavaScript 的 小练习
本文链接： https://zx1001011.github.io/2022/03/30/arscgisjs-use/
版权声明： 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处！
知识共享许可协议
赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

很惭愧<br><br>只做了一点微小的工作<br>谢谢大家