• ArcgisForJS如何实现添加含图片样式的点要素？

    文章目录

    0.引言

    ArcGIS API for JavaScript 是一个用于在Web和移动应用程序中创建交互式地图和地理空间分析应用的库。本文在ArcGIS For JavaScript中使用Graphic对象来创建包含图片样式的点要素。

    1.加载底图

    （1）实现代码

    <!DOCTYPE html>
<html>  
  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title>Create Map</title>  
    <link rel="stylesheet" href="http://localhost:8099/arcgis_js_api/javascript/4.28/esri/themes/light/main.css" />  
    <script src="http://localhost:8099/arcgis_js_api/javascript/4.28/init.js"></script>  
    <style>  
        html,  
        body,  
        #viewDiv {  
            padding: 0;  
            margin: 0;  
            height: 100%;  
            width: 100%;  
        }  
    </style>  
  
    <script type="text/javascript">  
        require(["esri/Map",  
            "esri/Basemap",  
            "esri/layers/TileLayer",  
            "esri/views/MapView",  
            "esri/layers/GraphicsLayer",  
            "esri/Graphic"  
        ], (  
            Map,  
            Basemap,  
            TileLayer,  
            MapView,  
            GraphicsLayer,  
            Graphic  
        )=>{  
            //添加底图  
            var lyTile = new TileLayer({  
                url:"http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer"  
            });  
            var baseMap = new Basemap({  
                baseLayers: [lyTile]  
            });  
            var map = new Map({  
                basemap: baseMap  
            });  
            var view = new MapView({  
                container: "viewDiv",  
                map: map,  
                zoom: 16,  
                center: [106.56657791438427, 29.679927608558902]  
            });  
        });  
    </script>  
</head>  
  
<body>  
    <div id="viewDiv"></div>  
</body>  
  
</html>

    • 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

    （2）实现结果
      在这里插入图片描述

    2.获取点要素的坐标

    （1）实现代码
      在这里插入图片描述

    //点击地图获取经纬度坐标
view.on("click", evt => {  
    let mapPoint = evt.mapPoint;  
    alert(`经度：${mapPoint.longitude},纬度${mapPoint.latitude}`);  
});

    • 1
    • 2
    • 3
    • 4
    • 5

    （2）实现结果
      在这里插入图片描述

    以上获取的坐标作为点要素的坐标，为（经度：106.56651354136791,纬度29.68001149992497）。

    3.添加含图片样式的几何要素

    （1）实现代码
      在这里插入图片描述

    //添加含图片样式的几何要素
var graphic = new Graphic({  
    geometry: point,  
    symbol: symbol  
});  
var graphicsLayer = new GraphicsLayer();  
graphicsLayer.visible = true;  
var point = {  
    type: "point",  
    x: 106.56657791438427,  
    y: 29.679927608558902,  
    SpatialReference: 3857  
};  
var symbol = {  
    type: "picture-marker",  
    url:"http://img14.360buyimg.com/n1/jfs/t2149/268/1108858690/251183/f7d770d0/5678c41eN59e3de7f.jpg",//访问小车图片  
    width: "50px",  
    height: "50px",  
    outline: {  
        style: "solid"  
    },  
};  
var attributes = { name: '小车', content: '真是一辆漂亮的小车' };  
var popupTemplate1 = {  
    title: "标题:" + attributes.name,  
    content: "内容:" + attributes.content  
};  
var graphic = new Graphic({  
    geometry: point,  
    symbol: symbol,  
    popupTemplate: popupTemplate1,  
});  
graphicsLayer.graphics.add(graphic);  
map.add(graphicsLayer);

    • 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

    （2）实现结果
      在这里插入图片描述

    4.完整实现

    （1）完整代码

    <!DOCTYPE html>
