Question

我按照本指南http://www.gavinharriss.com/code/opacity-control来实现带有MapTiler地图的不透明度控制滑块，但是，我无法找出链接到所有切片的正确功能。

我想改变的部分是：

CustomTileOverlay.prototype.getTileUrl = function (coord, zoom) {
    // Restricting tiles to the small tile set we have in the example
    if (zoom == 13 && coord.x >= 8004 && coord.x <= 8006 && coord.y >= 3013 && coord.y <= 3015) {
        return "tiles/" + zoom + "-" + coord.x + "-" + coord.y + ".png";
    }
    else {
        return "tiles/blanktile.png";
    }
}

图块的层次结构如下所示（每个数字13-17是缩放级别）。

我尝试使用调用原始叠加层的代码，但我认为它不正确。

CustomTileOverlay.prototype.getTileUrl = function(coord, zoom) { 
        var proj = map.getProjection();
        var z2 = Math.pow(2, zoom);
        var tileXSize = 256 / z2;
        var tileYSize = 256 / z2;
        var tileBounds = new google.maps.LatLngBounds(
            proj.fromPointToLatLng(new google.maps.Point(coord.x * tileXSize, (coord.y + 1) * tileYSize)),
            proj.fromPointToLatLng(new google.maps.Point((coord.x + 1) * tileXSize, coord.y * tileYSize))
        );
        var y = coord.y;
        var x = coord.x >= 0 ? coord.x : z2 + coord.x
        if (mapBounds.intersects(tileBounds) && (mapMinZoom <= zoom) && (zoom <= mapMaxZoom))
            return zoom + "/" + x + "/" + y + ".png";
        else
            return "http://www.maptiler.org/img/none.png";
    }

如果有帮助，我的代码对整个地图文件都是这样的。

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="style.css">

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCjb3ppOC4EegwpoOuJ-hgjfjXYDVuTz9M&libraries=places"></script>
<script type="text/javascript" src="ExtDraggableObject.js"></script>
<script type="text/javascript" src="CustomTileOverlay.js"></script>


<script>


var map;
var mapBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(33.439157, -117.732699),
    new google.maps.LatLng(33.499760, -117.644040));
var mapMinZoom = 13;
var mapMaxZoom = 17;
var maptiler = new google.maps.ImageMapType({
    getTileUrl: function(coord, zoom) { 
        var proj = map.getProjection();
        var z2 = Math.pow(2, zoom);
        var tileXSize = 256 / z2;
        var tileYSize = 256 / z2;
        var tileBounds = new google.maps.LatLngBounds(
            proj.fromPointToLatLng(new google.maps.Point(coord.x * tileXSize, (coord.y + 1) * tileYSize)),
            proj.fromPointToLatLng(new google.maps.Point((coord.x + 1) * tileXSize, coord.y * tileYSize))
        );
        var y = coord.y;
        var x = coord.x >= 0 ? coord.x : z2 + coord.x
        if (mapBounds.intersects(tileBounds) && (mapMinZoom <= zoom) && (zoom <= mapMaxZoom))
            return zoom + "/" + x + "/" + y + ".png";
        else
            return "http://www.maptiler.org/img/none.png";
    },
    tileSize: new google.maps.Size(256, 256),
    isPng: true,

    opacity: 1.0
});

</script>


<script>

// MAP OPTIONS //

var OPACITY_MAX_PIXELS = 57; // Width of opacity control image
var overlay;

