将图像添加到传单中的rect多边形 [英] add image to rect polygon in leaflet

问题描述

这是工作中的 JSFiddle

我需要的是将图像添加到rect多边形中，并且也不想像在放大或缩小时要重复自身一样并希望对其进行修复.任何建议将不胜感激，如果还有其他方法可以实现. 如果可以将其放置在geojson中，那将很棒，因为我必须为每个多边形提供一些属性.并动态创建所有rect多边形.

what I need is to add image to rect polygon and also don't want it to repeat itself as when zooming in or out and want it to be fixed. any suggestions will be appreciated and if there is any other way to achieve so. If it can be placed in geojson that will be great as I have to give some properties to each polygon. And create all the rect polygon dynamically.

代码在下面

var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
        osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
var map = new L.Map('map', {layers: [osm], center: new L.LatLng(24, 121), zoom: 9});
var states = [{
"type": "Feature",
"properties": {"party": "Republican"},
"geometry": {
    "type": "Polygon",
    "coordinates": [[
        [-104.05, 48.99],
        [-96.58,  45.94],
        [-104.03, 45.94],
        [-104.05, 48.99]
    ]]
}
}, {
"type": "Feature",
"properties": {"party": "Democrat"},
"geometry": {
    "type": "Polygon",
    "coordinates": [[
        [-109.05, 41.00],
        [-102.03, 36.99],
        [-109.04, 36.99],
        [-109.05, 41.00]
    ]]
}
}];
var poly1 = [
[24, 121],
[24.5, 121],
[24.5, 121.9],
[24, 121.9]
];
L.polygon(poly1, {fill:'url(http://i.imgur.com/ktPFJKC.jpg)'}).addTo(map);
 L.geoJson(states, {
style: function(feature) {
    switch (feature.properties.party) {
        case 'Republican': return {color:'#ff0000'};
        case 'Democrat':   return {color: "#0000ff"};
    }
}
}).addTo(map);

推荐答案

此处最好的做法是使用 ImageOverlay ，正是针对这种情况而设计的.您可以使用多边形对象的坐标来创建图像叠加层和位于其上方的不可见GeoJSON层.如果以与示例poly1相同的格式动态创建多边形对象，则可以在创建图像叠加层时像这样引用角点的索引:

The best thing to do here is use an ImageOverlay, which is designed for precisely this case. You can use the coordinates of your polygon object to create both the image overlay and an invisible GeoJSON layer that sits on top of it. If you are dynamically creating the polygon objects in the same format as your example poly1, then you can reference the indices of the corner points like this when creating the image overlay:

var imageUrl = 'http://i.imgur.com/ktPFJKC.jpg';
var imageBounds = L.latLngBounds([
    poly1[0],
    poly1[2]
  ]);

var imageLayer = L.imageOverlay(imageUrl, imageBounds).addTo(map).bringToBack();

如果您总是在GeoJSON多边形之前创建图像，则.bringToBack可能是不必要的，但是它可以确保图像叠加层不会干扰其他图层交互.您可以使用.toGeoJSON从多边形对象创建一个临时的GeoJSON对象，并设置所需的任何GeoJSON属性:

The .bringToBack may be unnecessary if you always create the image before the GeoJSON polygon, but it does ensure that the image overlay doesn't interfere with other layer interactions. You can create a temporary GeoJSON object from the polygon object using .toGeoJSON, and set any GeoJSON properties you like:

var polyTemp = L.polygon(poly1).toGeoJSON();
polyTemp.properties.name = 'pineapple';

然后创建一个不可见的L.GeoJSON层来处理交互:

Then create an invisible L.GeoJSON layer to handle the interactions:

var boxOptions = {fillOpacity:0, opacity:0, onEachFeature: onEachBox};
var imageBox = L.geoJson(polyTemp, boxOptions).addTo(map);

function onEachBox(feature, layer) {
  layer.bindPopup("Hello, I'm a " + polyTemp.properties.name);
}

这里的onEachBox函数当然只是一个示例，用来说明您可以访问GeoJSON属性.这是更新的小提琴:

The onEachBox function here is of course just an example to illustrate that you can access the GeoJSON properties. Here is an updated fiddle:

https://jsfiddle.net/17Ld98fv/

这篇关于将图像添加到传单中的rect多边形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！