涂层图标

This commit is contained in:
licuizhu 2023-11-05 23:06:25 +08:00
parent 2097fada01
commit 55881bbe6e

View File

@ -4,7 +4,9 @@ import axios from 'axios';
import LayerData from './LayerData'; import LayerData from './LayerData';
import { AimOutlined } from '@ant-design/icons'; import { AimOutlined } from '@ant-design/icons';
import Guide from '../../components/Guide/index.ts'; import Guide from '../../components/Guide/index.ts';
import icon1 from '../../assets/icon/position_icon1.png';
import icon2 from '../../assets/icon/position_icon2.png'; import icon2 from '../../assets/icon/position_icon2.png';
import icon3 from '../../assets/icon/position_icon3.png';
import Header from '../../components/Header/index.js'; import Header from '../../components/Header/index.js';
import { GaodeMap ,Scene, PointLayer, Heatmap, PolygonLayer, Marker, MarkerLayer, Popup } from '@antv/l7'; import { GaodeMap ,Scene, PointLayer, Heatmap, PolygonLayer, Marker, MarkerLayer, Popup } from '@antv/l7';
@ -153,8 +155,8 @@ class BaseMap extends React.Component{
let LabelsData = data || []; let LabelsData = data || [];
let logoImage = data.length > 0 && data[0].logoImage; let logoImage = data.length > 0 && data[0].logoImage;
// map.addImage( 'blueIcon',logoImage,); // map.addImage( 'blueIcon',logoImage,);
map.addImage('yellowIcon', icon2,); // map.addImage('yellowIcon', icon2,);
map.addImage( 'greenIcon','https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg',); // map.addImage( 'greenIcon','https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg',);
// const pointLayer = new PointLayer({name: layerId}) // const pointLayer = new PointLayer({name: layerId})
// .source(LabelsData, { // .source(LabelsData, {
// parser: { // parser: {
@ -175,7 +177,10 @@ class BaseMap extends React.Component{
let el, popup, marker; let el, popup, marker;
for (let i = 0; i < LabelsData.length; i++) { for (let i = 0; i < LabelsData.length; i++) {
el = document.createElement('label'); el = document.createElement('label');
el.className = 'labelclass'; el.style.width = '22px';
el.style.height = '22px';
el.style.background = 'url("' + icon3 + '") no-repeat';
el.style.backgroundSize = 'contain';
popup = new Popup({ popup = new Popup({
offsets: [0, 30] offsets: [0, 30]
}).setHTML(`<div> }).setHTML(`<div>
@ -185,7 +190,7 @@ class BaseMap extends React.Component{
<div class="popup-memo">备注${LabelsData[i].memo || ''}</div> <div class="popup-memo">备注${LabelsData[i].memo || ''}</div>
</div>`); </div>`);
marker = new Marker({ marker = new Marker({
el element: el
}).setLnglat({lng: LabelsData[i].lng, lat: LabelsData[i].lat}) }).setLnglat({lng: LabelsData[i].lng, lat: LabelsData[i].lat})
.setPopup(popup); .setPopup(popup);