在地图中添加点线面

最新推荐文章于 2025-06-02 18:31:33 发布

哈哈哈哈_哈哈哈哈哈哈

最新推荐文章于 2025-06-02 18:31:33 发布

阅读量813

点赞数 1

CC 4.0 BY-SA版权

分类专栏： EMap3D

本文链接：https://blog.youkuaiyun.com/qq_29176825/article/details/76637237

EMap3D 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用ArcGIS API在网页中创建三维地图，并演示了如何添加点、线、面等几何图形，包括设置符号和样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

require([
  "esri/Map",
  "esri/views/SceneView",
  "esri/layers/GraphicsLayer",
  "esri/Graphic",
  "esri/geometry/Point",
  "esri/geometry/Polyline",
  "esri/geometry/Polygon",
  "esri/symbols/SimpleMarkerSymbol",
  "esri/symbols/SimpleLineSymbol",
  "esri/symbols/SimpleFillSymbol",
  "dojo/domReady!"
], function (Map, SceneView, GraphicsLayer, Graphic, Point, Polyline, Polygon, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol) {
    var map = new Map({
        basemap: "hybrid"
    });
    var view = new SceneView({
        container: "viewDiv",     // Reference to the scene div created in step 5
        map: map,                 // Reference to the map object created before the scene
        camera: { // autocasts as new Camera()
            position: { // autocasts as new Point()
                x: 120,
                y: 30,
                z: 1266.7049653716385
            },
            heading: 0.34445102566290225,
            tilt: 82.95536300536367
        }
    });
    //添加要素图片
    var graphicsLayer = new GraphicsLayer();
    map.add(graphicsLayer);
    //创建点
    var point = new Point({
        x: 120,
        y: 30,
        z: 1010
    }),
    //创建点样式
    markerSymbol = new SimpleMarkerSymbol({
        color: [226, 119, 40],

        outline: { // autocasts as new SimpleLineSymbol()
            color: [255, 255, 255],
            width: 2
        }
    });
    //创建点Graphic
    var pointGraphic = new Graphic({
        geometry: point,
        symbol: markerSymbol
    });
    graphicsLayer.add(pointGraphic);

    //创建线
    var polyline = new Polyline([
            [120, 30, 0],
            [120, 30, 1000]
          ]),
    //创建线样式
          lineSymbol = new SimpleLineSymbol({
              color: [226, 119, 40],
              width: 4
          });
    //创建线Graphic
    var polylineGraphic = new Graphic({
        geometry: polyline,
        symbol: lineSymbol
    });
    //添加线
    graphicsLayer.add(polylineGraphic);


    //创建面
    var polygon = new Polygon([
            [119.994, 29.994, 400],
            [119.994, 30.003, 500],
            [120.006, 30.003, 500],
            [120.006, 29.994, 400],
            [119.994, 29.994, 400]
          ]),
          //创建面样式
          fillSymbol = new SimpleFillSymbol({
              color: [227, 139, 79, 0.8],
              outline: { // autocasts as new SimpleLineSymbol()
                  color: [255, 255, 255],
                  width: 1
              }
          });
          //创建面Graphic
    var polygonGraphic = new Graphic({
        geometry: polygon,
        symbol: fillSymbol
    });
    //添加面
    graphicsLayer.add(polygonGraphic);
});

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="EMap.aspx.cs" Inherits="EMap3D_EMap" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        html, body, #viewDiv
        {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.4/esri/css/main.css">
    <script src="https://js.arcgis.com/4.4/"></script>
    <script src="js/AddGraphic.js" type="text/javascript"></script>
</head>
<body>
    <div id="viewDiv">
    </div>
</body>
</html>