ArcGIS API for JavaScript初级

LoveZJC12138

已于 2022-08-02 14:00:33 修改

阅读量971

点赞数

文章标签： javascript 前端 servlet 开发语言 vue.js

于 2022-08-02 11:08:46 首次发布

本文链接：https://blog.youkuaiyun.com/LoveZJC96/article/details/126116273

版权

前言：

地图的开发离不开各种接口，这个是接口的地址：Graphic | API Reference | ArcGIS API for JavaScript 4.24 | ArcGIS Developers

1.创建地图

创建地图用是"esri/Map"和 "esri/views/MapView"。

其中Map 用于存储、管理和覆盖 2D 和 3D 查看共有的图层的属性和方法。而MapView用于把地图渲染到页面上。

使用方法：

<body>
    <div id="mapdiv"></div>
    <script type="text/javascript">
        require([
            "esri/Map",
            "esri/views/MapView",
        ], (Map, MapView) => {
            //加载地图底图
            var map = new Map({
                basemap: "streets"
            });
            //加载视图
            var mapview = new MapView({
                container: "mapdiv",//页面中id为mapdiv的DOM元素
                map: map,//上方创建的map
                center: [120.488, 29.228],
                zoom: 6
            })
            //去除底部广告
            mapview.ui.components = [];
        });
    </script>
</body>

效果如下：

2.给地图加上点，线，面

给地图加上点线面，要用到 "esri/Graphic"，Graphic意为：绘图

graphic有：

geometry 用于定义图形位置和形状种类。
symbol 定义图形的属性，例如颜色，大小等
attributes 定义与图形关联的字段和字段值的名称和对应值
popupTemplate 选择图形时在弹出窗口中显示内容的模板。
最后再把 new Graphic 创建的函数添加到 new MapView 创建的函数中。

1.点

代码如下

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>js地图</title>
    <!-- 加载官方api -->
    <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.15/"></script>
    <style type="text/css">
        html,
        body,
        #mapdiv {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }

        body {
            background: #FFF;
            overflow: hidden;
            font-family: "Trebuchet MS";
        }
    </style>
    <script type="text/javascript">
        require([
            "esri/config",
            "esri/Map",
            "esri/views/MapView",
            "esri/Graphic"
        ], (esriConfig, Map, MapView, Graphic) => {
            esriConfig.apiKey = "AAPK2c1d72bddd3a4172b4a1eeda30001e25NHWcTpihhYZw_5KZzIf--dgJOKzlG2LUVf-Eck-OpNLagfRGiJU5268b5g36GDrj";
            //加载地图底图
            var map = new Map({
                basemap: "streets"
            });
            //加载视图
            var mapview = new MapView({
                container: "mapdiv",
                map: map,
                center: [120.488, 29.228],
                zoom: 6
            })
            const polyline = {
                type: "point", // autocasts as new Polyline()
                longitude: 120.488,
                latitude: 29.228,
            };

            const lineSymbol = {
                type: "simple-marker", // autocasts as new SimpleLineSymbol()
                color: [226, 117, 34],
                size: 6,
                width: 5

            };

            const lineAtt = {
                Name: "Keystone Pipeline", // The name of the pipeline
                Owner: "TransCanada", // The owner of the pipeline
                Length: "3,456 km" // The length of the pipeline
            };
            const polylineGraphic = new Graphic({
                geometry: polyline, // Add the geometry created in step 4
                symbol: lineSymbol, // Add the symbol created in step 5
                attributes: lineAtt, // Add the attributes created in step 6
                popupTemplate: {
                    title: "{Name}",
                    content: [
                        {
                            type: "fields",
                            fieldInfos: [
                                {
                                    fieldName: "Name"
                                },
                                {
                                    fieldName: "Owner"
                                },
                                {
                                    fieldName: "Length"
                                }
                            ]
                        }
                    ]
                }
            });

            mapview.graphics.add(polylineGraphic)

            mapview.ui.components = [];
        });
    </script>
</head>

<body>
    <div id="mapdiv"></div>

</body>

</html>

效果如下：

注：如果想创建大量的点，那么可以通过循环创建。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>js地图</title>
    <!-- 加载官方api -->
    <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.15/"></script>
    <style type="text/css">
        html,
        body,
        #mapdiv {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }

        body {
            background: #FFF;
            overflow: hidden;
            font-family: "Trebuchet MS";
        }
    </style>
    <script type="text/javascript">
        require([
            "esri/config",
            "esri/Map",
            "esri/views/MapView",
            "esri/Graphic"
        ], (esriConfig, Map, MapView, Graphic) => {
            esriConfig.apiKey = "AAPK2c1d72bddd3a4172b4a1eeda30001e25NHWcTpihhYZw_5KZzIf--dgJOKzlG2LUVf-Eck-OpNLagfRGiJU5268b5g36GDrj";
            //加载地图底图
            var map = new Map({
                basemap: "streets"
            });
            //加载视图
            var mapview = new MapView({
                container: "mapdiv",
                map: map,
                center: [120.488, 29.228],
                zoom: 6
            })

           
            let arr = [[120.488, 29.228], [120.288, 29.228], [120.088, 29.228], [119.988, 29.228], [119.688, 29.228], [119.488, 29.228]]

            for (let i = 0; i < arr.length; i++) {
                const polylineGraphic = new Graphic({
                    geometry: {
                        type: "point", // autocasts as new Polyline()
                        longitude: arr[i][0],
                        latitude: arr[i][1],
                    }, // Add the geometry created in step 4
                    symbol: {
                        type: "simple-marker", // autocasts as new SimpleLineSymbol()
                        color: [226, 117, 34],
                        size: 6,
                        width: 5

                    }, // Add the symbol created in step 5
                    attributes: {
                        Name: "Keystone Pipeline", // The name of the pipeline
                        Owner: "TransCanada", // The owner of the pipeline
                        Length: "3,456 km" // The length of the pipeline
                    }, // Add the attributes created in step 6
                    popupTemplate: {
                        title: "{Name}",
                        content: [
                            {
                                type: "fields",
                                fieldInfos: [
                                    {
                                        fieldName: "Name"
                                    },
                                    {
                                        fieldName: "Owner"
                                    },
                                    {
                                        fieldName: "Length"
                                    }
                                ]
                            }
                        ]
                    }
                });

                mapview.graphics.add(polylineGraphic)

            }


            mapview.ui.components = [];
        });
    </script>
</head>

<body>
    <div id="mapdiv"></div>

</body>

</html>