| | |
| | | const zoom = that.map.getView().getZoom(); //获取当前地图的缩放级别 |
| | | Logger.info('当前地图缩放级别为:' + zoom); |
| | | }); |
| | | this.pointermove(); |
| | | } |
| | | |
| | | hightLightColor: '0000FFFF'; |
| | |
| | | layers.push(layer); |
| | | }); |
| | | const feature = features[0]; |
| | | feature?.get('click')?.(event); |
| | | |
| | | const layer = layers[0]; |
| | | if (layer === this.drawLayer) return; |
| | | this.labelOverlay?.setVisible(false); |
| | | |
| | | if (feature !== this.activeFeature.value) { |
| | | this.emit('featureChange', feature, layer); |
| | |
| | | } |
| | | } |
| | | |
| | | private labelOverlay: MarkerOverlay = null; |
| | | private initLabelOverlay() { |
| | | if (this.labelOverlay) return; |
| | | // 创建一个 div 元素用于显示标签 |
| | | const labelElement = document.createElement('div'); |
| | | labelElement.className = 'ol-label-overlay'; |
| | | labelElement.style.position = 'relative'; |
| | | labelElement.style.background = 'rgba(0,0,0,0.6)'; |
| | | labelElement.style.borderRadius = '4px'; |
| | | labelElement.style.color = '#fff'; |
| | | labelElement.style.padding = '4px 8px'; |
| | | labelElement.style.whiteSpace = 'nowrap'; |
| | | labelElement.style.fontSize = '12px'; |
| | | labelElement.style.transform = 'translate(-50%, -100%)'; |
| | | labelElement.style.marginBottom = '8px'; |
| | | |
| | | // 创建 overlay |
| | | this.labelOverlay = new MarkerOverlay({ |
| | | element: labelElement, |
| | | offset: [0, 0], |
| | | positioning: 'bottom-center', |
| | | }); |
| | | |
| | | // 添加到地图 |
| | | this.map.addOverlay(this.labelOverlay); |
| | | } |
| | | private preSearchHighlightFeatures: Feature[] = []; |
| | | highlightSearch(features) { |
| | | if (!Array.isArray(features)) { |
| | |
| | | }); |
| | | |
| | | // 设置字体图标样式 |
| | | // 添加点击事件监听 |
| | | // iconFeature.set('click', (event) => { |
| | | // // 初始化 labelOverlay |
| | | // this.initLabelOverlay(); |
| | | // // 获取点击位置的坐标 |
| | | // const coordinate = event.coordinate; |
| | | // // 设置 labelOverlay 的内容和位置 |
| | | // const element = this.labelOverlay.getElement(); |
| | | // element.innerHTML = `第${index + 1}个位置`; |
| | | // this.labelOverlay.setPosition(coordinate); |
| | | // }); |
| | | |
| | | iconFeature.setStyle([ |
| | | new Style({ |
| | | text: new Text({ |
| | |
| | | } |
| | | this.preSearchHighlightFeatures = positionFeatures; |
| | | } |
| | | |
| | | pointermove() { |
| | | this.map.on('pointermove', (e) => { |
| | | if (this.map.hasFeatureAtPixel(e.pixel)) { |
| | | this.map.getViewport().style.cursor = 'pointer'; |
| | | } else { |
| | | this.map.getViewport().style.cursor = 'inherit'; |
| | | } |
| | | }); |
| | | } |
| | | |
| | | clearMarker() { |
| | | this.clearObjectSearch(); |
| | | } |
| | | |
| | | getWMTS = () => { |
| | | const projection = getProjection('EPSG:3857'); |
| | | const projectionExtent = projection.getExtent(); |