esri.symbols.PictureMarkerSymbol地图标注

大学专业为软件工程，现在涉及Web GIS开发。对地理信息专业基本知识了解相当薄弱，学习几天Arcgis JavaScript API加载地图，并在地图上做标记。点击标记能够弹出气泡框，以显示详细信息。

实现效果如下图所示：

实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>picture marker</title>
    <style>
        html,
        body,
        #map {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    <link rel="stylesheet" href="../../static/thirdparty/agsapi/3.14/esri/css/esri.css">
    <script src="../../static/thirdparty/agsapi/3.14/init.js"></script>
</head>
<body>
<div id="map" style="width: 100%; height: 100%;"></div>
<script>
    var map;
    require([
        "esri/map",
        "esri/symbols/PictureMarkerSymbol",
        "esri/geometry/Point",
        "esri/SpatialReference",
        "esri/graphic",
        "esri/InfoTemplate"
    ],function (Map,PictureMarkerSymbol,
                Point,SpatialReference,Graphic,InfoTemplate) {
        map = new Map("map",{
            zoom:8,
            center: [120.01876831051501, 32.52459158998377],
            basemap: "osm"
        });
        map.on("load",function () {
            var newPoint = new Point(120.01876831051501,32.52459158998377, new SpatialReference({ wkid: 4326 }));
            var picSymbol = new PictureMarkerSymbol("../../static/img/tree.png", 20, 20);
            var picGraphic = new Graphic(newPoint, picSymbol);

            var infoTemplate = new InfoTemplate();
            infoTemplate.setTitle("今天天气真晴朗");
            infoTemplate.setContent('<div><img src="../../static/img/tree.png">一颗绿油油的树</div>');

            picGraphic.setInfoTemplate(infoTemplate);
            map.graphics.add(picGraphic);

        })
    })
</script>

</body>
</html>

参考博客：

arcgis for js开发，根据给定的经纬度在地图上进行标注

https://blog.****.net/yangsen251024/article/details/22807499

esri.symbols.PictureMarkerSymbol地图标注

相关推荐