网站建设找哪个好,商丘柘城做网站,滨州百姓网免费发布信息,网站建设与维护课难吗了解如何在地图中显示点、线和多边形图形。
图形是用于在地图或场景中显示点、线、多边形和文本的视觉元素。图形由几何图形、符号和属性组成#xff0c;单击时可以显示弹出窗口。您通常使用图形来显示未连接到数据库#xff08;即GPS位置#xff09;的地理数据。 在本教程…了解如何在地图中显示点、线和多边形图形。
图形是用于在地图或场景中显示点、线、多边形和文本的视觉元素。图形由几何图形、符号和属性组成单击时可以显示弹出窗口。您通常使用图形来显示未连接到数据库即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, latitudezoom: 13,container: viewDiv});const graphicsLayer new GraphicsLayer();map.add(graphicsLayer);添加点图形
点图形是使用点和标记符号创建的。一个点用经度x和纬度y坐标定义一个简单的符号用颜色和轮廓定义。Point和SimpleMarkerSymbol类用于创建点图形。 创建将用于创建图形的点和simpleMarkerSymbol。 const point { //Create a pointtype: point,longitude: -118.80657463861,latitude: 34.0005930608889};const simpleMarkerSymbol {type: simple-marker,color: [226, 119, 40], // Orangeoutline: {color: [255, 255, 255], // Whitewidth: 1}};创建图形并设置几何图形和符号特性。Graphic类在构造时将自动播放point和simpleMarkerSymbol。 const pointGraphic new Graphic({geometry: point,symbol: simpleMarkerSymbol});graphicsLayer.add(pointGraphic);验证点图形是否位于point Dume Beach。
添加线条图形
直线图形是使用多段线和直线符号创建的。多段线定义为一系列点和空间参照。Polyline和SimpleLineSymbol类用于创建线形图形。 定义将用于创建图形的多段线和simpleLineSymbol。 // Create a line geometryconst 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], // Orangewidth: 2};创建图形并设置几何图形和符号特性。Graphic类将在创建多段线和simpleLineSymbol时自动播放。 const polylineGraphic new Graphic({geometry: polyline,symbol: simpleLineSymbol});graphicsLayer.add(polylineGraphic);验证线条图形是否沿Westward Beach定位。
添加多边形图形
多边形图形是使用多边形和填充符号创建的。多边形被定义为描述闭合边界和空间参考的一系列点环。Polygon和SimpleFillSymbol类用于创建和显示多边形图形。 定义将用于创建图形的多边形和simpleFillSymbol // Create a polygon geometryconst 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
headmeta charsetutf-8meta nameviewport contentinitial-scale1, maximum-scale1, user-scalablenotitleArcGIS Maps SDK for JavaScript Tutorials: Add a point, line, and polygon/titlestylehtml, body, #viewDiv {padding: 0;margin: 0;height: 100%;width: 100%;}/stylelink relstylesheet hrefhttps://js.arcgis.com/4.27/esri/themes/light/main.cssscript srchttps://js.arcgis.com/4.27//scriptscriptrequire([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, latitudezoom: 13,container: viewDiv});const graphicsLayer new GraphicsLayer();map.add(graphicsLayer);const point { //Create a pointtype: point,longitude: -118.80657463861,latitude: 34.0005930608889};const simpleMarkerSymbol {type: simple-marker,color: [226, 119, 40], // Orangeoutline: {color: [255, 255, 255], // Whitewidth: 1}};const pointGraphic new Graphic({geometry: point,symbol: simpleMarkerSymbol});graphicsLayer.add(pointGraphic);// Create a line geometryconst 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], // Orangewidth: 2};const polylineGraphic new Graphic({geometry: polyline,symbol: simpleLineSymbol});graphicsLayer.add(polylineGraphic);// Create a polygon geometryconst 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
bodydiv idviewDiv/div
/body
/html运行应用程序
在CodePen中运行代码以显示地图。 地图应显示所有三种图形。当您单击多边形时它应该显示一个弹出窗口。 注明翻译自esri仅供个人查阅使用侵删
