<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AddGraphics</title>
<style>
html,
body,
#mapDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.20/"></script>
<script>
require([
"esri/config",
"esri/Map",
"esri/views/MapView",
"esri/Graphic",
"esri/layers/GraphicsLayer"
], function(esriConfig, Map, MapView, Graphic, GraphicsLayer) {
esriConfig.apiKey = "YOUR-KEY";
//定义一个地图
const map = new Map({
basemap: "arcgis-topographic"
});
//定义地图视图
const view = new MapView({
map: map,
center: [-118.80500, 34.02700],
zoom: 13,
container: "mapDiv"
});
//创建一个图形图层,用以加载显示图形
const graphicslayer = new GraphicsLayer();
map.add(graphicslayer);
//创建一个点图,包括位置和形状颜色
const point = {
type: "point",
longitude: -118.80657463861,
latitude: 34.0005930608889
};
const simpleMarkerSymbol = {
type: "simple-marker",
color: [220, 120, 0],
outline: {
color: [255, 255, 255],
width: 1
}
};
//创建一个图形用于承载点图
const pointGraphic = new Graphic({
geometry: point,
symbol: simpleMarkerSymbol
});
//在图形图层中加入上述点图形
graphicslayer.add(pointGraphic);
//创建一条线图,包括位置和形状颜色
const line = {
type: "polyline",
paths: [
[-118.821527826096, 34.0139576938577],
[-118.814893761649, 34.0080602407843],
[-118.808878330345, 34.0016642996246]
]
};
const simpleLineSymbol = {
type: "simple-line",
color: [226, 119, 50],
width: 3
};
//创建一个图形用于承载线图
const lineGraphic = new Graphic({
geometry: line,
symbol: simpleLineSymbol
});
//在图形图层中加入上述线图形
graphicslayer.add(lineGraphic);
//创建一个面图,包括位置形状和颜色
const polygon = {
type: "polygon",
rings: [
[-118.818984489994, 34.0137559967283],
[-118.806796597377, 34.0215816298725],
[-118.791432890735, 34.0163883241613],
[-118.79596686535, 34.008564864635],
[-118.808558110679, 34.0035027131376]
]
};
const simpleFillSymbol = {
type: "simple-fill",
color: [20, 150, 96],
outline: {
color: [225, 150, 96],
width: 2
}
};
//创建点击弹出信息框
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="mapDiv"></div>
</body>
</html>
WEBGIS地图上添加点线面,以及点击面弹出信息框
最新推荐文章于 2024-04-24 09:27:42 发布