Как показать маршруты на карте, используя координаты, используя слой досуга Ordinance Survey map - PullRequest
Новая
       81

Как показать маршруты на карте, используя координаты, используя слой досуга Ordinance Survey map

0 голосов
/ 12 марта 2020

Здесь я хочу создать карту, используя слой досмотра для боеприпасов. Ordnance Survey (OS) - национальное картографическое агентство Великобритании. Они производят данные цифровых карт, онлайн-сервисы для планирования маршрутов и совместного использования, а также мобильные приложения, а также многие другие основанные на местоположении продукты для бизнеса, правительства и потребителей. Картографическое картографическое обследование обычно классифицируется как «крупномасштабное» (другими словами, более подробное) или «мелкомасштабное».

Для этого я использую «EPSG: 27700». И я смог успешно создать маршруты на карте и получить координаты. Но когда я использую те же координаты для просмотра маршрутов на карте, тогда ничего не отображается, т. Е. Координаты не отражаются на карте. 

var apiKey = 'xxxxxxxxxxxxxxxxxxxxxxxxIKMO';

var serviceUrl = 'https://osdatahubapi.os.uk/OSMapsAPI/wmts/v1';

var parser = new ol.format.WMTSCapabilities();
var map;

// Setup the EPSG:27700 (British National Grid) projection.
proj4.defs("EPSG:27700", "+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.999601 +x_0=400000 +y_0=-100000 +ellps=airy +towgs84=446.448,-125.157,542.060,0.1502,0.2470,0.8421,-20.4894 +datum=OSGB36 +units=m +no_defs");
ol.proj.proj4.register(proj4);
var bng = ol.proj.get('EPSG:27700');
bng.setExtent([-238375.0, 0.0, 900000.0, 1376256.0]);


// console.log(ol.proj.fromLongLat(points, 'EPSG:27700'));

fetch(serviceUrl + '?key=' + apiKey + '&service=WMTS&request=GetCapabilities&version=2.0.0')
  .then(response => response.text())
  .then(text => {
    var result = parser.read(text);
    var options = ol.source.WMTS.optionsFromCapabilities(result, {
      layer: 'Leisure_27700'
    });

    var source = new ol.source.WMTS(options);
    var layer = new ol.layer.Tile({
      source: source
    });

    var viewOptions = {
      projection: options.projection,
      resolutions: options.tileGrid.getResolutions(),
      center: [337297, 503695],
      zoom: 7
    }

    // Set the default center of the map view.
    map = new ol.Map({
      layers: [layer],
      target: 'map',
      view: new ol.View(viewOptions)
    });

    var cord = new Array(['336555.3571805824', '503945.0759345037'], ['336630.3808312133', '504033.339052893'], ['336895.1701863812', '504055.4048324903'], ['337314.41999873036', '503945.0759345037'], ['337250.42923789815', '503808.2681010003']);
    var points = new Array();
    cord.forEach(function(element) {
      points.push(ol.proj.transform([parseFloat(element[1]), parseFloat(element[0])], 'EPSG:3857', 'EPSG:27700'));
    });

    var linieStyle = [
      // linestring
      new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: '#2ECC40',
          width: 5
        })
      })
    ];

    //create the line       
    var linie = new ol.layer.Vector({
      source: new ol.source.Vector({
        features: [new ol.Feature({
          geometry: new ol.geom.LineString(points)
        })]
      })
    });

    map.addLayer(linie);

    var features = new ol.Collection();
    var featureOverlay = new ol.layer.Vector({
      source: new ol.source.Vector({
        features: features
      }),
      style: new ol.style.Style({
        fill: new ol.style.Fill({
          color: '#2ECC40'
        }),
        stroke: new ol.style.Stroke({
          color: '#2ECC40',
          width: 5
        }),
        image: new ol.style.Circle({
          radius: 7,
          fill: new ol.style.Fill({
            color: '#2ECC40'
          })
        })
      })
    });

    featureOverlay.setMap(map);

    var modify = new ol.interaction.Modify({
      features: features,
      // the SHIFT key must be pressed to delete vertices, so
      // that new vertices can be drawn at the same position
      // of existing vertices
      deleteCondition: function(event) {
        return ol.events.condition.shiftKeyOnly(event) && ol.events.condition.singleClick(event);
      }
    });
    map.addInteraction(modify);

    var draw; // global so we can remove it later
    function addInteraction() {
      draw = new ol.interaction.Draw({
        features: features,
        type: ('LineString'),
        /** #type {ol.geom.GeometryType} */
        style: new ol.style.Style({
          stroke: new ol.style.Stroke({
            color: '#2ECC40',
            width: 4
          }),
          image: new ol.style.Circle({
            radius: 7,
            fill: new ol.style.Fill({
              color: '#2ECC40'
            })
          })
        })
      });
      map.addInteraction(draw);
    }

    addInteraction();

    map.on('click', function(event) {
      var feature = map.getFeaturesAtPixel(event.pixel)[0];
      if (feature) {
        var coordinate = feature.getGeometry().getCoordinates();
      }
    });
  });
body {
  margin: 0;
  padding: 0;
}

form {
  display: block;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 800px;
  height: 500px;
}

.span12 {
  width: 800px;
  height: 500px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/css/ol.css" />
<div class="container-fluid">
  <div class="">
    <div class="span12">
      <div id="map" class="map"></div>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4.js"></script>
...