import * as KMap from '@/utils/ol-map/KMap'; import Style from "ol/style/Style"; import Icon from "ol/style/Icon"; import { newPoint } from "@/utils/map.js"; import flyPointIcon from "@/assets/images/warningHome/chat/fly-point.png"; /** * */ class pointLayer { constructor(kmap) { this.kmap = kmap // 位置图标 this.pointLayer = new KMap.VectorLayer("pointLayer", 1000, { visible: false, style: () => { return new Style({ image: new Icon({ // 使用打包器可识别的静态资源路径 src: flyPointIcon, scale: 0.6, }), }); }, }); this.kmap.addLayer(this.pointLayer.layer); this.setMapPoint() } setMapPoint() { // 图标点位 let point = [ { id: 1, wkt: "POINT(110.937533572 21.9752048347)", url: "1", }, { id: 2, wkt: "POINT(111.006303846 22.0427499)", url: "2", }, { id: 3, wkt: "POINT(110.952463176 22.0266637782)", url: "3", }, { id: 4, wkt: "POINT(110.964404259 21.954198378)", url: "4", }, { id: 6, wkt: "POINT(110.870809782 22.0103192249)", url: "5", }, { id: 8, wkt: "POINT(111.004240017 22.0377065354)", url: "6", }, { id: 9, wkt: "POINT(110.907575135 21.9370288761)", url: "7", }, { id: 10, wkt: "POINT(110.861455112 21.9521709844)", url: "8", }, { id: 11, wkt: "POINT(110.941859265 21.9810418917)", url: "9", }, { id: 12, wkt: "POINT(110.85275219 22.0177644506)", url: "10", }, { id: 13, wkt: "POINT(110.937319394 22.0469353146)", url: "11", }, { id: 15, wkt: "POINT(111.002916366 22.0546410706)", url: "12", }, ] point.map((item) => { let point = newPoint(item, 'wkt'); this.pointLayer.addFeature(point) }) this.pointLayer.layer.setVisible(false); } showPoint() { // 显示点位图层 this.pointLayer.layer.setVisible(true); // 使用 source 计算范围,VectorLayer 本身没有 getExtent 方法 const extent = this.pointLayer.source.getExtent(); if (extent && extent[0] !== Infinity) { // 通过 kmap(KMap.Map 实例)来缩放到点位范围 this.kmap.fit(extent, [100, 100, 100, 100]); } } hidePoint() { this.pointLayer.layer.setVisible(false); } } export default pointLayer;