用户对问题“如何从openlayers4上的多边形/点的坐标中获取像素”的回答

link之家

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

如何从openlayers4上的多边形/点的坐标中获取像素

var geometry = Feature.getGeometry();
var coordinate = geometry.getCoordinates();
var pixel = map.getPixelFromCoordinate(coordinate);

<!doctype html>
<title> Hello OpenStreetMap </title>
</head>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.4.1/css/ol.css" type="text/css">
    <style>
    body {
     height: 100%;
     width: 100%;
     margin: 0px;
     padding: 0px
      .map {
        height: 100%;
        width: 100%;
    </style>
<div id="map" class="map"></div>
<div id="log"></div>
 <script src="https://openlayers.org/en/v4.4.1/build/ol.js" type="text/javascript"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</script>
<script>
    var polyFeature = new ol.Feature({
        geometry: new ol.geom.Point([7.129808, 50.618671]),
        projection: 'EPSG:4326'
    //Layers
    var vectorLayer = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: [polyFeature]
    var osmLayer = new ol.layer.Tile({
    source: new ol.source.OSM()
    // view
    //var centerPoint = ol.proj.transform([7.128499, 50.617803],'EPSG:4326','EPSG:3857');
    var view = new ol.View({
    projection: 'EPSG:4326',
    zoom: 18
    view.setCenter([7.128499, 50.617803]);
    var map = new ol.Map({
    target: 'map',
    view:view,
    layers: [ osmLayer,vectorLayer]
    var geometry = polyFeature.getGeometry();
    var coordinate = geometry.getCoordinates();
      var pixel1 = map.getPixelFromCoordinate(coordinate);
    map.setView(view);
    </script>
    </body>
    </html>

<img src="/templates/floorplan/cw/picture2.png" usemap="#image-map" class="map" id="beatles">

<img src="/templates/floorplan/cw/location.png" class="location" id="locationimg1" style="height:50px;width:50px;" >
<img src="/templates/floorplan/cw/location.png" class="location" id="locationimg2" style="height:50px;width:50px;">

<area id="3id" class="areaId" alt="Air Conditioning" title="Air Conditioning" href="#" coords="64,309,364,403,69,510,363,404,65,512,63,417,65,309" shape="poly">
<area id="4id" class="areaId" alt="Collaboration Point 1" title="Collaboration Point 1" href="#" coords="282,67,63,80,68,282,343,106" shape="poly" >
<area id="5id" class="areaId" alt="Collaboration point 2" title="Collaboration point 2" href="#" coords="357,66,518,63,355,222" shape="poly" >
<area id="6id" class="areaId" alt="Contact Center" title="Contact Center" href="#" coords="520,251,564,357,594,410,729,408,776,372,759,269,670,139" shape="poly">
 <area id="7id" class="areaId" alt="Collaboration Point 4" title="Collaboration Point 4" href="#" coords="710,107,874,114,810,350,768,255,730,181,649,70,649,70,650,70" shape="poly" >

  function generatepixelfromcoords(id) {
    console.log('generatepixelfromcoords');
    var i, x = [], y = [];
    var c = document.getElementById(id).getAttribute('coords').split(',');
    for (i = 0; i < c.length; i++) {
        x.push(c[i++]);
        y.push(c[i]);
    var t = medianofArr(y);
    var l = medianofArr(x);
    let letter = id.charAt(0);
    document.getElementById('locationimg' + letter).style.left = l + "px";
    document.getElementById('locationimg' + letter).style.top = t + "px";
    document.getElementById('locationimg' + letter).style.display = 'block';
  function medianofArr(arr1) {
    var concat = arr1;
    concat = concat.sort(
        function (a, b) { return a - b });
    console.log(concat);
    var length = concat.length;
        var total = 0;
        var avg = 0;
        for (var i = 0; i < concat.length; i++) {

如何从openlayers4上的多边形/点的坐标中获取像素

3 个回答