Блог

Главная - Вопросы по программированию - рендеринг карты ГИС с использованием Openlayer 6

рендеринг карты ГИС с использованием Openlayer 6

#openlayers #openlayers-5 #mapnik #openlayers-6

#openlayers #openlayers-5 #мапник #openlayers-6

Вопрос:

Мы используем Mapnik, Mapproxy и Openlyer6 для разработки веб-решений на основе ГИС. Данные ГИС из Postgis поддерживают postgresql DB. Мы используем проекцию EPSG: 32643 и получили вывод карты, но когда мы попытались добавить точку на карте, которая не отображается. Код размещен здесь… Я добавил 2 точки внутри области карты, но ничего не отображается.

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
    <link rel="stylesheet" href="https://openlayers.org/en/v6.4.3/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v6.4.3/build/ol.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.6.1/proj4.js"></script>
    <style>
      html, body, .map {
        margin: 0;
        padding: 0;
        width: 99%;
        height: 99%;
    border:1px solid #ccc;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>

proj4.defs("EPSG:32643"," proj=utm  zone=43  datum=WGS84  units=m  no_defs");
ol.proj.proj4.register(proj4);

const iconFeature = new ol.Feature({
  geometry: new ol.geom.Point(ol.proj.fromLonLat([614971.473,1218630.894])),


  projection: "EPSG:32643",
  name: 'Somewhere near Nottingham',
});

 
 

var map = new ol.Map({
  target: 'map',
  layers: [    
    new ol.layer.Tile({
            source: new ol.source.XYZ({
           url: "http://192.168.3.32:8081/tms/1.0.0/district/distgrid"   "/{z}/{x}/{-y}.png",
           projection: "EPSG:32643",
          }),
          }),
    new ol.layer.Tile({
            source: new ol.source.XYZ({
           url: "http://192.168.3.32:8081/tms/1.0.0/road/roadgrid"   "/{z}/{x}/{-y}.png" ,
        projection: "EPSG:32643",
          }),
          }),
    new ol.layer.Tile({
            source: new ol.source.XYZ({
           url: "http://192.168.3.32:8081/tms/1.0.0/Landmark/landmarkgrid"   "/{z}/{x}/{-y}.png" ,
        projection: "EPSG:32643",
          }),
          }),
    new ol.layer.Vector({
      source: new ol.source.Vector({    
        features: [iconFeature],
    projection: "EPSG:32643",
 }),
  renderBuffer: 200,
  style: new ol.style.Style({
        image: new ol.style.Icon({
          anchor: [0.5, 46],
          anchorXUnits: 'fraction',
          anchorYUnits: 'pixels',
          src: 'https://openlayers.org/en/latest/examples/data/icon.png'
        })
      })

      }),  
  ],
  view: new ol.View({
    projection: "EPSG:32643",
    units:"m",
    //extent: [485266.3703,917118.208000001,764929.9067,1414398.9922],
    zoom:1,
    maxZoom:15,
    minZoom:1,
    center:[0,0],
 

  })
});

 
var layer = new ol.layer.Vector({
     source: new ol.source.Vector({
         features: [
             new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([584658.379776645,1246789.46624421])),
        projection: "EPSG:32643",
             })
         ]
     })
 });
map.addLayer(layer);
map.getView().setZoom(map.getView().getZoom() - 6);

    </script>
  </body>
</html>

необходимо знать, правильный код или нет.

введите описание изображения здесь

Комментарии:

1. Вы используете ol.proj.fromLonLat для координат, которые не являются Lon Lat

2. Его Широта в UTM

3. fromLonLat преобразует широту в веб-меркатор. Если это уже UTM, все, что вам нужно, это new ol.geom.Point([614971.473,1218630.894])

4. Спасибо. хорошо, это сработало, но я указал две разные точки, но обе показаны в одном и том же месте. Приложил скриншот.

5. Оба местоположения неверны. все объекты указывают только на это местоположение.