如何使用角度传单指令和geojson更改传单弹出窗口的偏移量？

Question

我使用angular-leaflet-directive和geojson使用leaflet和mapbox创建地图标记。标记上的弹出窗口未在标记上正确对齐。

angular.extend($scope, { // Map data
                geojson: {
                    data: $scope.filteredShows,
                    onEachFeature: function (feature, layer) {
                        layer.bindPopup(feature.properties.artist + ' · ' + feature.properties.venue);
                        layer.setIcon(defaultMarker);
                        layer.on({
                            mouseover: pointMouseover,
                            mouseout: pointMouseout
                        });
                        layers[feature.properties.id] = layer;
                    }
                }

            });

如何更改标记的偏移？

Answer 1

在popupAnchor: [-10, -10],中使用L.Icon。见http://leafletjs.com/reference.html#icon

Answer 2

如果您使用的是默认图像，但是由于使用的是Rails服务器来提供资产，因此它们会以不同的文件名放置在不同的位置，例如，这里有个提示，您不必the default icon中的值添加硬编码。

对于我来说，我将实际值注入到正确的位置。

x = tf.layers.conv2d(x, f, w)   
print(x.shape)      # x.shape = (64, 5, 5, 256)
x = tf.layers.batch_normalization(inputs=x, axis=-1, momentum=0.99, 
                                 epsilon=1e-3,name='bn', training=True)

然后，我创建了一个Icon实例，该实例直接使用<script type="text/javascript"> var injectedData = { paths: { leafletIcon: { iconRetinaUrl: '<%= image_url "leaflet-1.3.4/marker-icon-2x.png" %>', iconUrl: '<%= image_url "leaflet-1.3.4/marker-icon.png" %>', shadowUrl: '<%= image_url "leaflet-1.3.4/marker-shadow.png" %>', }, }, }; </script> 原型的图像偏移量的默认值。

Icon.Default

这与直接注入数据相同。根据您的特定用例执行适当的操作。

import { Icon } from 'leaflet';

const defaultIcon = new Icon({
  ...Icon.Default.prototype.options,
  ...injectedData.paths.leafletIcon,
});

就我而言，我在react-leaflet库中使用了React，而不是Angular，但是我确信您可以适当地调整用例。就我而言，我使用const defaultIcon = new Icon({ ...Icon.Default.prototype.options, { iconRetinaUrl: "/assets/leaflet-1.3.4/marker-icon-2x-00179c4c1ee830d3a108412ae0d294f55776cfeb085c60129a39aa6fc4ae2528.png", iconUrl: "/assets/leaflet-1.3.4/marker-icon-574c3a5cca85f4114085b6841596d62f00d7c892c7b03f28cbfa301deb1dc437.png", shadowUrl: "/assets/leaflet-1.3.4/marker-shadow-264f5c640339f042dd729062cfc04c17f8ea0f29882b538e3848ed8f10edb4da.png", }, }); 作为defaultIcon组件的道具。

Marker

我知道这并不能直接回答您的问题，但是您的问题和vitalik_74's answer使我走上了特定用例所需的道路，这是提供不同图像的一种简单但可靠的方法默认图标集（包括更改的文件名）的URL，同时也重复使用默认偏移号而不必进行硬编码。我希望我的回答将来能对遇到此问题的其他人有所帮助。