Блог

Главная - Вопросы по программированию - Расположение файла данных относительно html при локальном запуске руководств Azure Maps — atlas.io.read()

Расположение файла данных относительно html при локальном запуске руководств Azure Maps — atlas.io.read()

#azure-maps

#azure-карты

Вопрос:

Пытаюсь определить, как изменить функцию atlas.ioread () из руководства по картам Azure, приведенного ниже, для локального чтения данных на моем компьютере с Windows.

    atlas.io.read(window.location.origin   '/Common/data/Gpx/Route66Attractions.xml')

Выполняет ‘window.location.origins ‘ работают с локальными файлами?

Я вложил XML-файл аналогично приведенной выше строке относительно html-файла, однако он выполняет чтение файла при запуске карты.

Azure Maps Tutorial:

https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/master/AzureMapsCodeSamples/Spatial IO Module/Load spatial data (simple).html

Ответ №1:

Эта функция не сможет напрямую обращаться к локальным файлам, поскольку URL-адрес должен быть http или https URL. Вы можете воспользоваться несколькими подходами.

Если вы планируете разместить файл позже, вы можете разместить его локально на localhost, а затем указать на него URL-адрес.

Если вы хотите получить доступ к локальным файлам, вам сначала нужно загрузить файл в свое приложение, используя тег ввода файла и класс FileReader. Как только у вас будут исходные данные файла (текст), вы можете передать их в функцию atlas.io.read, и она обработает их для вас. Вот простой пример:

 <!DOCTYPE html> 
<html>   
<head> 
    <title>Read Text File</title> 
    
    <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>

    <!-- Add reference to the Azure Maps Spatial IO module. -->
    <script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.min.js"></script>
</head>   
<body> 
    <input type="file" name="inputfile" id="inputfile"> 
      
    <script type="text/javascript"> 
    window.onload = function() {
        var input = document.getElementById('inputfile');
        
        input.addEventListener('change', function() { 
        
            var fr = new FileReader(); 
            fr.onload = function(){ 
                atlas.io.read(fr.result).then(function(r){
                    //r is the parsed data. Do something with it.
                });
            } 
              
            fr.readAsText(input.files[0]); 
        });
    });
    </script> 
</body>   
</html>