function init() {
    var opts = {
        tilt:0,
        streetViewControl: false,
        center: new google.maps.LatLng(33.469469, -117.688360),
        zoom: 13,
        maxZoom: 17,

    };
  map = new google.maps.Map(document.getElementById("map"), opts);
  map.setMapTypeId('satellite');
  map.overlayMapTypes.insertAt(0, maptiler);



/// AutoComplete ///


  var input = /** @type {!HTMLInputElement} */(
  document.getElementById('pac-input'));

  var types = document.getElementById('type-selector');
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(types);

  var autocomplete = new google.maps.places.Autocomplete(input);
  autocomplete.bindTo('bounds', map);

  var infowindow = new google.maps.InfoWindow();
  var marker = new google.maps.Marker({
    map: map,
    anchorPoint: new google.maps.Point(0, -29)
  });

  autocomplete.addListener('place_changed', function() {
    infowindow.close();
    marker.setVisible(false);
    var place = autocomplete.getPlace();
    if (!place.geometry) {
      window.alert("Autocomplete's returned place contains no geometry");
      return;
    }

    // If the place has a geometry, then present it on a map.
    if (place.geometry.viewport) {
      map.fitBounds(place.geometry.viewport);
    } else {
      map.setCenter(place.geometry.location);
      map.setZoom(17);  // Why 17? Because it looks good.
    }
    marker.setIcon(/** @type {google.maps.Icon} */({
      url: place.icon,
      size: new google.maps.Size(71, 71),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(17, 34),
      scaledSize: new google.maps.Size(35, 35)
    }));
    marker.setPosition(place.geometry.location);
    marker.setVisible(true);

    var address = '';
    if (place.address_components) {
      address = [
        (place.address_components[0] && place.address_components[0].short_name || ''),
        (place.address_components[1] && place.address_components[1].short_name || ''),
        (place.address_components[2] && place.address_components[2].short_name || '')
      ].join(' ');
    }

    infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
    infowindow.open(map, marker);
  });



  /// Opacity ///

  var initialOpacity = 40;

  overlay = new CustomTileOverlay(map, initialOpacity);
  overlay.show();

  google.maps.event.addListener(map, 'tilesloaded', function () {
    overlay.deleteHiddenTiles(map.getZoom());
  });

  // Add opacity control and set initial value
  createOpacityControl(map, initialOpacity);


}


function createOpacityControl(map, opacity) {
      var sliderImageUrl = "opacity-slider3d14.png";

      // Create main div to hold the control.
      var opacityDiv = document.createElement('DIV');
      opacityDiv.setAttribute("style", "margin:5px;overflow-x:hidden;overflow-y:hidden;background:url(" + sliderImageUrl + ") no-repeat;width:71px;height:21px;cursor:pointer;");

      // Create knob
      var opacityKnobDiv = document.createElement('DIV');
      opacityKnobDiv.setAttribute("style", "padding:0;margin:0;overflow-x:hidden;overflow-y:hidden;background:url(" + sliderImageUrl + ") no-repeat -71px 0;width:14px;height:21px;");
      opacityDiv.appendChild(opacityKnobDiv);

      var opacityCtrlKnob = new ExtDraggableObject(opacityKnobDiv, {
        restrictY: true,
        container: opacityDiv
      });

      google.maps.event.addListener(opacityCtrlKnob, "dragend", function () {
        setOpacity(opacityCtrlKnob.valueX());
      });

      google.maps.event.addDomListener(opacityDiv, "click", function (e) {
        var left = findPosLeft(this);
        var x = e.pageX - left - 5; // - 5 as we're using a margin of 5px on the div
        opacityCtrlKnob.setValueX(x);
        setOpacity(x);
      });

      map.controls[google.maps.ControlPosition.TOP_RIGHT].push(opacityDiv);

      // Set initial value
      var initialValue = OPACITY_MAX_PIXELS / (100 / opacity);
      opacityCtrlKnob.setValueX(initialValue);
      setOpacity(initialValue);
    }

    function setOpacity(pixelX) {
      // Range = 0 to OPACITY_MAX_PIXELS
      var value = (100 / OPACITY_MAX_PIXELS) * pixelX;
      if (value < 0) value = 0;
      if (value == 0) {
        if (overlay.visible == true) {
          overlay.hide();
        }
      }
      else {
        overlay.setOpacity(value);
        if (overlay.visible == false) {
          overlay.show();
        }
      }
    }

    function findPosLeft(obj) {
      var curleft = 0;
      if (obj.offsetParent) {
        do {
          curleft += obj.offsetLeft;
        } while (obj = obj.offsetParent);
        return curleft;
      }
      return undefined;
    }

    google.maps.event.addDomListener(window, 'load', init);


</script>
</head>
<body onload="init()">

<input id="pac-input" class="controls" type="text" placeholder="Enter a location">

<div id="map"></div>

</body>
</html>

任何指导都会受到赞赏，因为很明显我不是一个javascript开发者。谢谢

尝试为MapTiler映射实现不透明度控件

0 个答案: