как показать некоторые маркеры на статическом изображении, используя OpenLayers 3

Я пытаюсь показать некоторый маркер на статическое изображение, т.е.как показать некоторые маркеры на статическом изображении, используя OpenLayers 3

Учитывая статическое изображение определенного размера в футах и установить точки в футы, как отмечают некоторые изображения или маркером на статическом изображении с помощью openlayers3

Я понимаю, у нас есть положение в openlayer3 использовать статическое изображение в качестве базового слоя карты

я не получаю, как показать маркер на статическом изображении (базовый слой) для данных определенных графиков на изображении

Любая помощь будет больше, спасибо вам, пожалуйста, предложить войну, чтобы сделать это

Я показать статическое изображение как карты, как показано ниже

<!DOCTYPE html> 
<html> 
<head> 
    <title>Static image example</title> 
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.6.0/ol.css" type="text/css"> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.6.0/ol.js"></script> 

</head> 
<body> 
<div class="container-fluid"> 

    <div class="row-fluid"> 
     <div class="span12"> 
      <div id="map" class="map"></div> 
     </div> 
    </div> 

</div> 
<script> 
    // Map views always need a projection. Here we just want to map image 
    // coordinates directly to map coordinates, so we create a projection that uses 
    // the image extent in pixels. 
    var extent = [0, 0, 1024, 968]; 
    var projection = new ol.proj.Projection({ 
     code: 'xkcd-image', 
     units: 'pixels', 
     extent: extent 
    }); 

    var map = new ol.Map({ 
     layers: [ 
      new ol.layer.Image({ 
       source: new ol.source.ImageStatic({ 
        attributions: [ 
         new ol.Attribution({ 
          html: '&copy; <a href="http://xkcd.com/license.html">xkcd</a>' 
         }) 
        ], 
        url: 'colorful-triangles-background.jpg', 
        projection: projection, 
        imageExtent: extent 
       }) 
      }) 
     ], 
     target: 'map', 
     view: new ol.View({ 
      projection: projection, 
      center: ol.extent.getCenter(extent), 
      zoom: 2 
     }) 
    }); 

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

Но я понятия не имею, как построить на маркеры участки JSON приведены в сюжете некоторые вещи, как ниже

[{ х: 1,234, у: 3,34, единиц: ноги }, { х: 2,234, у: 4.34, единицы: ноги }, { х: 7.234, у: 9,34, единицы: ноги }]

источник

2016-01-16 DhanaLaxshmi

Создание Icon Style
Создать значок компонента
Setup новый векторный слой с векторным источником
Добавить векторный слой в слой карты
Я отобразил маркер при щелчке по карте в позиции мыши, вы можете добавить маркеры на событие вы хотите

Кроме того, поскольку у меня не было изображений, на которые вы ссылались, я ссылался на изображение с открытым слоем.

<!DOCTYPE html> 
<html> 
<head> 
    <title>Static image example</title> 
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com /bootstrap/3.3.4/css/bootstrap.min.css"> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.6.0/ol.css" type="text/css"> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.6.0/ol.js"> </script> 

</head> 
<body> 
<div class="container-fluid"> 

<div class="row-fluid"> 
<div class="span12"> 
    <div id="map" class="map"></div> 
</div> 
</div> 
</div> 
<script> 
    // Map views always need a projection. Here we just want to map  image 
    // coordinates directly to map coordinates, so we create a projection that uses 
    // the image extent in pixels. 
    var extent = [0, 0, 1024, 968]; 
    var projection = new ol.proj.Projection({ 
     code: 'xkcd-image', 
     units: 'pixels', 
     extent: extent 
    }); 


var iconStyle = new ol.style.Style({ 
    image: new ol.style.Icon(({ 
     anchor: [15, 24], 
     size: [32, 48], 
     anchorXUnits: 'pixels', 
     anchorYUnits: 'pixels', 
     opacity: 0.75, 
     src: 'http://www2.psd100.com/ppp/2013/11/0501/Map-marker-icon-1105213652.png' 
    })) 
}); 


//Create a Feature 
var iconFeature = new ol.Feature({ 
     geometry: new ol.geom.Point([72.5800, 23.0300]) 

    }); 

//Setup a Vector Source 
var vectorSource = new ol.source.Vector({ 
    features: [iconFeature] 
}); 

//Setup a Vector Layer 
var vectorLayer = new ol.layer.Vector({ 
    source: vectorSource 
}); 

iconFeature.setStyle(iconStyle); 


var map = new ol.Map({ 
layers: [ 
    new ol.layer.Image({ 
     source: new ol.source.ImageStatic({ 
      attributions: [ 
       new ol.Attribution({ 
        html: '&copy; <a href="http://xkcd.com/license.html">xkcd</a>' 
       }) 
      ], 
      url: 'http://imgs.xkcd.com/comics/online_communities.png', 
      projection: projection, 
      imageExtent: extent 
     }) 
    }), vectorLayer //Add Vector in layers 
], 
target: 'map', 
view: new ol.View({ 
    projection: projection, 
    center: ol.extent.getCenter(extent), 
    zoom: 2 
}) 
}); 

//On Map click setup marker 
map.on('click', function (evt) { 

    var feature = new ol.Feature(new ol.geom.Point(evt.coordinate)); 
    feature.setStyle(iconStyle); 
    vectorSource.clear(); 
    vectorSource.addFeature(feature); 
    selectedlong = evt.coordinate[0]; 
    selectedlat = evt.coordinate[1]; 

}); 

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

источник

2016-01-21 13:11:23

спасибо так много, но я сделал то же самое, используя угловую директиву https://github.com/tombatossals/angular-openlayers-directive пожалуйста, проверьте, что хорошо для Refernce – DhanaLaxshmi

Спасибо. Я рад, что у вас есть решение по вашему запросу. –

как показать некоторые маркеры на статическом изображении, используя OpenLayers 3

ответ

Смежные вопросы