我试图根据可用数据绘制底图和标头。我通过csv文件导入了数据,并创建了ODATA服务,并在工作区中使用了它。甚至我尝试将草图功能包括在底图之上,但是我无法在底图上渲染草图。
目的:绘制圆形,多边形等形状。
require([
"esri/Map",
"esri/layers/CSVLayer",
"esri/layers/GraphicsLayer",
"esri/widgets/Sketch",
"esri/views/MapView",
"esri/core/urlUtils",
"dojo/domReady!"
], function(
Map,
CSVLayer,
MapView,
GraphicsLayer,
Sketch,
urlUtils
) {
// If CSV files are not on the same domain as your website, a CORS enabled server
// or a proxy is required.
var url = "model/buildings.csv";
var graphicsLayer = new GraphicsLayer();
//"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.csv";
// Paste the url into a browser's address bar to download and view the attributes
// in the CSV file. These attributes include:
// * mag - magnitude
// * type - earthquake or other event such as nuclear test
// * place - location of the event
// * time - the time of the event
// var template = {
// title: "Earthquake Info",
// content: "Magnitude {mag} {type} hit {place} on {time}."
// };
var csvLayer = new CSVLayer({
url: url,
//copyright: "USGS Earthquakes",
//popupTemplate: template,
elevationInfo: {
// drapes icons on the surface of the globe
mode: "on-the-ground"
}
});
csvLayer.renderer = {
type: "simple", // autocasts as new SimpleRenderer()
symbol: {
type: "simple-marker", // autocasts as new PointSymbol3D()
symbolLayers: [{
type: "icon", // autocasts as new IconSymbol3DLayer()
material: {
color: [238, 69, 0, 0.75]
},
outline: {
width: 0.5,
color: "white"
},
size: "12px"
}]
}
};
var map = new Map({
basemap: "topo-vector",
layerInfos: [{
layer: csvLayer,
title: "Random Layer1"
}, {
layer: graphicsLayer,
title: "Random Layer2"
}]
});
var view = new MapView({
container: "viewDiv",
center: [-1.803093685, 53.35976512],
zoom: 15,
map: map
});
view.when(function() {
const sketch = new Sketch({
view: view,
layer: graphicsLayer
});
view.ui.add(sketch, "top-right");
});
});
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#cityStyle {
background-color: white;
text-align: center;
padding: 10px;
font-size: 0.9em;
}
#cityStyle label {
padding-right: 10px;
cursor: pointer;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TEMPCSV</title>
<script id="sap-ui-bootstrap" src="../../resources/sap-ui-core.js" data-sap-ui-theme="sap_belize" data-sap-ui-resourceroots='{"TEMPCSV.TEMPCSV": "./"}' data-sap-ui-compatVersion="edge" data-sap-ui- oninit="module:sap/ui/core/ComponentSupport" data-sap-ui-async="true"
data-sap-ui-frameOptions="trusted">
</script>
<link rel="stylesheet" href="https://js.arcgis.com/4.10/esri/css/main.css">
<script src="https://js.arcgis.com/4.10/"></script>
</head>
<body class="sapUiBody">
<div id="viewDiv"></div>
</body>
</html>