<html>  
  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title>Create Map</title>  
    <link rel="stylesheet" href="http://localhost:8099/arcgis_js_api/javascript/4.28/esri/themes/light/main.css" />  
    <script src="http://localhost:8099/arcgis_js_api/javascript/4.28/init.js"></script>  
    <style>  
        html,  
        body,  
        #viewDiv {  
            padding: 0;  
            margin: 0;  
            height: 100%;  
            width: 100%;  
        }  
    </style>  
  
    <script type="text/javascript">  
        require(["esri/Map",  
            "esri/Basemap",  
            "esri/layers/TileLayer",  
            "esri/views/MapView",  
            "esri/layers/GraphicsLayer",  
            "esri/Graphic"  
        ], (  
            Map,  
            Basemap,  
            TileLayer,  
            MapView,  
            GraphicsLayer,  
            Graphic  
        )=>{  
            //添加底图  
            var lyTile = new TileLayer({  
                url:"http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer"  
            });  
  
            var graphic = new Graphic({  
                geometry: point,  
                symbol: symbol  
            });  
  
            //创建一个图层  
            var graphicsLayer = new GraphicsLayer();  
            //设置可见  
            graphicsLayer.visible = true;  
            //创建一个面  
            var point = {  
                type: "point",  
                x: 106.56657791438427,  
                y: 29.679927608558902,  
                SpatialReference: 3857  
            };  
            var symbol = {  
                type: "picture-marker",  
                url:"http://img14.360buyimg.com/n1/jfs/t2149/268/1108858690/251183/f7d770d0/5678c41eN59e3de7f.jpg",//访问小车图片  
                width: "50px",  
                height: "50px",  
                outline: {  
                    style: "solid"  
                },  
            };  
            var attributes = { name: '小车', content: '真是一辆漂亮的小车' };  
            var popupTemplate1 = {  
                title: "标题:" + attributes.name,  
                content: "内容:" + attributes.content  
            };  
            var graphic = new Graphic({  
                geometry: point,  
                symbol: symbol,  
                popupTemplate: popupTemplate1,  
            });  
            graphicsLayer.graphics.add(graphic);  
  
            var baseMap = new Basemap({  
                baseLayers: [lyTile]  
            });  
            var map = new Map({  
                basemap: baseMap  
            });  
            map.add(graphicsLayer)  
            var view = new MapView({  
                container: "viewDiv", // Reference to the DOM node that will contain the view  
                map: map, // References the map object created in step 3  
                zoom: 16,  
                center: [106.56657791438427, 29.679927608558902]  
            });  
  
            //点击地图获取经纬度坐标  
            //view.on("click", evt => {  
            //    let mapPoint = evt.mapPoint;  
            //    alert(`经度：${mapPoint.longitude},纬度${mapPoint.latitude}`);  
            //});  
        });  
    </script>  
</head>  
  
<body>  
    <div id="viewDiv"></div>  
</body>  
  
</html>

    • 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
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104

    （2）实现结果
      在这里插入图片描述

    参考资料：
    [1] 一入GIS深似海. 不一样的前端，JavaScript之arcgis api教程; 2020-11-02 [accessed 2024-02-22].
    [2] 半个GIS半个前端. arcgis api（三）arcgis api for js 4.x 加载高德地图、谷歌地图、天地图; 2018-08-17 [accessed 2024-02-22].
    [3] 前端三脚猫. js中的变量声明（var、let、const的区别和解析）; 2021-03-08 [accessed 2024-02-22].

  • 相关阅读:
    火炬之光无限-萌新记录
    Java核心技术面试题(附答案)，纯手码，赶紧带走冲刺秋招
    vue的第2篇 开发环境vscode的安装以及创建项目空间
    【ModuleBuilder】GP服务实现SDE中两个图层相交选取
    大学生HTML个人网页作业作品：基于html css实现围棋网页（带报告4800字）
    【开发篇】二、属性绑定与校验
    AWS 学习总结（附思维导图链接）
    mac有些软件无法删除，CleanMyMac X 4.14.3轻松帮你解决
    践行“双碳” 迈动互联节能数据产品上线
    小几届的学弟问我，软件测试岗是选11k的华为还是20k的小公司，我直呼受不了，太凡尔赛了~
  • 原文地址：https://blog.csdn.net/qq_40640910/article/details/136230355