SAP UI5 ESRI для рендеринга эскиза с использованием CSV-рендеринга на моей базовой карте - PullRequest
Новая
       68

SAP UI5 ESRI для рендеринга эскиза с использованием CSV-рендеринга на моей базовой карте

0 голосов
/ 17 марта 2019

Я пытался построить базовую карту и начальные пути на основе моих доступных данных.Я импортировал свои данные через CSV-файл, создал службу ODATA и использовал ее в своем рабочем пространстве.И даже я пытался включить функциональность эскиза поверх моей базовой карты, но я не могу отрисовать эскиз на своей базовой карте.

Цель: нарисовать некоторые фигуры, такие как круг, многоугольник, и т. Д.

JavaScript: 

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");
  });


});

CSS: 

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;

HTML: 

<!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>
...