Что не так в этом коде, что маркер не отображается на карте? - PullRequest
Новая
       71

Что не так в этом коде, что маркер не отображается на карте?

0 голосов
/ 17 июня 2020

может кто-нибудь сказать мне, почему это не работает. он практически не отличается от примера https://openlayers.org/en/latest/examples/icon.html, но не работает в моем проекте. Я использую "ol": "^ 6.3.1". Я долго безрезультатно пытался это исправить. 

import {Map, View, Feature} from 'ol';
import OSM from 'ol/source/OSM';
import { fromLonLat, transform } from 'ol/proj';
import {Tile as TileLayer, Vector as VectorLayer}  from 'ol/layer'
import VectorSource from 'ol/source/Vector';
import {Icon, Style} from 'ol/style';
import Point from 'ol/geom/Point';

  const iconFeature = new Feature({
    geometry: new Point([fromLonLat([-66.119412,-17.388694])]),
    name: 'Null Island',
    population: 4000,
    rainfall: 500,
  });

  const iconStyle = new Style({
    image: new Icon({
      anchor: [0.5, 46],
      anchorXUnits: 'fraction',
      anchorYUnits: 'pixels',
      src: 'https://openlayers.org/en/latest/examples/data/icon.png',
    }),
  });
  iconFeature.setStyle(iconStyle);

  const vectorSource = new VectorSource({
    features: [iconFeature]
  });

  const vectorLayer = new VectorLayer({
    source: vectorSource
  });

 var map = new Map({
    layers: [
      new TileLayer({
        source: new OSM()
      }), vectorLayer ],
    target: document.getElementById('map'),
    view: new View({
      center: fromLonLat([-66.119412,-17.388694]),
      zoom: 15
    })
  });

1 Ответ

1 голос
/ 18 июня 2020

Как указал Майк в своем комментарии, у вас есть дополнительный набор квадратных скобок в аргументе конструктора Point:

geometry: new Point([fromLonLat([-66.119412,-17.388694])]),

должно быть

geometry: new Point(fromLonLat([-66.119412,-17.388694])),

доказательство концепции скрипта

screenshot of resulting map

const iconFeature = new ol.Feature({
  geometry: new ol.geom.Point(ol.proj.fromLonLat([-66.119412, -17.388694])),
  name: 'Null Island',
  population: 4000,
  rainfall: 500,
});

const iconStyle = 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',
  }),
});
iconFeature.setStyle(iconStyle);

const vectorSource = new ol.source.Vector({
  features: [iconFeature]
});

const vectorLayer = new ol.layer.Vector({
  source: vectorSource
});

var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }), vectorLayer
  ],
  target: document.getElementById('map'),
  view: new ol.View({
    center: ol.proj.fromLonLat([-66.119412, -17.388694]),
    zoom: 15
  })
});
html,
body {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

.map {
  height: 100%;
  width: 100%;
}
<link rel="stylesheet" href="https://openlayers.org/en/v6.3.0/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.3.0/build/ol.js" type="text/javascript"></script>
<div id="map" class="map"></div>
...