// import mapboxgl from 'mapbox-gl/dist/mapbox-gl.js';
import { accessToken, mapStyle, mapCerter, mapZoom, mapBearing, mapPitch } from '@/utils/gis/config';
import WKT from 'terraformer-wkt-parser';
import { createApp } from 'vue';
export default class MapboxUtils {
_map = null;
_popupXC = null;
_popup = null;
constructor(options = {}) {
let { container, style, center, zoom, bearing, pitch } = options;
mapboxgl.accessToken = accessToken;
this._map = new mapboxgl.Map({
container: container || 'map',
style: style || mapStyle['wuhan'],
center: center || mapCerter,
zoom: zoom || mapZoom,
bearing: bearing || mapBearing,
pitch: pitch || mapPitch,
});
}
/***
* style 为标准mapbox 样式图层 具体 请看 → src/utils/gis/config.js mapStyle
* @param style
*/
setBaseMap(style) {
this._map.setStyle(style);
}
/***
* 控制图层显示及隐藏
* @param key
* @param flag
*/
setLayerVisible(keys, flag = false) {
let self = this;
self.map.on('idle', () => {
keys.map((key) => {
let layer = self._map.getLayer(key + '_layer');
if (!!layer) self._map.setLayoutProperty(key + '_layer', 'visibility', flag ? 'visible' : 'none');
});
});
}
/***
* 控制图层显示及隐藏
* @param key
* @param flag
*/
setLayerVisible2(keys, flag = false) {
let self = this;
self.map.on('idle', () => {
keys.map((key) => {
let layer = self._map.getLayer(key);
if (!!layer) self._map.setLayoutProperty(key + '_layer', 'visibility', flag ? 'visible' : 'none');
});
});
}
/***
* 设置图层透明度
* @param key
* @param opacity
*/
setLayerOpacity(key, opacity) {
let self = this;
self.map.on('idle', () => {
this._map.setPaintProperty(key + '_layer', 'raster-opacity', opacity);
});
}
loadWmsLayer(key, url, visible = true) {
let self = this;
let sourceId = key + '_source';
let layerId = key + '_layer';
!self._map.getSource(sourceId) &&
self._map.addSource(sourceId, {
type: 'raster',
tiles: [url],
tileSize: 512,
});
!self._map.getLayer(layerId) &&
self._map.addLayer({
id: layerId, //图层ID
type: 'raster', //图层类型
source: sourceId,
layout: {
// 布局类属性
visibility: visible ? 'visible' : 'none', // 可见性（可选，可选值为 none、visible，默认值为 visible）
},
paint: {
'raster-opacity': 1, //图层显示透明度
//raster-hue-rotate 设置该值以后，显示的颜色就不会是图层样式里面设置的颜色，所以最好不要设置
//"raster-hue-rotate": 60,//在色轮上旋转色相的角度
},
});
}
/******添加点数据
* @param icon 引入图标
* @param key 图层标识 String
* @param data 引入GIS数据
*/
loadPointsLayer(icon, key, data, name, visible = true) {
let self = this;
let layerId = key + '_layer';
let sourceId = key + '_source';
self._map.loadImage(icon, function (error, image) {
if (error) throw error;
let iconme = icon + 'name';
!self._map.hasImage(iconme) && self._map.addImage(iconme, image);
!self._map.getSource(sourceId) && self._map.addSource(sourceId, { type: 'geojson', data: data });
!self._map.getLayer(layerId) &&
self._map.addLayer({
id: layerId,
type: 'symbol',
source: sourceId,
layout: {
'text-field': ['get', name],
'text-variable-anchor': ['bottom'],
'text-radial-offset': 2,
'text-justify': 'auto',
'icon-image': iconme,
'icon-size': 1,
'icon-allow-overlap': true,
'text-allow-overlap': true,
visibility: visible ? 'visible' : 'none', // 可见性（可选，可选值为 none、visible，默认值为 visible）
},
paint: {
'text-color': 'rgba(229,229,229,1)',
'text-halo-color': 'rgba(0, 0, 0, 0.8)',
'text-halo-width': 3,
},
});
});
}
loadKriging(key, geojson, visible = true) {
let self = this;
let layerId = key + '_layer';
let sourceId = key + '_source';
!self._map.getSource(sourceId) && self._map.addSource(sourceId, { type: 'geojson', data: geojson });
!self._map.getLayer(layerId) &&
self._map.addLayer({
id: layerId,
type: 'symbol',
source: sourceId,
layout: {},
paint: {
'fill-color': '#088',
'fill-opacity': 0.8,
},
});
}
getLayer(key) {
return this._map.addLayer(`${key}_layer`);
}
getSource(key) {
return this._map.getSource(`${key}_source`);
}
/*******************************加载geojson面*************************
* @param key 图层标识（字符串）
* @param data geojson数据
* ******/
addGeolayer(key, data, visible = true) {
let self = this;
let layerId = key + '_layer';
let sourceId = key + '_source';
!self._map.getSource(sourceId) && self._map.addSource(sourceId, { type: 'geojson', data: data });
!self._map.getLayer(layerId) &&
self._map.addLayer({
id: layerId,
type: 'fill',
source: sourceId,
layout: {
visibility: visible ? 'visible' : 'none', // 可见性（可选，可选值为 none、visible，默认值为 visible）
},
paint: {
'fill-color': {
type: 'identity',
property: 'color',
},
'fill-opacity': 0.6,
},
});
}
addPolylineLayer(key, data, visible = true) {
let self = this;
let layerId = key + '_layer';
let sourceId = key + '_source';
!self._map.getSource(sourceId) && self._map.addSource(sourceId, { type: 'geojson', data: data });
!self._map.getLayer(layerId) &&
self._map.addLayer({
id: layerId,
type: 'line',
source: sourceId,
layout: {
visibility: visible ? 'visible' : 'none', // 可见性（可选，可选值为 none、visible，默认值为 visible）
'line-join': 'round',
'line-cap': 'round',
},
paint: {
'line-color': {
type: 'identity',
property: 'color',
},
'line-width': 3,
},
});
}
/**添加云图
*
* @param {*} key
* @param {*} 图片文件夹地址
* @param {*} visible
*/
addraincloudimage(key, url, visible) {
let self = this;
let layerId = key + '_layer';
let sourceId = key + '_source';
var frameCount = 42;
var currentImage = 0;
function getPath() {
return url + '/' + currentImage + '.png';
}
!self._map.getSource(sourceId) &&
self._map.addSource(sourceId, {
type: 'image',
url: getPath(),
coordinates: [
[111.976, 32.585],
[116.778, 32.585],
[116.778, 28.448],
[111.976, 28.448],
],
});
!self._map.getLayer(layerId) &&
self._map.addLayer({
id: layerId,
type: 'raster',
source: sourceId,
layout: {
// 布局类属性
visibility: visible ? 'visible' : 'none', // 可见性（可选，可选值为 none、visible，默认值为 visible）
},
paint: {
'raster-fade-duration': 0,
},
});
self._map.setZoom(6.5);
window.timerYuntu = null;
clearInterval(window.timerYuntu);
window.timerYuntu = setInterval(function () {
currentImage = (currentImage + 1) % frameCount;
self._map.getSource(sourceId).updateImage({ url: getPath() });
}, 1000);
}
/**
*
* @param {*} 图片地址
* @param {*} key
* @param {*} visible
*/
loadBasicalmapLayer(url, key, visible = true) {
function getPath() {
return url;
}
let self = this;
let layerId = key + '_layer';
let sourceId = key + '_source';
!self._map.getSource(sourceId) &&
self._map.addSource(sourceId, {
type: 'image',
url: getPath(),
coordinates: [
[114.146765747413, 30.6888549882226],
[114.35072631993, 30.6888549882226],
[114.35072631993, 30.55893502657],
[114.146765747413, 30.55893502657],
],
});
!self._map.getLayer(layerId) &&
self._map.addLayer({
id: layerId,
type: 'raster',
source: sourceId,
layout: {
// 布局类属性
visibility: visible ? 'visible' : 'none', // 可见性（可选，可选值为 none、visible，默认值为 visible）
},
paint: {
'raster-fade-duration': 0,
},
});
}
/**********************************图层添加文字*******************************/
/**
*
* @param {*} key 图层名称需要唯一
* @param {*} data
* @param {*} visible 显示隐藏
*/
addmapchart(key, data, visible = true) {
let self = this;
let layerId = key + '_layer';
let sourceId = key + '_source';
!self._map.getSource(sourceId) && self._map.addSource(sourceId, { type: 'geojson', data: data });
!self._map.getLayer(layerId) &&
self._map.addLayer({
id: key + '_layer',
type: 'symbol',
source: sourceId,
layout: {
'text-field': ['get', 'name'],
'text-variable-anchor': ['top', 'bottom', 'left', 'right'],
'text-radial-offset': 0.5,
'text-justify': 'auto',
visibility: visible ? 'visible' : 'none', // 可见性（可选，可选值为 none、visible，默认值为 visible）
},
paint: {
'text-color': 'rgba(255,255,100,1)',
'text-halo-color': 'rgba(0, 0, 0, 0.8)',
'text-halo-width': 3,
},
});
}
/******************************************高亮显示*****************************************/
addHiLight(key, data, visible = true) {
let self = this;
let sourceId = key + '_source';
let layerId1 = key + '_layer1';
let layerId2 = key + '_layer2';
!self._map.getSource(sourceId) && self._map.addSource(sourceId, { type: 'geojson', data: data });
!self._map.getLayer(layerId1) &&
self._map.addLayer({
id: layerId1,
type: 'fill',
source: sourceId,
layout: {
visibility: visible ? 'visible' : 'none', // 可见性（可选，可选值为 none、visible，默认值为 visible）
},
paint: {
'fill-outline-color': 'rgba(0,0,0,0.1)',
'fill-color': 'rgba(0,0,0,0.35)',
},
});
!self._map.getLayer(layerId2) &&
self._map.addLayer({
id: layerId2,
type: 'fill',
source: sourceId,
layout: {
visibility: visible ? 'visible' : 'none', // 可见性（可选，可选值为 none、visible，默认值为 visible）
},
paint: {
'fill-outline-color': '#484896',
'fill-color': 'rgb(255,255,255)',
'fill-opacity': 0.4,
},
filter: ['in', 'FID', ''],
});
self._map.on('click', layerId1, function (e) {
var bbox = [
[e.point.x - 5, e.point.y - 5],
[e.point.x + 5, e.point.y + 5],
];
var features = self._map.queryRenderedFeatures(bbox, {
layers: [layerId1],
});
var filter = features.reduce(
function (memo, feature) {
memo.push(feature.properties.FID);
return memo;
},
['in', 'FID']
);
self._map.setFilter(layerId2, filter);
let polygon = turf.polygon(e.features[0].geometry.coordinates);
let box = turf.bbox(polygon);
self._map.fitBounds(
[
[box[0], box[1]],
[box[2], box[3]],
],
{
maxZoom: 13.5,
}
);
});
}
/*************高亮显示线*************
*
*/
addlineHiLight(key, data, visible = true) {
let self = this;
let sourceId = key + '_source';
let layerId1 = key + '_layer1';
let layerId2 = key + '_layer2';
let layerId3 = key + '_layer3';
!self._map.getSource(sourceId) && self._map.addSource(sourceId, { type: 'geojson', data: data });
!self._map.getLayer(layerId1) &&
self._map.addLayer({
id: layerId1,
type: 'line',
source: sourceId,
layout: {
visibility: visible ? 'visible' : 'none', // 可见性（可选，可选值为 none、visible，默认值为 visible）
},
paint: {
'line-width': 3,
'line-color': 'rgba(0,0,0,0)',
},
});
!self._map.getLayer(layerId2) &&
self._map.addLayer({
id: layerId2,
type: 'line',
source: sourceId,
layout: {
visibility: visible ? 'visible' : 'none', // 可见性（可选，可选值为 none、visible，默认值为 visible）
},
paint: {
'line-width': 3,
'line-color': 'rgb(255,0,0)',
'line-opacity': 1,
},
filter: ['in', 'FID', ''],
minzoom: 14.5,
});
!self._map.getLayer(layerId3) &&
self._map.addLayer({
id: layerId3,
type: 'line',
source: sourceId,
layout: {
visibility: visible ? 'visible' : 'none', // 可见性（可选，可选值为 none、visible，默认值为 visible）
},
paint: {
'line-width': 3,
'line-color': 'rgb(255,255,0)',
'line-opacity': 1,
},
filter: ['in', 'FID', ''],
minzoom: 14.5,
});
}
/*****点击高亮****
*
*/
clickdisplay(layerId2, layerId3) {
let self = this;
self._map.on('mousemove', function (e) {
if (self._map.getLayer(layerId2)) {
let zoomarry = [];
let zoomclass;
while (zoomclass < 16.5) {
zoomclass = self._map.getZoom();
zoomarry.push(zoomclass);
for (let i = 0; i < zoomarry.length; i++) {
if (zoomarry[i] - zoomarry[i + 1] > 0) {
self._map.setLayerOpacity(layerId3, 0);
}
}
}
var features = self._map.queryRenderedFeatures(e.point, {
layers: [layerId2],
});
var filter = features.reduce(
function (memo, feature) {
memo.push(feature.properties.FID);
return memo;
},
['in', 'FID']
);
self._map.setFilter(layerId3, filter);
}
});
}
/*****聚焦管网******
* @param lon 经纬度
* @param layerId1 原始图层
* @param layerId2 高亮图层
* @param Number 框选范围
*/
bounderdisplay(lon, layerId1, layerId2, Number) {
let self = this;
self._map.on('zoom', function () {
if (self._map.getLayer(layerId1)) {
let zoomarry = [];
let zoomclass;
while (zoomclass < 16.5) {
zoomclass = self._map.getZoom();
zoomarry.push(zoomclass);
for (let i = 0; i < zoomarry.length; i++) {
if (zoomarry[i] - zoomarry[i + 1] > 0) {
self._map.setLayerOpacity(layerId2, 0);
}
}
}
let project = self._map.project(lon);
var bbox = [
[project.x - Number, project.y - Number],
[project.x + Number, project.y + Number],
];
var features = self._map.queryRenderedFeatures(bbox, {
layers: [layerId1],
});
var filter = features.reduce(
function (memo, feature) {
memo.push(feature.properties.FID);
return memo;
},
['in', 'FID']
);
self._map.setFilter(layerId2, filter);
}
});
}
/****缩放
* @param lon 经纬度
* @param Number 缩放等级
* @param number 速度
*/
flyto(lon, Number, number) {
let self = this;
self._map.flyTo({
center: lon,
zoom: Number,
speed: number,
});
}
/************框选高亮
*
*/
drowHilight(layerId1, layerId2) {
let self = this;
self._map.boxZoom.disable();
let canvas = self._map.getCanvasContainer();
let start;
let current;
let box;
canvas.addEventListener('mousedown', mouseDown, true);
function mousePos(e) {
var rect = canvas.getBoundingClientRect();
return new mapboxgl.Point(e.clientX - rect.left - canvas.clientLeft, e.clientY - rect.top - canvas.clientTop);
}
function mouseDown(e) {
if (!(e.shiftKey && e.button === 0)) return;
self._map.dragPan.disable();
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);
document.addEventListener('keydown', onKeyDown);
start = mousePos(e);
}
function onMouseMove(e) {
current = mousePos(e);
if (!box) {
box = document.createElement('div');
box.classList.add('boxdraw');
canvas.appendChild(box);
}
var minX = Math.min(start.x, current.x),
maxX = Math.max(start.x, current.x),
minY = Math.min(start.y, current.y),
maxY = Math.max(start.y, current.y);
var pos = 'translate(' + minX + 'px,' + minY + 'px)';
box.style.transform = pos;
box.style.WebkitTransform = pos;
box.style.width = maxX - minX + 'px';
box.style.height = maxY - minY + 'px';
}
function onMouseUp(e) {
finish([start, mousePos(e)]);
}
function onKeyDown(e) {
if (e.keyCode === 27) finish();
}
function finish(bbox) {
document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('keydown', onKeyDown);
document.removeEventListener('mouseup', onMouseUp);
if (box) {
box.parentNode.removeChild(box);
box = null;
}
if (bbox) {
var features = self._map.queryRenderedFeatures(bbox, {
layers: [layerId1],
});
if (features.length >= 1000) {
return window.alert('选择较少数量的特征');
}
var filter = features.reduce(
function (memo, feature) {
memo.push(feature.properties.FID);
return memo;
},
['in', 'FID']
);
self._map.setFilter(layerId2, filter);
}
self._map.dragPan.enable();
}
self._map.on('mousemove', function (e) {
if (self._map.getLayer(layerId2)) {
var features = self._map.queryRenderedFeatures(e.point, {
layers: [layerId2],
});
// Change the cursor style as a UI indicator.
self._map.getCanvas().style.cursor = features.length ? 'pointer' : '';
}
});
}
/*****************无图标数据点
*
*/
displayNoiconPoint(key, data, visible = true) {
let self = this;
let layerId = key + '_layer';
let sourceId = key + '_source';
!self._map.getSource(sourceId) && self._map.addSource(sourceId, { type: 'geojson', data: data });
!self._map.getLayer(layerId) &&
self._map.addLayer({
id: layerId,
type: 'symbol',
source: sourceId,
layout: {
'icon-allow-overlap': true,
visibility: visible ? 'visible' : 'none', // 可见性（可选，可选值为 none、visible，默认值为 visible）
},
paint: {
'text-color': 'red',
},
});
}
/***********添加闪烁图标
* @param data geojson数据
*/
addlighticon(key, data) {
let self = this;
let layerId = key + '_layer';
let geojson = data;
!!self._popupXC && self._popupXC.remove();
self._map.on('click', layerId, function (e) {
let content = e.features[0].properties;
self._popupXC = new mapboxgl.Popup().setHTML(
'<div class="makerTop"> ' +
content.name +
'</div>' +
'<div class="markerBody" ><p>' +
content.FID +
'</p>' +
'<p>' +
content.class +
'</p>' +
'<p>' +
content.times +
'</p></div>'
);
// .setLngLat(e.features[0].geometry.coordinates)
// .addTo(self._map);
});
geojson.features.forEach(function (marker) {
var el = document.createElement('div');
el.className = 'marker';
new mapboxgl.Marker(el).setLngLat(marker.geometry.coordinates).addTo(self._map);
});
}
/***********添加动态图标********************
*@param size 图标大小
*@param red,green,blue,r,g,b （rgb数值）
*@param opacity 透明度数值
*@param lightenicon 图标名称
*/
addactivativeicon(size, lightenicon) {
let self = this;
var size = size;
var pulsingDot = {
width: size,
height: size,
data: new Uint8Array(size * size * 4),
onAdd: function () {
var canvas = document.createElement('canvas');
canvas.width = pulsingDot.width;
canvas.height = pulsingDot.height;
pulsingDot.context = canvas.getContext('2d');
},
render: function () {
var duration = 1000;
var t = (performance.now() % duration) / duration;
var radius = (size / 2) * 0.3;
var outerRadius = (size / 2) * 0.7 * t + radius;
var context = pulsingDot.context;
// draw outer circle
context.clearRect(0, 0, pulsingDot.width, pulsingDot.height);
context.beginPath();
context.arc(pulsingDot.width / 2, pulsingDot.height / 2, outerRadius, 0, Math.PI * 2);
context.fillStyle = 'rgba(' + 3 + ',' + 48 + ',' + 135 + ',' + (1 - t) + ')';
context.fill();
// draw inner circle
context.beginPath();
context.arc(pulsingDot.width / 2, pulsingDot.height / 2, radius, 0, Math.PI * 2);
context.fillStyle = 'rgba(255,255,255,0)';
context.strokeStyle = 'white';
context.lineWidth = 2 + 4 * (1 - t);
context.fill();
context.stroke();
// update this image's data with data from the canvas
pulsingDot.data = context.getImageData(0, 0, pulsingDot.width, pulsingDot.height).data;
// keep the map repainting
self._map.triggerRepaint();
// return `true` to let the map know that the image was updated
return true;
},
};
!self._map.hasImage(lightenicon) && self._map.addImage(lightenicon, pulsingDot, { pixelRatio: 2 });
}
/***
* 加载icon图标（在mapbox中图标只能先加载后使用，需先加载至mapbox 容器）
* @param icons [{key:这个图标的唯一标识符（id）,url:图标路径}]
*/
loadImage(icons) {
let self = this;
icons.map((icon) => self._map.loadImage(icon.url, (error, image) => !error && self._map.addImage(icon.key, image)));
}
/***
* marker点击事件
* @param element 传入createPopup
*/
markerPopup(param, element) {
let self = this;
let alllayers = self._map.getStyle().layers;
let layers = [];
let string = /_source/;
for (let i = 0; i < alllayers.length; i++) {
if (string.test(alllayers[i].source)) {
layers.push(alllayers[i]);
}
}
for (let j = 0; j < layers.length; j++) {
if (param.layer.id == layers[j].id) {
if (layers[j].type == 'symbol') {
param.lngLat = param.geometry.coordinates;
} else if (layers[j].type == 'line') {
param.lngLat = param.geometry.coordinates[1];
}
!!self._popup && self._popup.remove();
let content = param.properties;
let dom = Object.is(typeof element, 'function') ? element(content) : element;
self._popup = new mapboxgl.Popup({ closeButton: false }).setLngLat(param.lngLat).setDOMContent(dom).addTo(self._map);
}
}
}
createPopup(Popup, properties) {
const popup = createApp(Popup, { params: properties });
const parent = document.createElement('div');
let instance = popup.mount(parent);
return instance.$el;
}
closeMarkerPopup() {
let self = this;
!!self._popup && self._popup.remove();
}
/**切换鼠标状态
*
* @param {*} data
*/
changeTypeOfmouse(layerId) {
let self = this;
self._map.on('mouseenter', layerId, function () {
self._map.getCanvas().style.cursor = 'pointer';
});
// Change it back to a pointer when it leaves.
self._map.on('mouseleave', layerId, function () {
self._map.getCanvas().style.cursor = '';
});
}
/**管道流向
*
* @param {*} lists
* @param {*} fieldName
* @returns
*/
Pipelineflow(data) {
let arr1 = [];
let arr2 = [];
let arr3 = [];
let self = this;
// 分割线段
var chunk = turf.lineChunk(data, 0.05, { units: 'miles' });
//console.log("一条线分割成多段：", chunk);
var colorNum = 0;
var colorList = [
'rgba(255,255,255,0)',
'rgba(255,255,255,0.2)',
'rgba(255,0,0,0.7)',
//"rgba(255,85,0,1)",
//"rgba(255,170,0,1)",
//"rgba(255,211,127,1)",
//"rgba(255,255,155,1)",
// "rgba(255,255,190,1)",
];
for (let i = 0; i < chunk.features.length; i++) {
var pageNum = i % 3;
if (pageNum == 2) {
arr1.push(chunk.features[i]);
} else if (pageNum == 1) {
arr2.push(chunk.features[i]);
} else {
arr3.push(chunk.features[i]);
}
}
addline('lineAllCount_0', arr1, colorList[0]);
addline('lineAllCount_1', arr2, colorList[1]);
addline('lineAllCount_2', arr3, colorList[2]);
function addline(name, source, color) {
!self._map.getSource(name) &&
self._map.addSource(name, {
type: 'geojson',
lineMetrics: true, // 线渐变必须条件
data: { type: 'FeatureCollection', features: source },
});
!self._map.getLayer(name) &&
self._map.addLayer({
id: name,
source: name,
type: 'line',
layout: {
visibility: 'visible',
'line-join': 'round',
'line-cap': 'round',
},
paint: {
'line-color': color,
'line-width': 3,
},
});
}
window.timerPipelineflow = null;
clearInterval(window.timerPipelineflow);
window.timerPipelineflow = setInterval(() => {
colorNum++;
for (let i = 0; i < 3; i++) {
var countNumShow = colorNum % 3;
var pageNum = i % 3;
var lineName = 'lineAllCount_' + i;
var totalNum = pageNum - countNumShow;
if (totalNum <= 0) {
self._map.setPaintProperty(lineName, 'line-color', colorList[2 - Math.abs(totalNum)]);
}
if (totalNum > 0) {
self._map.setPaintProperty(lineName, 'line-color', colorList[totalNum - 1]);
}
}
//触发一个显示框的渲染。使用自定义图层时，当图层发生改变，使用此方法去重渲染。
// 在下一个显示框渲染前多次调用此方法也只会渲染一次
self._map.triggerRepaint();
}, 800);
}
/**移除管道流向
*
* @param {*} lists
* @param {*} fieldName
* @returns
*/
removePipelineflow() {
let self = this;
// 分割线段
for (let i = 0; i < 3; i++) {
var lineName = 'lineAllCount_' + i;
if (self._map.getLayer(lineName)) {
self._map.removeLayer(lineName);
self._map.removeSource(lineName);
}
}
clearInterval(window.timerPipelineflow);
}
/***
* 将包含wkt 的数据 转换成 geojson 格式数据
* @param lists
* @param fieldName
*/
static wktToGeojson(lists, fieldName = 'shape') {
return {
type: 'FeatureCollection',
features: lists.map((item) => {
let geometry = WKT.parse(item[fieldName]);
return { type: 'Feature', geometry, properties: item };
}),
};
}
/**由经纬度拼接geojson
*
*/
getgeojson(data) {
let arr = [];
if (data.length > 0) {
for (var i = 0; i < data.length; i++) {
if (
data[i].lon != null &&
data[i].lat != null &&
data[i].lon != '' &&
data[i].lat != '' &&
parseFloat(data[i].lon) > -180 &&
parseFloat(data[i].lon) < 180 &&
parseFloat(data[i].lat) > -90 &&
parseFloat(data[i].lat) < 90
) {
let point = {
coordinates: [data[i].lon, data[i].lat],
properties: data[i],
};
arr.push(point);
}
}
}
return {
type: 'FeatureCollection',
features: arr.map((item) => {
let geometry = {
type: 'Point',
coordinates: item.coordinates,
};
return {
type: 'Feature',
geometry,
properties: item.properties,
};
}),
};
}
getWKTtoGeojson(arry) {
return {
type: 'FeatureCollection',
features: arry.map((item) => {
if (!!item.geometrys) {
let geometry = WKT.parse(item.geometrys);
return { type: 'Feature', geometry, properties: item };
} else {
let geometry = WKT.parse(item.supplier);
return { type: 'Feature', geometry, properties: item };
}
}),
};
}
/**添加水流动态图片
* timername:timerwater
* @param {*} key
* @param {*} data
*/
addwaterflow(url, key, data, visible = true) {
let self = this;
let layerId = key + '_layer';
let sourceId = key + '_source';
let frameCount = 91;
let currentImage = 0;
function getPath() {
return url + '/0_90_00' + currentImage + '.jpg';
}
// self._map.loadImage(getPath(), function (error, image) {
// if (error) throw error;
// let iconme = currentImage + "name";
// !self._map.hasImage(iconme) && self._map.addImage(iconme, image);
!self._map.getSource(sourceId) &&
self._map.addSource(sourceId, {
type: 'geojson',
data: data,
});
!self._map.getLayer(layerId) &&
self._map.addLayer({
id: layerId,
type: 'fill',
source: sourceId,
layout: {
visibility: visible ? 'visible' : 'none', // 可见性（可选，可选值为 none、visible，默认值为 visible）
},
paint: {
//"fill-pattern": iconme,
'fill-opacity': 1,
},
});
// });
window.timerwater = null;
clearInterval(window.timerwater);
window.timerwater = setInterval(function () {
currentImage++;
if (currentImage > 90) {
currentImage = 0;
} else {
currentImage = currentImage % frameCount;
self._map.loadImage(getPath(), function (error, image) {
if (error) throw error;
let iconme = currentImage + 'name';
!self._map.hasImage(iconme) && self._map.addImage(iconme, image);
if (self._map.getLayer(layerId)) {
self._map.setPaintProperty(layerId, 'fill-pattern', iconme);
}
});
}
}, 120);
}
/**武汉3D建筑
*
*/
addBulding(key, data) {
let self = this;
let sourceId = key + '_source';
let layerId = key + '_layer';
!self._map.getSource(sourceId) &&
self._map.addSource(sourceId, {
type: 'geojson',
data: data,
});
!self._map.getLayer(layerId) &&
self._map.addLayer({
id: layerId,
source: sourceId,
//'filter': ['==', 'extrude', 'true'],
type: 'fill-extrusion',
minzoom: 10,
Layout: {
visibility: 'visible',
},
paint: {
'fill-extrusion-color': [
'interpolate',
['linear'],
['get', 'Floor'],
10,
'hsl(215,80%,10%)',
20,
'hsl(215,80%,12%)',
30,
'hsl(215,80%,14%)',
80,
'hsl(215,80%,25%)',
100,
'hsl(215,80%,45%)',
125,
'hsl(215,80%,50%)',
300,
'hsl(215,80%,50%)',
],
//设置高度
'fill-extrusion-height': ['interpolate', ['linear'], ['zoom'], 10, 0, 10.05, ['get', 'Floor']],
'fill-extrusion-opacity': 0.8,
},
});
}
/**绘制动态抛物线
*@param strpoine 起点
*@param endpoint 终点
*@param linecolor 线初始色
*@param nowcolor 线渐变色
*/
addAnimateParacurve(key, strpoine, endpoint, linecolor, nowcolor) {
let self = this;
let layerId = key + '_layer';
const THREE = window.THREE;
let positions = [];
//传入参数
let height = 2000;
let anypoint = [strpoine, endpoint];
let point1 = turf.point(strpoine);
let point2 = turf.point(endpoint);
let midpoint = turf.midpoint(point1, point2).geometry.coordinates;
anypoint.splice(1, 0, midpoint);
for (let i = 0; i < anypoint.length; i++) {
if (i == 1) {
positions.push(mapboxgl.MercatorCoordinate.fromLngLat(anypoint[i], height));
} else {
positions.push(mapboxgl.MercatorCoordinate.fromLngLat(anypoint[i], 0));
}
}
let p1 = new THREE.Vector3(positions[0].x, positions[0].y, positions[0].z);
let p2 = new THREE.Vector3(positions[1].x, positions[1].y, positions[1].z);
let p3 = new THREE.Vector3(positions[2].x, positions[2].y, positions[2].z);
let curve = new THREE.QuadraticBezierCurve3(p1, p2, p3);
const linepoints = curve.getPoints(10);
const highLightGeometry = new THREE.Geometry();
highLightGeometry.vertices = linepoints; // 将分割后的前三个点赋值给顶点数据，后面只需改变这个顶点数组
highLightGeometry.verticesNeedUpdate = true; // 如果顶点队列中的数据被修改，该值需要被设置为 true
highLightGeometry.colors = new Array(linepoints.length).fill(new THREE.Color(linecolor));
let WallLayer = {
id: layerId,
type: 'custom',
renderingMode: '3d',
onAdd: (map, gl) => {
let camera = new THREE.Camera();
let scene = new THREE.Scene();
let renderer = new THREE.WebGLRenderer({
canvas: map.getCanvas(),
context: gl,
antialias: true,
});
let light = new THREE.PointLight(0xfca4c5);
light.position.set(0, 250, 0);
scene.add(light);
// 创建材质
// geometry.option
const material = new THREE.LineBasicMaterial({
linewidth: 1000,
vertexColors: THREE.VertexColors, // 顶点着色
transparent: false, // 定义此材质是否透明
side: THREE.DoubleSide,
});
let mesh = new THREE.Line(highLightGeometry, material);
scene.add(mesh);
renderer.autoClear = false;
WallLayer.camera = camera;
WallLayer.scene = scene;
WallLayer.renderer = renderer;
WallLayer.matrtial = material;
WallLayer.mesh = mesh;
WallLayer.map = map;
},
render: (gl, matrix) => {
var m = new THREE.Matrix4().fromArray(matrix);
WallLayer.camera.projectionMatrix = m;
WallLayer.renderer.state.reset();
WallLayer.renderer.render(WallLayer.scene, WallLayer.camera);
WallLayer.map.triggerRepaint();
},
};
if (!!!self._map.getLayer(layerId)) {
self._map.addLayer(WallLayer);
}
let colorIndex = 0; // 高亮颜色流动的索引值
let timestamp = 0; // 时间戳
function animate() {
// 时间间隔
let now = new Date().getTime();
if (now - timestamp > 300) {
highLightGeometry.colors = new Array(10 + 1).fill(new THREE.Color(linecolor)).map((color, index) => {
if (index === colorIndex) {
return new THREE.Color(nowcolor);
}
return color;
});
// 如果geometry.colors数据发生变化，colorsNeedUpdate值需要被设置为true
highLightGeometry.colorsNeedUpdate = true;
timestamp = now;
colorIndex++;
if (colorIndex > 10) {
colorIndex = 0;
}
}
requestAnimationFrame(animate);
}
animate();
}
/**扩散光效
* layername:lineCount_0
* timername:timerspread
*/
addAnimateWidthline(key, data, colorList) {
let self = this;
let sourceId = key + '_source';
// let colorList = [
// "rgba(255, 255, 255,1)",
// "rgba(235, 255, 235,0.9)",
// "rgba(215,255, 215,0.8)",
// "rgba(195, 255, 195,0.7)",
// "rgba(175, 255, 175,0.6)",
// "rgba(155, 255, 155,0.5)",
// "rgba(135, 255, 135,0.4)",
// "rgba(115, 255, 115,0.3)",
// "rgba(95, 255, 95,0.2)",
// "rgba(75, 255, 75,0.1)",
// ];
let widthlist = [1, 3, 5, 7, 9, 11, 13, 15, 17, 19];
let blurlist = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let colorNum = 0;
!self._map.getSource(sourceId) && self._map.addSource(sourceId, { type: 'geojson', data: data });
for (let i = 0; i < 10; i++) {
addline(key + i, colorList[i], widthlist[i], blurlist[i]);
}
function addline(name, color, width, blur) {
!self._map.getLayer(name) &&
self._map.addLayer({
id: name,
source: sourceId,
type: 'line',
layout: {
visibility: 'visible',
'line-join': 'round',
'line-cap': 'round',
},
paint: {
'line-color': color,
'line-width': width,
'line-blur': blur,
},
});
}
window.timerspread = null;
clearInterval(window.timerspread);
window.timerspread = setInterval(() => {
colorNum++;
for (let i = 0; i < 10; i++) {
var countNumShow = colorNum % 10;
var pageNum = i % 10;
var lineName = key + i;
var totalNum = pageNum - countNumShow;
if (totalNum <= 0) {
self._map.setPaintProperty(lineName, 'line-color', colorList[9 - Math.abs(totalNum)]);
self._map.setPaintProperty(lineName, 'line-width', widthlist[9 - Math.abs(totalNum)]);
self._map.setPaintProperty(lineName, 'line-blur', blurlist[9 - Math.abs(totalNum)]);
}
if (totalNum > 0) {
self._map.setPaintProperty(lineName, 'line-color', colorList[totalNum - 1]);
self._map.setPaintProperty(lineName, 'line-width', widthlist[totalNum - 1]);
self._map.setPaintProperty(lineName, 'line-blur', blurlist[totalNum - 1]);
}
}
self._map.triggerRepaint();
}, 100);
}
/**拓宽光效
* layername:lineCount_0
* timername:timertuokuan
*/
addAnimatetuokuanline(key, data, colorList) {
let self = this;
let sourceId = key + '_source';
// let colorList = [
// "rgba(255, 255, 255,1)",
// "rgba(235, 255, 235,0.9)",
// "rgba(215,255, 215,0.8)",
// "rgba(195, 255, 195,0.7)",
// "rgba(175, 255, 175,0.6)",
// "rgba(155, 255, 155,0.5)",
// "rgba(135, 255, 135,0.4)",
// "rgba(115, 255, 115,0.3)",
// "rgba(95, 255, 95,0.2)",
// "rgba(75, 255, 75,0.1)",
// ];
let widthlist = [1, 3, 5, 7, 9, 11, 13, 15, 17, 19];
let blurlist = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let colorNum = 0;
!self._map.getSource(sourceId) && self._map.addSource(sourceId, { type: 'geojson', data: data });
for (let i = 0; i < 10; i++) {
addline(key + i, colorList[i], widthlist[i], blurlist[i]);
}
function addline(name, color, width, blur) {
!self._map.getLayer(name) &&
self._map.addLayer({
id: name,
source: sourceId,
type: 'line',
layout: {
visibility: 'visible',
'line-join': 'round',
'line-cap': 'round',
},
paint: {
'line-color': color,
'line-width': width,
'line-blur': blur,
},
});
}
window.timertuokuan = null;
clearInterval(window.timertuokuan);
window.timertuokuan = setInterval(() => {
colorNum++;
for (let i = 0; i < 10; i++) {
var countNumShow = colorNum % 10;
var pageNum = i % 10;
var lineName = key + i;
var totalNum = pageNum - countNumShow;
if (totalNum <= 0) {
self._map.setPaintProperty(lineName, 'line-color', colorList[9 - Math.abs(totalNum)]);
self._map.setPaintProperty(lineName, 'line-width', widthlist[9 - Math.abs(totalNum)]);
self._map.setPaintProperty(lineName, 'line-blur', blurlist[9 - Math.abs(totalNum)]);
}
if (totalNum > 0) {
self._map.setPaintProperty(lineName, 'line-color', colorList[totalNum - 1]);
self._map.setPaintProperty(lineName, 'line-width', widthlist[totalNum - 1]);
self._map.setPaintProperty(lineName, 'line-blur', blurlist[totalNum - 1]);
}
}
self._map.triggerRepaint();
}, 100);
}
/**绘制流动光效
* layername:lineCount_
* timername:timerflow
*/
addbrightenLine(key, data, visible = true) {
let self = this;
let arr1 = [],
arr2 = [],
arr3 = [],
arr4 = [],
arr5 = [],
arr6 = [],
arr7 = [],
arr8 = [],
arr9 = [],
arr10 = [];
let layerId = key + '_layer';
let sourceId = key + '_source';
let colorList = [
'rgba(0, 36, 52,1)',
'rgba(0, 36, 52,0.9)',
'rgba(0, 36, 52,0.8)',
'rgba(0, 36, 52,0.7)',
'rgba(0, 36, 52,0.6)',
'rgba(0, 36, 52,0.5)',
'rgba(0, 36, 52,0.4)',
'rgba(0, 36, 52,0.3)',
'rgba(0, 36, 52,0.2)',
'rgba(0, 36, 52,0.1)',
];
let widthlist = [15, 14, 13, 12, 11, 10, 9, 8, 7, 6];
let colorNum = 0;
let chunk = turf.lineChunk(data, 0.03, { units: 'miles' }); //分割线段
!self._map.getSource(sourceId) && self._map.addSource(sourceId, { type: 'geojson', data: data });
!self._map.getLayer(layerId) &&
self._map.addLayer({
id: layerId,
type: 'line',
source: sourceId,
layout: {
visibility: visible ? 'visible' : 'none', // 可见性（可选，可选值为 none、visible，默认值为 visible）
'line-join': 'round',
'line-cap': 'round',
},
paint: {
'line-color': 'rgba(0,227,230,1)',
'line-width': 5,
},
});
for (let i = 0; i < chunk.features.length; i++) {
var pageNum = i % 10;
if (pageNum == 9) {
arr1.push(chunk.features[i]);
} else if (pageNum == 8) {
arr2.push(chunk.features[i]);
} else if (pageNum == 7) {
arr3.push(chunk.features[i]);
} else if (pageNum == 6) {
arr4.push(chunk.features[i]);
} else if (pageNum == 5) {
arr5.push(chunk.features[i]);
} else if (pageNum == 4) {
arr6.push(chunk.features[i]);
} else if (pageNum == 3) {
arr7.push(chunk.features[i]);
} else if (pageNum == 2) {
arr8.push(chunk.features[i]);
} else if (pageNum == 1) {
arr9.push(chunk.features[i]);
} else {
arr10.push(chunk.features[i]);
}
}
addline(key + 0, arr1, colorList[0], widthlist[0]);
addline(key + 1, arr2, colorList[1], widthlist[1]);
addline(key + 2, arr3, colorList[2], widthlist[2]);
addline(key + 3, arr4, colorList[3], widthlist[3]);
addline(key + 4, arr5, colorList[4], widthlist[4]);
addline(key + 5, arr6, colorList[5], widthlist[5]);
addline(key + 6, arr7, colorList[6], widthlist[6]);
addline(key + 7, arr8, colorList[7], widthlist[7]);
addline(key + 8, arr9, colorList[8], widthlist[8]);
addline(key + 9, arr10, colorList[9], widthlist[9]);
function addline(name, source, color, width) {
!self._map.getSource(name) &&
self._map.addSource(name, {
type: 'geojson',
lineMetrics: true, // 线渐变必须条件
data: { type: 'FeatureCollection', features: source },
});
!self._map.getLayer(name) &&
self._map.addLayer({
id: name,
source: name,
type: 'line',
layout: {
visibility: 'visible',
'line-join': 'round',
'line-cap': 'round',
},
paint: {
'line-color': color,
'line-width': width,
//"line-opacity": 0.5,
'line-blur': 2,
},
});
}
window.timerflow = null;
clearInterval(window.timerflow);
window.timerflow = setInterval(() => {
colorNum++;
for (let i = 0; i < 10; i++) {
var countNumShow = colorNum % 10;
var pageNum = i % 10;
var lineName = key + i;
var totalNum = pageNum - countNumShow;
if (totalNum <= 0) {
self._map.setPaintProperty(lineName, 'line-color', colorList[9 - Math.abs(totalNum)]);
self._map.setPaintProperty(lineName, 'line-width', widthlist[9 - Math.abs(totalNum)]);
}
if (totalNum > 0) {
self._map.setPaintProperty(lineName, 'line-color', colorList[totalNum - 1]);
self._map.setPaintProperty(lineName, 'line-width', widthlist[totalNum - 1]);
}
}
self._map.triggerRepaint();
}, 100);
}
/**绘制暗涵光效
* layername:lineCount_
* timername:timeranhan
*/
addbrightenanhan(key, data, visible = true) {
let self = this;
let arr1 = [],
arr2 = [],
arr3 = [],
arr4 = [],
arr5 = [],
arr6 = [],
arr7 = [],
arr8 = [],
arr9 = [],
arr10 = [];
let layerId = key + '_layer';
let sourceId = key + '_source';
let colorList = [
'rgba(0, 36, 52,1)',
'rgba(0, 36, 52,0.9)',
'rgba(0, 36, 52,0.8)',
'rgba(0, 36, 52,0.7)',
'rgba(0, 36, 52,0.6)',
'rgba(0, 36, 52,0.5)',
'rgba(0, 36, 52,0.4)',
'rgba(0, 36, 52,0.3)',
'rgba(0, 36, 52,0.2)',
'rgba(0, 36, 52,0.1)',
];
let widthlist = [15, 14, 13, 12, 11, 10, 9, 8, 7, 6];
let colorNum = 0;
let chunk = turf.lineChunk(data, 0.03, { units: 'miles' }); //分割线段
!self._map.getSource(sourceId) && self._map.addSource(sourceId, { type: 'geojson', data: data });
!self._map.getLayer(layerId) &&
self._map.addLayer({
id: layerId,
type: 'line',
source: sourceId,
layout: {
visibility: visible ? 'visible' : 'none', // 可见性（可选，可选值为 none、visible，默认值为 visible）
'line-join': 'round',
'line-cap': 'round',
},
paint: {
'line-color': 'rgba(0,227,230,1)',
'line-width': 5,
},
});
for (let i = 0; i < chunk.features.length; i++) {
var pageNum = i % 10;
if (pageNum == 9) {
arr1.push(chunk.features[i]);
} else if (pageNum == 8) {
arr2.push(chunk.features[i]);
} else if (pageNum == 7) {
arr3.push(chunk.features[i]);
} else if (pageNum == 6) {
arr4.push(chunk.features[i]);
} else if (pageNum == 5) {
arr5.push(chunk.features[i]);
} else if (pageNum == 4) {
arr6.push(chunk.features[i]);
} else if (pageNum == 3) {
arr7.push(chunk.features[i]);
} else if (pageNum == 2) {
arr8.push(chunk.features[i]);
} else if (pageNum == 1) {
arr9.push(chunk.features[i]);
} else {
arr10.push(chunk.features[i]);
}
}
addline(key + 0, arr1, colorList[0], widthlist[0]);
addline(key + 1, arr2, colorList[1], widthlist[1]);
addline(key + 2, arr3, colorList[2], widthlist[2]);
addline(key + 3, arr4, colorList[3], widthlist[3]);
addline(key + 4, arr5, colorList[4], widthlist[4]);
addline(key + 5, arr6, colorList[5], widthlist[5]);
addline(key + 6, arr7, colorList[6], widthlist[6]);
addline(key + 7, arr8, colorList[7], widthlist[7]);
addline(key + 8, arr9, colorList[8], widthlist[8]);
addline(key + 9, arr10, colorList[9], widthlist[9]);
function addline(name, source, color, width) {
!self._map.getSource(name) &&
self._map.addSource(name, {
type: 'geojson',
lineMetrics: true, // 线渐变必须条件
data: { type: 'FeatureCollection', features: source },
});
!self._map.getLayer(name) &&
self._map.addLayer({
id: name,
source: name,
type: 'line',
layout: {
visibility: 'visible',
'line-join': 'round',
'line-cap': 'round',
},
paint: {
'line-color': color,
'line-width': width,
//"line-opacity": 0.5,
'line-blur': 2,
},
});
}
window.timeranhan = null;
clearInterval(window.timeranhan);
window.timeranhan = setInterval(() => {
colorNum++;
for (let i = 0; i < 10; i++) {
var countNumShow = colorNum % 10;
var pageNum = i % 10;
var lineName = key + i;
var totalNum = pageNum - countNumShow;
if (totalNum <= 0) {
self._map.setPaintProperty(lineName, 'line-color', colorList[9 - Math.abs(totalNum)]);
self._map.setPaintProperty(lineName, 'line-width', widthlist[9 - Math.abs(totalNum)]);
}
if (totalNum > 0) {
self._map.setPaintProperty(lineName, 'line-color', colorList[totalNum - 1]);
self._map.setPaintProperty(lineName, 'line-width', widthlist[totalNum - 1]);
}
}
self._map.triggerRepaint();
}, 100);
}
/**绘制补水光效
* layername:lineCount_
* timername:timerbushui
*/
addbrightenbushui(key, data, visible = true) {
let self = this;
let arr1 = [],
arr2 = [],
arr3 = [],
arr4 = [],
arr5 = [],
arr6 = [],
arr7 = [],
arr8 = [],
arr9 = [],
arr10 = [];
let layerId = key + '_layer';
let sourceId = key + '_source';
let colorList = [
'rgba(0, 36, 52,1)',
'rgba(0, 36, 52,0.9)',
'rgba(0, 36, 52,0.8)',
'rgba(0, 36, 52,0.7)',
'rgba(0, 36, 52,0.6)',
'rgba(0, 36, 52,0.5)',
'rgba(0, 36, 52,0.4)',
'rgba(0, 36, 52,0.3)',
'rgba(0, 36, 52,0.2)',
'rgba(0, 36, 52,0.1)',
];
let widthlist = [15, 14, 13, 12, 11, 10, 9, 8, 7, 6];
let colorNum = 0;
let chunk = turf.lineChunk(data, 0.03, { units: 'miles' }); //分割线段
!self._map.getSource(sourceId) && self._map.addSource(sourceId, { type: 'geojson', data: data });
!self._map.getLayer(layerId) &&
self._map.addLayer({
id: layerId,
type: 'line',
source: sourceId,
layout: {
visibility: visible ? 'visible' : 'none', // 可见性（可选，可选值为 none、visible，默认值为 visible）
'line-join': 'round',
'line-cap': 'round',
},
paint: {
'line-color': 'rgba(0,227,230,1)',
'line-width': 5,
},
});
for (let i = 0; i < chunk.features.length; i++) {
var pageNum = i % 10;
if (pageNum == 9) {
arr1.push(chunk.features[i]);
} else if (pageNum == 8) {
arr2.push(chunk.features[i]);
} else if (pageNum == 7) {
arr3.push(chunk.features[i]);
} else if (pageNum == 6) {
arr4.push(chunk.features[i]);
} else if (pageNum == 5) {
arr5.push(chunk.features[i]);
} else if (pageNum == 4) {
arr6.push(chunk.features[i]);
} else if (pageNum == 3) {
arr7.push(chunk.features[i]);
} else if (pageNum == 2) {
arr8.push(chunk.features[i]);
} else if (pageNum == 1) {
arr9.push(chunk.features[i]);
} else {
arr10.push(chunk.features[i]);
}
}
addline(key + 0, arr1, colorList[0], widthlist[0]);
addline(key + 1, arr2, colorList[1], widthlist[1]);
addline(key + 2, arr3, colorList[2], widthlist[2]);
addline(key + 3, arr4, colorList[3], widthlist[3]);
addline(key + 4, arr5, colorList[4], widthlist[4]);
addline(key + 5, arr6, colorList[5], widthlist[5]);
addline(key + 6, arr7, colorList[6], widthlist[6]);
addline(key + 7, arr8, colorList[7], widthlist[7]);
addline(key + 8, arr9, colorList[8], widthlist[8]);
addline(key + 9, arr10, colorList[9], widthlist[9]);
function addline(name, source, color, width) {
!self._map.getSource(name) &&
self._map.addSource(name, {
type: 'geojson',
lineMetrics: true, // 线渐变必须条件
data: { type: 'FeatureCollection', features: source },
});
!self._map.getLayer(name) &&
self._map.addLayer({
id: name,
source: name,
type: 'line',
layout: {
visibility: 'visible',
'line-join': 'round',
'line-cap': 'round',
},
paint: {
'line-color': color,
'line-width': width,
//"line-opacity": 0.5,
'line-blur': 2,
},
});
}
window.timerbushui = null;
clearInterval(window.timerbushui);
window.timerbushui = setInterval(() => {
colorNum++;
for (let i = 0; i < 10; i++) {
var countNumShow = colorNum % 10;
var pageNum = i % 10;
var lineName = key + i;
var totalNum = pageNum - countNumShow;
if (totalNum <= 0) {
self._map.setPaintProperty(lineName, 'line-color', colorList[9 - Math.abs(totalNum)]);
self._map.setPaintProperty(lineName, 'line-width', widthlist[9 - Math.abs(totalNum)]);
}
if (totalNum > 0) {
self._map.setPaintProperty(lineName, 'line-color', colorList[totalNum - 1]);
self._map.setPaintProperty(lineName, 'line-width', widthlist[totalNum - 1]);
}
}
self._map.triggerRepaint();
}, 100);
}
/**巡查路线
*
*/
XunChaLine(icon, key, data) {
let self = this;
let sourceId = key + '_source';
let sourceId2 = key + '_source2';
let layerId = key + '_layer';
let layerId2 = key + '_layer2';
let arry = []; //实时坐标
let stept = turf.lineChunk(data, 0.03, { units: 'miles' }); //分割线段
for (let i = 0; i < stept.features.length; i++) {
for (let j = 0; j < stept.features[i].geometry.coordinates.length; j++) {
arry.push(stept.features[i].geometry.coordinates[j]);
}
}
//console.log(arry)
//连接线的Geojson
var geojson = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
geometry: {
type: 'LineString',
coordinates: [arry[0]],
},
},
],
};
var pointgeojson = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: arry[0],
},
properties: {
FID: '132***4589',
class: '巡河一班',
name: '王超凡',
times: '34次巡查',
},
},
],
};
self._map.loadImage(icon, function (error, image) {
if (error) throw error;
let iconme = icon + 'name';
!self._map.hasImage(iconme) && self._map.addImage(iconme, image);
!self._map.getSource(sourceId2) &&
self._map.addSource(sourceId2, {
type: 'geojson',
data: pointgeojson,
});
!self._map.getLayer(layerId2) &&
self._map.addLayer({
id: layerId2,
type: 'symbol',
source: sourceId2,
layout: {
'icon-image': iconme,
'icon-size': 1,
visibility: 'visible',
},
paint: {},
});
});
!self._map.getSource(sourceId) && self._map.addSource(sourceId, { type: 'geojson', data: geojson });
//console.log(pointgeojson)
//添加动态线
!self._map.getLayer(layerId) &&
self._map.addLayer({
id: layerId,
type: 'line',
minzoom: 14.5,
source: sourceId,
layout: {
'line-cap': 'round',
'line-join': 'round',
},
paint: {
'line-color': 'red',
'line-width': 5,
'line-opacity': 0.8,
},
});
window.timeranimatePoint = null;
clearInterval(window.timeranimatePoint);
let indexs = 0;
window.timeranimatePoint = setInterval(() => {
indexs++;
if (indexs == arry.length) {
clearInterval(window.timeranimatePoint);
} else {
geojson.features[0].geometry.coordinates.push(arry[indexs]);
pointgeojson.features[0].geometry.coordinates = arry[indexs];
self._map.getSource(sourceId).setData(geojson);
self._map.getSource(sourceId2).setData(pointgeojson);
console.log('xunxha');
}
}, 1000);
//巡查完毕，停止巡查
self._map.on('click', layerId2, (e) => {
//点击放大巡查线
self._map.flyTo({
center: e.features[0].geometry.coordinates,
zoom: 14.6,
speed: 0.8,
});
});
}
get map() {
return this._map;
}
get popup() {
return this._popup;
}
}
