我加载后的效果：
参考的链接：https://iclient.supermap.io/examples/leaflet/editor.html#12_pulse
你好，我看你的图片怎么看都像是没有引入插件 L.Icon.Pulse.js的样式文件，请参照开发指南中： https://iclient.supermap.io/web/introduction/leafletDevelop.html#%E5%8A%A8%E7%94%BB
引用了这个js和css文件，new出来的打印出来是一样的，
你试一下的代码 (PS: 引入的全是在线包)，不知道你的代码，按理说只要引入了对应的包就应该会出现动画
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title data-i18n="resources.title_pulse"></title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css" /> <link rel="stylesheet" href="https://iclient.supermap.io/dist/leaflet/iclient-leaflet.min.css" /> <link rel="stylesheet" href="https://iclient.supermap.io/libs/leaflet/plugins/leaflet-icon-pulse/L.Icon.Pulse.css"/> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js"></script> <script type="text/javascript" src="https://iclient.supermap.io/dist/leaflet/iclient-leaflet.js"></script> <script src="https://iclient.supermap.io/web/libs/leaflet/plugins/leaflet-icon-pulse/L.Icon.Pulse.js"></script> </head> <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;"> <div id="map" style="margin:0 auto;width: 100%;height: 100%"></div> <script type="text/javascript"> var host = window.isLocal ? window.server : "https://iserver.supermap.io"; var map, resultLayer, markers = [], dataUrl = host + "/iserver/services/data-DynamicData/rest/data", url = host + "/iserver/services/map-china400/rest/maps/China", pulseIcon = L.icon.pulse({ iconSize: [12, 12], color: '#2f8' }); map = L.map('map', { preferCanvas: true, center: [32, 104], maxZoom: 18, zoom: 4 }); L.supermap.tiledMapLayer(url).addTo(map); loadPulse(); function loadPulse() { var point1 = L.CRS.EPSG3857.project(L.latLng(22, 96)); var point2 = L.CRS.EPSG3857.project(L.latLng(42, 124)); var bounds = L.latLngBounds(L.latLng(point1.y, point1.x), L.latLng(point2.y, point2.x)); var boundsParam = new SuperMap.GetFeaturesByBoundsParameters({ datasetNames: ["DynamicData:Point"], bounds: bounds }); L.supermap .featureService(dataUrl) .getFeaturesByBounds(boundsParam, function (serviceResult) { createLayers(serviceResult.result.features); }); } function createLayers(result) { if (!result || !result.features || result.features.length < 1) { return; } result.features.map(function (feature) { var latLng = L.CRS.EPSG3857.unproject(L.point(feature.geometry.coordinates)); markers.push(L.marker(latLng, {icon: pulseIcon})); }); resultLayer = L.featureGroup(markers).addTo(map); } </script> </body> </html>
因为我是在vue中引用的，只能引用模块化的，关于引用部分是这样的。
L.Icon.Pulse = L.DivIcon.extend({ options: { className: '', iconSize: [12, 12], color: 'red', animate: true, heartbeat: 1 }, initialize: function (options) { L.setOptions(this, options) // css var uniqueClassName = 'lpi-' + new Date().getTime() + '-' + Math.round(Math.random() * 100000) var before = ['background-color: ' + this.options.color] var after = [ 'box-shadow: 0 0 6px 2px ' + this.options.color, 'animation: pulsate ' + this.options.heartbeat + 's ease-out', 'animation-iteration-count: infinite', 'animation-delay: ' + (this.options.heartbeat + 0.1) + 's' ] if (!this.options.animate) { after.push('animation: none') after.push('box-shadow:none') } var css = [ '.' + uniqueClassName + '{' + before.join('') + '}', '.' + uniqueClassName + ':after{' + after.join('') + '}' ].join('') var el = document.createElement('style') if (el.styleSheet) { el.styleSheet.cssText = css } else { el.appendChild(document.createTextNode(css)) } document.getElementsByTagName('head')[0].appendChild(el) // apply css class this.options.className = this.options.className + ' leaflet-pulsing-icon ' + uniqueClassName // initialize icon L.DivIcon.prototype.initialize.call(this, options) } }) L.icon.pulse = function (options) { return new L.Icon.Pulse(options) } L.Marker.Pulse = L.Marker.extend({ initialize: function (latlng, options) { options.icon = L.icon.pulse(options) L.Marker.prototype.initialize.call(this, latlng, options) } }) L.marker.pulse = function (latlng, options) { return new L.Marker.Pulse(latlng, options) } export default { L }
