initMap() { const url = `https://123.1.1.207/rest/maps/chuzhoumap` const zoom = this.wid > 2000 ? 8.4 : 7.3; this.mapObj = L.map(this.mapId, { crs: L.CRS.EPSG4326, center: [32.53, 118.16], zoom, //初始缩放等级 zoomControl: true, //不显示缩放小控件 maxBounds: L.latLngBounds( L.latLng(31.82, 117.07), L.latLng(33.25, 119.25) ), attributionControl: false, // 移除右下角leaflet标识 zoomSnap: 0.2, maxBoundsViscosity: 1.0 }) new L.supermap.TiledMapLayer(url).addTo(this.mapObj) this.polygonLayer = new L.FeatureGroup() this.mapObj.addLayer(this.polygonLayer) }, //接口 getServiceList(pdata) { // featureGroup.clearLayers(); this.$http('/org/service/list', { orgId: pdata.orgId }).then(res => { if (res.code == 200) { this.mapdata.serviceList = res.data.map((item, i) => { if (i == 0) { item.ifMain = 1 } else { item.ifMain = 0 } return item }) this.paintMarker() } }) }, //打点 paintMarker() { let self = this; let marker const iconSize = this.wid > 2000 ? [40, 40] : [20, 20]; const gIcon = item => { return item.ifMain == 1 ? L.icon({ iconUrl: require('../../assets/img/CT/icon2.png'), iconSize }) : L.icon({ iconUrl: require('../../assets/img/CT/icon1.png'), iconSize }) } this.markers = self.mapdata.serviceList.map((item, idx) => { if (item.ifMain == 1) { self.setServiceOne(item) } marker = L.marker([item.latitude, item.longitude], { zIndexOffset: 1000, icon: gIcon(item), //图标 title: item.serviceName //图标名称 }) let mkLayer = marker .addTo(self.polygonLayer) .bindPopup(item.serviceName) if (item.ifMain == 1) { mkLayer.openPopup() } return marker }) const bindClick = list => { list.forEach((marker, index) => { marker.on('click', e => { self.mapdata.serviceList = self.mapdata.serviceList.map(it => ({ ...it, ifMain: 0 })) list.forEach(it => it.setIcon(gIcon({ ifMain: 0 }))) let item = self.mapdata.serviceList[index] item.ifMain = 1 self.setServiceOne(item) marker.setIcon(gIcon(item)) }) }) } bindClick(this.markers); // } } } 点击切换接口 后面报错 原先的打点还在
