Question

我正在尝试在Angular 6中实现Marker集群。Marker工作正常。但是图标没有设置。请参见下面的屏幕截图。（https://i.stack.imgur.com/aQoau.jpg）。

HTML代码：

<div leaflet style="height: 400px;" 
     [leafletOptions]="Options" 
     [leafletMarkerCluster]="markerClusterData" 
     [leafletMarkerClusterOptions]="markerClusterOptions" 
     (leafletMarkerClusterReady)="markerClusterReady($event)">
</div>

代码：

this.options = {
  layers: [
    tileLayer('http://{s}.tile.openstreetmap.se/hydda/full/{z}/{x}/{y}.png', {
      minZoom: 7,
      maxZoom: 15,
      noWrap: true,
      attribution: 'Data: CSO.ie | Tiles courtesy of <a href="http://openstreetmap.se/" target="_blank">OpenStreetMap Sweden</a> &mdash; Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
    })],
  center: latLng(53.408, -9.128),
  zoom: 8.5
};

markerClusterGroup = L.markerClusterGroup({
});
markerClusterData: any[] = [];
markerClusterOptions: L.MarkerClusterGroupOptions;

markerClusterReady(group: L.MarkerClusterGroup) {

this.markerClusterGroup = group;
}

generateData() {
var addressPoints = [
  [53.537213887794579, -8.741433234420502],
  [53.531359980587304, -8.88873038570684],
  [53.536246630737267, -9.044410275854199],
  [53.388830603160024, -8.709717367294882],
  [53.536246630737267, -9.044410275854199],
  [53.387531019889508, -8.711018149247034],
  [53.537761167135095, -8.664822693474337],
  [53.456925611851041, -9.000062798412451],
];
  const data: any[] = [];
  for (let i = 0; i < addressPoints.length; i++) {

        const icon = L.icon({
            iconUrl: 'assets/marker-icon.png',
    shadowUrl: 'assets/marker-shadow.png'
        });

        data.push(L.marker([ addressPoints[i][0], addressPoints[i][1] ],{icon:icon}));
    }

    this.markerClusterData = data;

}

我尝试使用IconCreateFunction，但无法获得预期的结果。如果我缺少什么，请告诉我。先感谢您。

预期结果：

当前结果：

注意：我想要Angular 6中的预期结果。

Answer 1

您缺少的是从本机leafletcluster库中导入适当的样式，以便呈现彩色圆圈。

在您的angular.json中定义：

// EXPLICIT METHOD

let Cameras
if (props.filter.rover === 'curiousity') {
Cameras = (
  <Fragment>
    <option selected value={'FHAZ'}>
      FHAZ
    </option>
    <option value={'RHAZ'}>RHAZ</option>
    <option value={'MAST'}>MAST</option>
    <option value={'CHEMCAM'}>CHEMCAM</option>
    <option value={'MAHLI'}>MAHLI</option>
    <option value={'MARDI'}>MARDI</option>
    <option value={'NAVCAM'}>NAVCAM</option>
  </Fragment>
)
} else 
{Cameras = (
  <Fragment>
    <option selected value={'FHAZ'}>
      FHAZ
    </option>
    <option value={'RHAZ'}>RHAZ</option>
    <option value={'NAVCAM'}>NAVCAM</option>
    <option value={'PANCAM'}>PANCAM</option>
    <option value={'MINITES'}>MINITES</option>
  </Fragment>
)
}


// MAP METHOD
const CuriousityCameras = ['FHAZ', 'RHAZ', 'MAST', 'CHEMCAM', 'MAHLI', 'MARDI', 'NAVCAM']

const SpiritOpportunityCameras = ['FHAZ', 'RHAZ', 'NAVCAM', 'PANCAM', 'MINITES']

const CuriousityOptions = CuriousityCameras
.map(camera => <option value={camera}>{camera}</option>)

const SpiritOpportunityOptions = SpiritOpportunityCameras
.map(camera => <option value={camera}>{camera}</option>)


let Cameras;
if (props.filter.rover === 'curiousity') {
  Cameras = CuriousityOptions
} else {
  Cameras = SpiritOpportunityOptions
}


// JSX RETURN STATEMENT
<Select
    native
    value={props.filter.camera}
    onChange={props.filterChange('camera')}
    input={<FilledInput name="Camera" />}>
    {Cameras}
 </Select>

别忘了在导入样式后重新启动您的应用程序（停止服务器并点击ng serve）

Demo

单张标记群集-角度6（群集图标）

1 个答案: