ArcGIS API for JavaScript 4.x 教程(四) 添加点、线和多边形

这篇具有很好参考价值的文章主要介绍了ArcGIS API for JavaScript 4.x 教程(四) 添加点、线和多边形。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

了解如何在地图中显示点、线和多边形图形。

图形是用于在地图或场景中显示点、线、多边形和文本的视觉元素。图形由几何图形、符号和属性组成,单击时可以显示弹出窗口。您通常使用图形来显示未连接到数据库(即GPS位置)的地理数据。
在本教程中,您将学习如何将地图上的点、线和多边形显示为图形。

笔记
有关在应用程序中实现图形的更多背景信息,请访问《映射API和位置服务》指南中的图形、样式和数据可视化。

步骤

创建新笔

若要开始,请完成“显示地图”教程或使用此笔。

设置API键

要访问ArcGIS服务,您需要一个API密钥。
转到您的仪表板以获取API密钥。
在CodePen中,将apiKey设置为您的密钥,这样它就可以用于访问basemap层和位置服务。

esriConfig.apiKey = "YOUR_API_KEY";
const map = new Map({
  basemap: "arcgis-topographic" // Basemap layer service
});

添加模块

在require语句中,添加Graphics和GraphicsLayer模块。

  require([
    "esri/config",
    "esri/Map",
    "esri/views/MapView",

    "esri/Graphic",
    "esri/layers/GraphicsLayer"

    ], function(esriConfig,Map, MapView, Graphic, GraphicsLayer) {

添加图形层

图形层是图形的容器。它与地图视图一起用于显示地图上的图形。可以将多个图形图层添加到地图视图中。图形图层显示在所有其他图层的顶部。
创建并添加GraphicsLayer以存储图形。

  const view = new MapView({
    map: map,
    center: [-118.80500,34.02700], //Longitude, latitude
    zoom: 13,
    container: "viewDiv"
 });

 const graphicsLayer = new GraphicsLayer();
 map.add(graphicsLayer);

添加点图形

点图形是使用点和标记符号创建的。一个点用经度(x)和纬度(y)坐标定义,一个简单的符号用颜色和轮廓定义。Point和SimpleMarkerSymbol类用于创建点图形。
创建将用于创建图形的点和simpleMarkerSymbol。

 const point = { //Create a point
    type: "point",
    longitude: -118.80657463861,
    latitude: 34.0005930608889
 };
 const simpleMarkerSymbol = {
    type: "simple-marker",
    color: [226, 119, 40],  // Orange
    outline: {
        color: [255, 255, 255], // White
        width: 1
    }
 };

创建图形并设置几何图形和符号特性。Graphic类在构造时将自动播放point和simpleMarkerSymbol。

 const pointGraphic = new Graphic({
    geometry: point,
    symbol: simpleMarkerSymbol
 });
 graphicsLayer.add(pointGraphic);

验证点图形是否位于point Dume Beach。

添加线条图形

直线图形是使用多段线和直线符号创建的。多段线定义为一系列点和空间参照。Polyline和SimpleLineSymbol类用于创建线形图形。
定义将用于创建图形的多段线和simpleLineSymbol。

 // Create a line geometry
 const polyline = {
    type: "polyline",
    paths: [
        [-118.821527826096, 34.0139576938577], //Longitude, latitude
        [-118.814893761649, 34.0080602407843], //Longitude, latitude
        [-118.808878330345, 34.0016642996246]  //Longitude, latitude
    ]
 };
 const simpleLineSymbol = {
    type: "simple-line",
    color: [226, 119, 40], // Orange
    width: 2
 };

创建图形并设置几何图形和符号特性。Graphic类将在创建多段线和simpleLineSymbol时自动播放。

 const polylineGraphic = new Graphic({
    geometry: polyline,
    symbol: simpleLineSymbol
 });
 graphicsLayer.add(polylineGraphic);

验证线条图形是否沿Westward Beach定位。

添加多边形图形

多边形图形是使用多边形和填充符号创建的。多边形被定义为描述闭合边界和空间参考的一系列点(环)。Polygon和SimpleFillSymbol类用于创建和显示多边形图形。
定义将用于创建图形的多边形和simpleFillSymbol

 // Create a polygon geometry
 const polygon = {
    type: "polygon",
    rings: [
        [-118.818984489994, 34.0137559967283], //Longitude, latitude
        [-118.806796597377, 34.0215816298725], //Longitude, latitude
        [-118.791432890735, 34.0163883241613], //Longitude, latitude
        [-118.79596686535, 34.008564864635],   //Longitude, latitude
        [-118.808558110679, 34.0035027131376]  //Longitude, latitude
    ]
 };

 const simpleFillSymbol = {
    type: "simple-fill",
    color: [227, 139, 79, 0.8],  // Orange, opacity 80%
    outline: {
        color: [255, 255, 255],
        width: 1
    }
 };

创建图形并设置几何图形和符号特性。Graphic类将在创建多边形和simpleFillSymbol时自动播放它。

 const polygonGraphic = new Graphic({
    geometry: polygon,
    symbol: simpleFillSymbol,

 });
 graphicsLayer.add(polygonGraphic);

验证多边形图形是否位于马湖里维埃拉。

创建弹出窗口

单击图形时,可以显示图形的弹出窗口。创建多边形图形以显示包含图形名称和描述的弹出窗口的代码使用attributes和popupTemplate属性。
在主函数中,定义popupTemplate和attributes。

 const popupTemplate = {
    title: "{Name}",
    content: "{Description}"
 }
 const attributes = {
    Name: "Graphic",
    Description: "I am a polygon"
 }

更新polygonGraphic以包含popupTemplate和属性属性。

 const polygonGraphic = new Graphic({
    geometry: polygon,
    symbol: simpleFillSymbol,

    attributes: attributes,
    popupTemplate: popupTemplate

 });
 graphicsLayer.add(polygonGraphic);

完整代码

<html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Add a point, line, and polygon</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.27/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.27/"></script>
  <script>

  require([
    "esri/config",
    "esri/Map",
    "esri/views/MapView",

    "esri/Graphic",
    "esri/layers/GraphicsLayer"

    ], function(esriConfig,Map, MapView, Graphic, GraphicsLayer) {

  esriConfig.apiKey = "YOUR_API_KEY";

  const map = new Map({
    basemap: "arcgis-topographic" //Basemap layer service
  });

  const view = new MapView({
    map: map,
    center: [-118.80500,34.02700], //Longitude, latitude
    zoom: 13,
    container: "viewDiv"
 });

 const graphicsLayer = new GraphicsLayer();
 map.add(graphicsLayer);

 const point = { //Create a point
    type: "point",
    longitude: -118.80657463861,
    latitude: 34.0005930608889
 };
 const simpleMarkerSymbol = {
    type: "simple-marker",
    color: [226, 119, 40],  // Orange
    outline: {
        color: [255, 255, 255], // White
        width: 1
    }
 };

 const pointGraphic = new Graphic({
    geometry: point,
    symbol: simpleMarkerSymbol
 });
 graphicsLayer.add(pointGraphic);

 // Create a line geometry
 const polyline = {
    type: "polyline",
    paths: [
        [-118.821527826096, 34.0139576938577], //Longitude, latitude
        [-118.814893761649, 34.0080602407843], //Longitude, latitude
        [-118.808878330345, 34.0016642996246]  //Longitude, latitude
    ]
 };
 const simpleLineSymbol = {
    type: "simple-line",
    color: [226, 119, 40], // Orange
    width: 2
 };

 const polylineGraphic = new Graphic({
    geometry: polyline,
    symbol: simpleLineSymbol
 });
 graphicsLayer.add(polylineGraphic);

 // Create a polygon geometry
 const polygon = {
    type: "polygon",
    rings: [
        [-118.818984489994, 34.0137559967283], //Longitude, latitude
        [-118.806796597377, 34.0215816298725], //Longitude, latitude
        [-118.791432890735, 34.0163883241613], //Longitude, latitude
        [-118.79596686535, 34.008564864635],   //Longitude, latitude
        [-118.808558110679, 34.0035027131376]  //Longitude, latitude
    ]
 };

 const simpleFillSymbol = {
    type: "simple-fill",
    color: [227, 139, 79, 0.8],  // Orange, opacity 80%
    outline: {
        color: [255, 255, 255],
        width: 1
    }
 };

 const popupTemplate = {
    title: "{Name}",
    content: "{Description}"
 }
 const attributes = {
    Name: "Graphic",
    Description: "I am a polygon"
 }

 const polygonGraphic = new Graphic({
    geometry: polygon,
    symbol: simpleFillSymbol,

    attributes: attributes,
    popupTemplate: popupTemplate

 });
 graphicsLayer.add(polygonGraphic);

 });
</script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

运行应用程序

在CodePen中,运行代码以显示地图。
地图应显示所有三种图形。当您单击多边形时,它应该显示一个弹出窗口。

注明:翻译自esri,仅供个人查阅使用,侵删文章来源地址https://www.toymoban.com/news/detail-645758.html

到了这里,关于ArcGIS API for JavaScript 4.x 教程(四) 添加点、线和多边形的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • ArcGIS API for JavaScript Map与地图控件

    目录 添加网页 引用接口 添加模块与模块实例 获取API密钥 创建地图 创建地图视图 添加图形图层 在底图之间切换 在图库中选择底图 默认底图视图(Home)控件 图层列表(Layerlist)控件 图例(Legend)控件 比例尺(ScaleBar)控件 指北针(Compass)控件 查看我的位置(Locate)控件

    2024年02月12日
    浏览(52)
  • ArcGIS API for JavaScript 4.x 实现动态脉冲效果

    主要通过定时刷新,每一次的脉冲渲染圈不停的放大,并且透明度缩小,直到达到一定的大小再退回0。 这个文件拿去可以直接使用,下面是引入的方式: 然后可以调用提供的方法实现动态点的添加,动画的暂停和启动。

    2024年02月09日
    浏览(47)
  • ArcGIS API for JavaScript 3.44 地图Demo示例合集

    用于JavaScript的ArcGIS API是在web应用程序中嵌入地图和任务的轻量级方法。您可以从ArcGIS Online、您自己的ArcGIS Server或其他服务器获取这些地图。 描述 此示例演示如何创建一个完整的页面映射应用程序。此示例创建一个以旧金山市为中心的新地图,并将其中一个预定义的基本地

    2024年02月13日
    浏览(45)
  • arcgis for javascript api4.26 本地tomcat部署,以及解决跨域访问问题

    一、配置java_jdk以及tomcat arcgis for javascript api 部署到本地服务器,可以是 iis ,也可以是 tomcat ,我这里是部署到tomcat,所以就 介绍一下tomcat上部署的步骤 。 如果电脑上有本地服务器的,可以跳过这一章,直接从第二章开始看 下载arcgis for javascript API 要部署到tomcat,咱得有tomcat

    2024年02月07日
    浏览(65)
  • ArcGIS JSAPI 学习教程 - 初识 ArcGIS Maps SDK for JavaScript

    近期由于工作需要,开始接触 ArcGIS Maps SDK for JavaScript (以下简称 JSAPI ),为了更好的系统的学习,准备开设专栏,作为学习记录。 本文作为第一篇,首先介绍一下 JSAPI 的概览、官方示例以及官方 API。 然后完成 JSAPI 的 helloworld 以及注意事项。 最后简述一下 JSAPI 的优势劣势

    2024年01月19日
    浏览(59)
  • 超详细图文教程:3DS Max 中创建低多边形游戏长剑模型

    推荐: NSDT场景编辑器助你快速搭建可二次开发的3D应用场景 在此,由两部分组成的教程的第一部分中,我将向您展示如何: 对剑柄进行建模 剑的护手模型 剑刃建模 步骤 1 在本教程中使用 正交视图 。要更改视图,请单击视口上任意位置的 鼠标中键 或屏幕左上角的小按钮。

    2024年02月16日
    浏览(42)
  • 使用c#实现一个简单绘图软件(绘制矩形、多边形,画笔、橡皮擦功能)的完整教程

    c#是微软提供的用于开发windows软件的开发语言,可以使用其快速的实现windows桌面软件的开发。这里基于C#开发了一款简单的绘图软件,可以用于绘制矩形、多边形的绘制(基于这些可以实现自己的数据标注软件),还实现了画笔、橡皮擦功能。开发C#软件通常使用Visual Studio软

    2024年02月03日
    浏览(65)
  • 如何判断两个多边形是否相交?——多边形相交判定算法详解

    如何判断两个多边形是否相交?——多边形相交判定算法详解 在计算机图形学中,判断两个多边形是否相交是一项很重要的任务。这涉及到各种应用场景,如碰撞检测、模拟物理效果等。在本篇文章中,我们将会介绍多边形相交判定算法的相关知识和实现方式。 首先,我们

    2024年02月14日
    浏览(67)
  • opencv 之 外接多边形(矩形、圆、三角形、椭圆、多边形)使用详解

    本文主要讲述opencv中的外接多边形的使用: 多边形近似 外接矩形、最小外接矩形 最小外接圆 外接三角形 椭圆拟合 凸包 将重点讲述最小外接矩形的使用 给一个opencv官方的例程: 过程图像如下: 椭圆拟合一般用于轮廓提取之后: 凸包绘制 计算两个旋转矩形交集: C++版的最

    2024年02月09日
    浏览(104)
  • 基于C++ 的OpenCV绘制多边形,多边形多条边用不用的颜色绘制

    使用基于C++的OpenCV库来绘制多边形,并且为多边形的不同边使用不同的颜色,可以按照以下步骤进行操作: 首先,确保你已经安装了OpenCV库并配置好了你的开发环境。 导入必要的头文件: 创建一个空白的图像,然后绘制多边形,并为每条边选择不同的颜色: 在这个示例中,

    2024年02月13日
    浏览(58)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包