arcgis_js_api4.11 点线面图形.html

最新推荐文章于 2023-08-29 21:36:23 发布

学无止境慢慢来

最新推荐文章于 2023-08-29 21:36:23 发布

阅读量432

点赞数

分类专栏： arcgis_js_api_demo4.11

原文链接：https://developers.arcgis.com/javascript/

版权

arcgis_js_api_demo4.11 专栏收录该内容

21 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>arcgis_js_api4.11 graphics</title>
    <link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/themes/light/main.css"/>
    <script src="https://js.arcgis.com/4.11/"></script>
    <style>
        html, body, #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <script>
        /*参考：https://developers.arcgis.com/javascript*/
        require([
            "esri/Map", "esri/views/MapView", "esri/Graphic"
        ], function (Map, MapView, Graphic) {
            let map = new Map({
                basemap: "hybrid"
            });

            let view = new MapView({
                center: [-80, 35],
                container: "viewDiv",
                map: map,
                zoom: 3
            });

            /*************************
             * 创建点图。
             *************************/
            let point = {
                type: "point", // autocasts as new Point()
                longitude: -49.97,
                latitude: 41.73
            };
            // 创建绘制点的符号。
            let markerSymbol = {
                type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
                color: [226, 119, 40],  // 填充颜色。
                outline: {
                    // autocasts as new SimpleLineSymbol()
                    color: [255, 255, 255],
                    width: 2
                }
            };
            // 创建图形并将几何图形和符号添加到图形中。
            let pointGraphic = new Graphic({
                geometry: point,
                symbol: markerSymbol
            });

            /****************************
             * 创建折线图形。
             ****************************/
                // 首先，创建一条折线几何图形。(这是Keystone管道)
            let polyline = {
                    type: "polyline", // autocasts as new Polyline()
                    paths: [[-111.3, 52.68], [-98, 49.5], [-93.94, 29.89]]
                };
            // 创建用于绘制线的符号。
            let lineSymbol = {
                type: "simple-line", // autocasts as SimpleLineSymbol()
                color: [226, 119, 40],
                width: 4
            };
            // 创建对象，用于存储与该polyline相关的属性。
            let lineAtt = {
                Name: "Keystone管道",
                Owner: "TransCanada",
                Length: "3,456 km"
            };
            /*******************************************
             * 创建一个新图形，并给它添加几何图形、符号、属性。
             * 你也可以给该图形添加一个简单的弹窗模板。
             * 当在该图形上单击时，这将允许用户查看该图形的属性。
             ******************************************/
            let polylineGraphic = new Graphic({
                geometry: polyline,
                symbol: lineSymbol,
                attributes: lineAtt,
                popupTemplate: {
                    // autocasts as new PopupTemplate()
                    title: "{Name}",
                    content: [
                        {
                            type: "fields",
                            fieldInfos: [
                                {
                                    fieldName: "Name"
                                },
                                {
                                    fieldName: "Owner"
                                },
                                {
                                    fieldName: "Length"
                                }
                            ]
                        }
                    ]
                }
            });

            /***************************
             * 创建一个面图形。
             ***************************/
            let polygon = {
                type: "polygon", // autocasts as new Polygon()
                rings: [
                    [-64.78, 32.3],
                    [-66.07, 18.45],
                    [-80.21, 25.78],
                    [-64.78, 32.3]
                ]
            };
            let fillSymbol = {
                type: "simple-fill", // autocasts as new SimpleFillSymbol()
                color: [227, 139, 79, 0.8],  // 填充颜色。
                outline: {
                    // autocasts as new SimpleLineSymbol()
                    color: [255, 255, 255],
                    width: 1
                }
            };
            let polygonGraphic = new Graphic({
                geometry: polygon,
                symbol: fillSymbol
            });
            // 把所有的图形，添加到视图的图形层。
            view.graphics.addMany([pointGraphic, polylineGraphic, polygonGraphic]);
        });
    </script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>

学无止境慢慢来

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
arcgis_js_api4.11 点线面图形.html

<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>graph...
复制链接

扫一扫

专栏目录