- const mapConfig = {
- container: 'map',
- adcode: 411600,
- zoom: 13.6,
- pitch: 55,
- bearing: 0,
- fog: false,
- antialias: true, // 是否开启抗锯齿
- cursor: 'default',
- center: [113.953, 30.906],
- minZoom: 3,
- maxZoom: 22,
- isHotspot: false,
- isHotspotActive: false,
- };
- export default class NewFiberMapOperate {
- //地图实例
- map = null;
- //三维场景对象
- virtualSpaceObj = null;
- RunLineLayer = null;
- RayLayerObj = null;
- imageLayers = [];
- features = [];
- callbacks = {
- featureClick: undefined,
- };
-
- constructor(container, options) {
- this.initMap(container, options);
- }
-
- initMap(container, options) {
- let self = this;
- let config = Object.assign(mapConfig, options);
- config.container = container || config.container;
- config.style = {
- version: 8,
- sources: {
- 'raster-tiles': {
- type: 'raster',
- tiles: ['http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'],
- tileSize: 256,
- },
- },
- layers: [{ id: 'simple-tiles', type: 'raster', source: 'raster-tiles', minzoom: 0, maxzoom: 22 }],
- };
- self.map = new LKMap.Map(container, config);
- //self.map.setStyle(import.meta.env.VITE_APP_MAP_SRC + 'static/libs/map/nightblue.json');
- }
-
- //光效
- pointlight(geojson, key, lightColor) {
- let self = this;
- return geojson.features.forEach((feature, index) => {
- let feature_84 = gcoord.transform(feature, gcoord.WGS84, gcoord.GCJ02);
- let coordinates = feature_84.geometry.coordinates;
- let rayList = [
- {
- id: 'Diffusion' + index,
- type: 'Diffusion',
- radius: 250,
- color: lightColor ? lightColor : '#ff0',
- position: [coordinates[0], coordinates[1], 0],
- speed: 10,
- DiffusionOptions: {
- count: 1,
- width: 5,
- },
- rotation: {
- x: 90,
- y: 0,
- z: 0,
- },
- newfiberId: key,
- },
- ];
- self.RayLayerObj.addModel(rayList, e => {});
- gcoord.transform(feature, gcoord.GCJ02, gcoord.WGS84);
- });
- }
- //添加点
- /**
- *
- * @param {*} geojson
- * @param {*} icon
- * @param {*} visible true/false
- * @returns
- */
- addMarker(geojson, icon, id, visible, iconSize) {
- let self = this;
- console.log('geojson', geojson);
- return geojson.features.map(feature => {
- let feature_84 = gcoord.transform(feature, gcoord.WGS84, gcoord.GCJ02);
- let lonlat = feature_84.geometry.coordinates;
- let marker = new LKMap.Marker({
- map: self.map,
- position: new LKMap.LngLat(...lonlat),
- anchor: 'bottom',
- extData: feature.properties,
- visible: visible,
- icon: new LKMap.Icon({
- size: iconSize ? new LKMap.Size(iconSize[0], iconSize[1]) : new LKMap.Size(45, 79),
- image: icon,
- scope: [0, 25],
- anchor: 'top-center',
- }),
- label: {
- scope: [15, 25],
- content:
- feature.properties.name ||
- feature.properties.Name ||
- feature.properties.stName ||
- feature.properties.pointNumber ||
- feature.properties.sewageName ||
- feature.properties.sectionName ||
- feature.properties.pumpName,
- direction: 'top',
- offset: new LKMap.Pixel(0, -5),
- style: {
- 'background-color': 'rgba(255,255,255,1)',
- padding: '5px 10px',
- 'border-radius': '4px',
- color: 'black',
- 'box-shadow': '0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)',
- },
- },
- });
- marker.newfiberId = id;
- self.features.push(marker);
- if (self.callbacks.featureClick)
- self.features.flat(Infinity).forEach(i => {
- self.featureClick(i, self.callbacks.featureClick);
- });
- gcoord.transform(feature, gcoord.GCJ02, gcoord.WGS84);
- return marker;
- });
- }
- noClickMarker(geojson, icon, id) {
- let self = this;
- return geojson.features.map(feature => {
- let feature_84 = gcoord.transform(feature, gcoord.WGS84, gcoord.GCJ02);
- let lonlat = feature_84.geometry.coordinates;
- let marker = new LKMap.Marker({
- map: self.map,
- position: new LKMap.LngLat(...lonlat),
- anchor: 'bottom',
- extData: feature.properties,
- icon: new LKMap.Icon({
- size: new LKMap.Size(34, 65),
- image: icon,
- scope: [5, -25],
- anchor: 'top-center',
- }),
- });
- marker.newfiberId = id;
- self.features.push(marker);
- return marker;
- });
- }
- //添加线
- addGeojsonLine(geojson, id, color) {
- let self = this;
- return geojson.features.map(feature => {
- let feature_84 = gcoord.transform(feature, gcoord.WGS84, gcoord.GCJ02);
- let lonlat = feature_84.geometry.coordinates;
- let polyline = new LKMap.Polyline({
- map: self.map,
- path: new LKMap.LngLat(...lonlat),
- strokeWeight: 6,
- extData: feature.properties,
- strokeColor: color ? color : '#47E44E',
- });
- polyline.newfiberId = id;
- self.features.push(polyline);
- return polyline;
- });
- }
- //添加面
- addGeojsonPolygon(geojson, id, visible, color) {
- let self = this;
- return geojson.features.map(feature => {
- let feature_84 = gcoord.transform(feature, gcoord.WGS84, gcoord.GCJ02);
- let lonlat = feature_84.geometry.coordinates[0];
- let polygon = new LKMap.Polygon({
- map: self.map,
- path: lonlat,
- strokeWeight: 1,
- strokeColor: '#f8f2f3',
- strokeOpacity: 1,
- fillColor: !!color ? color : !!feature.properties.fillColor ? feature.properties.fillColor : self.randomRgb(),
- fillOpacity: 0.8,
- extData: feature.properties,
- visible: visible,
- });
- polygon.newfiberId = id;
- self.features.push(polygon);
- //gcoord.transform(feature, gcoord.GCJ02, gcoord.WGS84);
- return polygon;
- });
- }
- //动态水体
- addDynamicWater(geojson, id) {
- let self = this;
- // 通过plugin方法加载VirtualSpace三维场景插件
- self.map.plugin(['VirtualSpace'], function () {
- // 实例化三维场景类
- let VirtualSpaceObject = new LKMap.VirtualSpace({
- map: self.map, // 必传
- defaultLights: true,
- sky: true,
- // fogColor:'#e6c9a3',
- // sky3: true,
- skyType: 'daylight', // 'daylight': 白天 'night':晚上 'morning':清晨 'sunset':日落
- // skyLightColor: '#ffffff',
- // skyLightIntensity: 1,
- GltfDoubleSide: false, // 高精地图是否开启双面绘制
-
- // isDrawBuildings: true
- });
- // 通过VirtualSpaceObject初始化类
- let waterLayerObj = new VirtualSpaceObject.WaterLayer({
- VirtualSpace: VirtualSpaceObject, // 将场景对象传给水面,必传
- });
- geojson.features.forEach((feature, index) => {
- let feature_84 = gcoord.transform(feature, gcoord.WGS84, gcoord.GCJ02);
- let geojson = feature_84.geometry.coordinates;
- waterLayerObj.addModel({
- id: id + index,
- scale: 1,
- distortionScale: 3,
- data: geojson,
- waterColor: '#5470c6',
- size: 1,
- });
- });
- });
- }
- //添加白膜
- addBuilding(geojson, id) {
- let self = this;
- self.map.addLayer({
- id: id,
- type: 'fill-extrusion',
- source: {
- type: 'geojson',
- data: geojson,
- },
- // //绘画功能
- paint: {
- // Get the fill-extrusion-color from the source 'color' property. 从source 'color'属性获取fill- extrusive -color。
- // 'fill-extrusion-color':'rgba(200, 100, 240, 0.4)',
- // "fill-extrusion-color":['get','color'],//加载数据中的颜色
- 'fill-extrusion-color': {
- //根据数值中加载相对应颜色
- property: 'extend_3', // this will be your density property form you geojson
- stops: [
- [10, '#155ed7'],
- [20, '#2d6edb'],
- [30, '#447edf'],
- [80, '#5386da'],
- [100, '#7ba0dc'],
- [125, '#a1bfef'],
- [300, '#a1bfef'],
- ],
- },
- // 从source 'height'属性获取填充-挤出-高度。
- 'fill-extrusion-height': ['get', 'extend_3'],
- 'fill-extrusion-opacity': 1,
- },
- });
- }
- //添加wms
- addWMSLaters(key) {
- let self = this;
- let bboxs = [113.88115996100544, 30.80362587198562, 114.1592539075588, 31.005052001897184];
- let url = '/geoserver/xiaoganMapServer/wms?';
- let wasParam = {
- SERVICE: 'WMS',
- VERSION: '1.1.0',
- REQUEST: 'GetMap',
- FORMAT: 'image/png',
- TRANSPARENT: true,
- LAYERS: `xiaoganMapServer:${key}`,
- SRS: 'EPSG:3857',
- WIDTH: 256,
- HEIGHT: 256,
- };
- url =
- url +
- Object.keys(wasParam)
- .map(key => `${key}=${wasParam[key]}`)
- .join('&');
- let wmsLayer = new LKMap.TileLayer.WMS({
- getTileUrl: bbox => {
- let b = turf.bboxPolygon(bboxs);
- let a = turf.bboxPolygon(bbox.split(',').map(Number));
- a = gcoord.transform(a, gcoord.WebMercator, gcoord.WGS84);
- let i = turf.intersect(b, a);
- if (!!!i) return '';
- return url + `&bbox=${turf.bbox(gcoord.transform(a, gcoord.GCJ02, gcoord.WebMercator)).join(',')}`;
- },
- });
- wmsLayer.setMap(self.map);
- wmsLayer.newfiberId = key;
- self.features.push(wmsLayer);
- }
- //添加动态线
- addRunLine(geojson, key) {
- let self = this;
- let feature_84 = gcoord.transform(geojson.features[0], gcoord.WGS84, gcoord.GCJ02);
- let coordinates = feature_84.geometry.coordinates;
- let runLineList = [
- {
- image: 'https://lkimgyt.luokuang.com/1655260316814.png',
- height: 0,
- from: coordinates[0],
- to: coordinates[1],
- speed: 2,
- width: 20,
- newfiberId: key,
- },
- ];
- self.RunLineLayer.addLine(runLineList, e => {});
- // });
- }
- //添加弹窗
- createPopup(documentId, position) {
- let self = this;
- let position_gcj = gcoord.transform(turf.point(position), gcoord.WGS84, gcoord.GCJ02).geometry.coordinates;
- let element = document.getElementById(documentId);
- // 添加信息窗体
- let inforWindow = new LKMap.InforWindow({
- anchor: 'bottom',
- className: 'customClassName',
- content: element,
- isCustom: true, //使用自定义窗体
- showShadow: true, // 控制是否显示信息窗体阴影
- showShadowOffset: new LKMap.Pixel(0, -11), // 设置阴影偏移量
- });
- inforWindow.open(self.map, position_gcj);
- return inforWindow;
- }
- //feature点击事件
- featureClick(feature, callback) {
- if (feature.type !== 'tileLayer') feature.on('click', e => callback(e));
- }
- //获取图层
- getLayer(id) {
- let feature = [];
- this.features.forEach(item => {
- if (item.newfiberId && item.newfiberId == id) {
- feature.push(item);
- } else if (item.id && item.id == id) {
- feature.push(item);
- }
- });
- return feature;
- }
- //显隐控制
- setVisible(id, visible) {
- let feature = this.getLayer(id);
- feature.forEach(item => {
- visible == true ? item.show() : item.hide();
- });
- }
- //移除图层
- removeLayer(id) {
- let feature = this.getLayer(id);
- this.features.forEach((feature, index) => {
- if (feature.newfiberId && feature.newfiberId == id) {
- delete this.features[index];
- }
- });
- feature.forEach(item => {
- item.remove();
- });
- this.features = this.features.filter(Boolean);
- }
- //rgb颜色随机
- randomRgb() {
- const r = Math.floor(Math.random() * 256);
- const g = Math.floor(Math.random() * 256);
- const b = Math.floor(Math.random() * 256);
- return `rgba(${r},${g},${b},0.5)`;
- }
- }