0

I meet a problem when using ArcGIS JavaScript (version 4.9) to handle map data. the following is my code snippet:

 esriConfig.request.trustedServers.push("https://XXX.XXX.XX.118:3070");
    ...
newBasemap = new TileLayer({
                                    url: "https://arcgis.tpgos.gov.taipei/arcgis/rest/services/ED/GD_Plain_Service/MapServer",
                                    crossOrigin: 'anonymous',
                                    spatialReference: { wkid: 102443 }
                                });
if (newBasemap != undefined) {
                            map.add(newBasemap);
                        }/

and this cause an error message. The Error message show [Access to image ...from origin ... has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.]

And I found the image element not insert into map object, it is reject when fetching then throw the error. So I use following codes to catch event before image loading data, but it is still invalid.

var observerConfig = { childList: true, subtree: true };

// Callback function to handle mutations
function handleMutations(mutations) {
    mutations.forEach(function (mutation) {
        console.log("call event");
        if (mutation.addedNodes.length > 0) {
            // Handle added nodes (images)
            $(mutation.addedNodes).filter('img').attr("crossorigin", "true");
        }
    });
}

// Create a new MutationObserver with the callback function
var observer = new MutationObserver(handleMutations);

// Start observing the target node (divmap) and the specified configuration
observer.observe(document.getElementById('divmap'), observerConfig);

Does anyone know how to solve this problem?

1 Answer 1

1

The below plain JS code works without any problem:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Linked Maps Example</title>
  <link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.23/"></script>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height:100%;
      width: 100%;
    }
  </style>
</head>
<body>
  <div id="viewDiv"></div>
  <script>
    require([
      "esri/config",
      "esri/Basemap",
      "esri/layers/TileLayer",
      "esri/Map",
      "esri/views/MapView"
    ],
    function (esriConfig,Basemap, TileLayer, Map, MapView) {
      const layer = new TileLayer({
        url: "https://arcgis.tpgos.gov.taipei/arcgis/rest/services/ED/GD_Plain_Service/MapServer",
        crossOrigin: 'anonymous',
        spatialReference: {wkid: 102443}
      });
      const customBasemap = new Basemap({
        baseLayers: [layer],
        title: "My Basemap"
      });
      const myMap = new Map({
        basemap: customBasemap
      });
      const view = new MapView({
        container: "viewDiv",
        map: myMap
      });
    }
  );
  </script>
</body>
</html>

Here is the result:

enter image description here

4
  • It can work, but I still meet a problem when using other map server. I have use esriConfig.request.trustedServers.push, and it add 'Access-Control-Allow-Origin' header when sending json request to the map server, but when query image to map server after that, it cause cors error, and I found the 'Access-Control-Allow-Origin' header of each image query is empty, even I have added option crossOrigin: 'anonymous'.
    – abramhum
    Commented Dec 25, 2023 at 5:32
  • And each image ARCGIS query will be combined into a big picture by ARCGIS JAVASCRIPT itself, I found this behavior is not the same as leaflet.js. And that cause the cors error. Do you know anything about this problem, thanks a lot.
    – abramhum
    Commented Dec 25, 2023 at 5:32
  • Sorry, this is not my area so I can't help you any further.
    – TomazicM
    Commented Dec 25, 2023 at 8:50
  • It is not a freeware, and you have give me a help. Thanks.
    – abramhum
    Commented Dec 26, 2023 at 1:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.