xy-map 1.1.13 → 1.1.15

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "xy-map",
-  "version": "1.1.13",
+  "version": "1.1.15",
   "description": "雄越地图",
   "main": "xy-map.umd.min.js",
   "scripts": {
     "pub": "npm publish"
   },
   "keywords": [],
-  "author": "",
+  "author": "hanjing",
   "license": "ISC"
 }

package/xy-map.common.js

@@ -48283,6 +48283,24 @@ const toGeoJson = (list, type, props = 'position') => {
   return data;
 };
 
+// 点坐标转geoJson
+const pointToGeoJson = (position = [0, 0]) => {
+  let pointsData = {
+    id: Date.now().toString(),
+    type: 'Feature',
+    geometry: {
+      type: 'Point',
+      coordinates: position
+    },
+    properties: {}
+  };
+  let data = {
+    type: 'FeatureCollection',
+    features: [pointsData]
+  };
+  return data;
+};
+
 /**
  * 加载图片
  */
@@ -48453,6 +48471,7 @@ const Point_defaultOptions = {
   },
   click: null
 };
+let clock = null;
 
 /**
  * 添加点图层
@@ -48493,7 +48512,7 @@ const addLayerPoint = (option, layerId) => {
   }, layerId);
   if (opt.cluster.cluster) {
     let style = opt.cluster.style || {};
-    clusterLayer(id, style);
+    clusterLayer(opt, style);
   }
   if (opt.click) {
     mapClick(id, opt.click);
@@ -48522,6 +48541,97 @@ const addLayerPoint = (option, layerId) => {
   }
 };
 
+/**
+ * 添加闪烁点图层
+ */
+const addFlashPoint = (option = {
+  id: 'flash',
+  position: [],
+  timer: 3000,
+  // 闪烁时间
+  size: 140,
+  // 大小
+  layerId // 层级
+}) => {
+  // 点
+  let {
+    map
+  } = package_map;
+  const size = option.size;
+  const pulsingDot = {
+    width: size,
+    height: size,
+    data: new Uint8Array(size * size * 4),
+    onAdd: function () {
+      const canvas = document.createElement('canvas');
+      canvas.width = this.width;
+      canvas.height = this.height;
+      this.context = canvas.getContext('2d');
+    },
+    render: function () {
+      const duration = 1000;
+      const t = performance.now() % duration / duration;
+      const radius = size / 2 * 0.3;
+      const outerRadius = size / 2 * 0.5 * t + radius;
+      const context = this.context;
+
+      // Draw the outer circle.
+      context.clearRect(0, 0, this.width, this.height);
+      context.beginPath();
+      context.arc(this.width / 2, this.height / 2, outerRadius, 0, Math.PI * 2);
+      context.fillStyle = `rgba(255, 255, 255, ${1 - t})`;
+      context.fill();
+
+      // Draw the inner circle.
+      context.beginPath();
+      context.arc(this.width / 2, this.height / 2, radius, 0, Math.PI * 2);
+      context.fillStyle = 'rgba(255, 100, 100, 1)';
+      context.strokeStyle = 'white';
+      context.lineWidth = 2 + 4 * (1 - t);
+      context.fill();
+      context.stroke();
+
+      // Update this image's data with data from the canvas.
+      this.data = context.getImageData(0, 0, this.width, this.height).data;
+      map.triggerRepaint();
+      return true;
+    }
+  };
+
+  // 添加自定义图标
+  const imgId = 'pulsing-dot-' + option.id;
+  if (!map.hasImage(imgId)) {
+    map.addImage(imgId, pulsingDot, {
+      pixelRatio: 2
+    }); // 2倍屏分辨率
+  }
+
+  const opt = {
+    id: option.id,
+    data: option.data,
+    style: {
+      layout: {
+        'icon-image': imgId
+      },
+      paint: {
+        'text-opacity': 0
+      }
+    }
+  };
+  if (hasLayer(opt.id)) {
+    setSource(opt.id, opt.data);
+  } else {
+    addDiyPoint(opt, option.layerId);
+  }
+  if (option.timer > 0) {
+    window.clearInterval(clock);
+    clock = window.setInterval(() => {
+      map.removeImage(imgId);
+      window.clearInterval(clock);
+    }, option.timer);
+  }
+};
+
 /**
  * 添加自定义点图层
  */
@@ -48547,13 +48657,13 @@ const addDiyPoint = (option, layerId) => {
     // 该属性表示文本偏移锚点的距离，正值表示向右和向下，负值表示向左和向上
     'text-anchor': 'top',
     // 图标与锚点的位置关系
-    'icon-allow-overlap': false,
+    'icon-allow-overlap': true,
     // 是否允许图标重叠
-    'icon-ignore-placement': false,
+    'icon-ignore-placement': true,
     // 是否忽略图标位置（可选，默认值为 false。当值为 true 时，其他符号即使与此图标触碰也会显示）
-    'text-allow-overlap': false,
+    'text-allow-overlap': true,
     // 是否允许文本重叠（可选，默认值为 false。当值为 true 时，文本即使和其他符号触碰也会显示）
-    'text-ignore-placement': false,
+    'text-ignore-placement': true,
     // 是否忽略文本位置（可选，默认值为 false。当值为 true 时，其他符号即使与此文本触碰也会显示）
     // 'text-max-width': 12,        // 文本宽度
     'visibility': 'visible'
@@ -48584,7 +48694,7 @@ const addDiyPoint = (option, layerId) => {
   }, layerId);
   if (opt.cluster.cluster) {
     let style = opt.cluster.style || {};
-    clusterLayer(id, style);
+    clusterLayer(opt, style);
   }
   if (opt.click) {
     mapClick(id, opt.click);
@@ -48681,7 +48791,7 @@ const addLayerImagePoint = async (option, layerId) => {
     }
     if (opt.cluster.cluster) {
       let style = opt.cluster.style || {};
-      clusterLayer(id, style);
+      clusterLayer(opt, style);
     }
     if (opt.click) {
       mapClick(id, opt.click);
@@ -48726,10 +48836,6 @@ const clusterLayer = (option, style) => {
     map
   } = package_map;
   let id = option.id;
-  if (hasLayer(id)) {
-    setSource(id, option.data);
-    return;
-  }
   let layout = style ? style.layout : {};
   let layoutOpt = Object.assign({
     'text-field': '{point_count_abbreviated}',
@@ -48738,8 +48844,10 @@ const clusterLayer = (option, style) => {
   }, layout);
   let paint = style ? style.paint : {};
   let paintOpt = Object.assign({
-    'circle-color': ['step', ['get', 'point_count'], '#51bbd6', 100, '#f1f075', 350, '#f28cb1'],
-    'circle-radius': ['step', ['get', 'point_count'], 20, 100, 30, 750, 40]
+    'circle-color': ['step', ['get', 'point_count'], 'rgba(110, 204, 57, 0.7)', 20, 'rgba(240, 194, 12,  0.7)', 50, 'rgba(241, 128, 23,  0.7)', 100, 'rgba(241, 23, 23,  0.7)'],
+    'circle-stroke-color': ['step', ['get', 'point_count'], 'rgba(110, 204, 57, 0.3)', 20, 'rgba(240, 194, 12, 0.3)', 50, 'rgba(241, 128, 23, 0.3)', 100, 'rgba(241, 23, 23,  0.3)'],
+    'circle-stroke-width': ['step', ['get', 'point_count'], 5, 20, 6, 50, 7, 100, 7],
+    'circle-radius': ['step', ['get', 'point_count'], 16, 20, 18, 50, 20, 100, 21]
   }, paint);
   map.addLayer({
     id: id + '-clusters',
@@ -48753,9 +48861,12 @@ const clusterLayer = (option, style) => {
     type: 'symbol',
     source: option.id,
     filter: ['has', 'point_count'],
-    layout: layoutOpt
+    layout: layoutOpt,
+    paint: {
+      'text-color': '#ffffff'
+    }
   });
-  mapClick(id + 'clusters', e => {
+  mapClick(id + '-clusters', e => {
     package_map.zoom('in', e.position);
   });
 };
@@ -59401,6 +59512,7 @@ const mapDraw = {
   addLayerLineAnimation: addLayerLineAnimation,
   addLayerPoint: addLayerPoint,
   addDiyPoint: addDiyPoint,
+  addFlashPoint: addFlashPoint,
   addLayerImagePoint: addLayerImagePoint,
   addLayerPolygon: addLayerPolygon,
   addLayerCircle: addLayerCircle,
@@ -59411,6 +59523,7 @@ const mapDraw = {
 // 地图工具
 const mapTools = {
   toGeoJson: toGeoJson,
+  pointToGeoJson: pointToGeoJson,
   loadImage: loadImage,
   ranging: ranging,
   drawArea: drawArea,

package/xy-map.umd.js

@@ -48301,6 +48301,24 @@ const toGeoJson = (list, type, props = 'position') => {
   return data;
 };
 
+// 点坐标转geoJson
+const pointToGeoJson = (position = [0, 0]) => {
+  let pointsData = {
+    id: Date.now().toString(),
+    type: 'Feature',
+    geometry: {
+      type: 'Point',
+      coordinates: position
+    },
+    properties: {}
+  };
+  let data = {
+    type: 'FeatureCollection',
+    features: [pointsData]
+  };
+  return data;
+};
+
 /**
  * 加载图片
  */
@@ -48471,6 +48489,7 @@ const Point_defaultOptions = {
   },
   click: null
 };
+let clock = null;
 
 /**
  * 添加点图层
@@ -48511,7 +48530,7 @@ const addLayerPoint = (option, layerId) => {
   }, layerId);
   if (opt.cluster.cluster) {
     let style = opt.cluster.style || {};
-    clusterLayer(id, style);
+    clusterLayer(opt, style);
   }
   if (opt.click) {
     mapClick(id, opt.click);
@@ -48540,6 +48559,97 @@ const addLayerPoint = (option, layerId) => {
   }
 };
 
+/**
+ * 添加闪烁点图层
+ */
+const addFlashPoint = (option = {
+  id: 'flash',
+  position: [],
+  timer: 3000,
+  // 闪烁时间
+  size: 140,
+  // 大小
+  layerId // 层级
+}) => {
+  // 点
+  let {
+    map
+  } = package_map;
+  const size = option.size;
+  const pulsingDot = {
+    width: size,
+    height: size,
+    data: new Uint8Array(size * size * 4),
+    onAdd: function () {
+      const canvas = document.createElement('canvas');
+      canvas.width = this.width;
+      canvas.height = this.height;
+      this.context = canvas.getContext('2d');
+    },
+    render: function () {
+      const duration = 1000;
+      const t = performance.now() % duration / duration;
+      const radius = size / 2 * 0.3;
+      const outerRadius = size / 2 * 0.5 * t + radius;
+      const context = this.context;
+
+      // Draw the outer circle.
+      context.clearRect(0, 0, this.width, this.height);
+      context.beginPath();
+      context.arc(this.width / 2, this.height / 2, outerRadius, 0, Math.PI * 2);
+      context.fillStyle = `rgba(255, 255, 255, ${1 - t})`;
+      context.fill();
+
+      // Draw the inner circle.
+      context.beginPath();
+      context.arc(this.width / 2, this.height / 2, radius, 0, Math.PI * 2);
+      context.fillStyle = 'rgba(255, 100, 100, 1)';
+      context.strokeStyle = 'white';
+      context.lineWidth = 2 + 4 * (1 - t);
+      context.fill();
+      context.stroke();
+
+      // Update this image's data with data from the canvas.
+      this.data = context.getImageData(0, 0, this.width, this.height).data;
+      map.triggerRepaint();
+      return true;
+    }
+  };
+
+  // 添加自定义图标
+  const imgId = 'pulsing-dot-' + option.id;
+  if (!map.hasImage(imgId)) {
+    map.addImage(imgId, pulsingDot, {
+      pixelRatio: 2
+    }); // 2倍屏分辨率
+  }
+
+  const opt = {
+    id: option.id,
+    data: option.data,
+    style: {
+      layout: {
+        'icon-image': imgId
+      },
+      paint: {
+        'text-opacity': 0
+      }
+    }
+  };
+  if (hasLayer(opt.id)) {
+    setSource(opt.id, opt.data);
+  } else {
+    addDiyPoint(opt, option.layerId);
+  }
+  if (option.timer > 0) {
+    window.clearInterval(clock);
+    clock = window.setInterval(() => {
+      map.removeImage(imgId);
+      window.clearInterval(clock);
+    }, option.timer);
+  }
+};
+
 /**
  * 添加自定义点图层
  */
@@ -48565,13 +48675,13 @@ const addDiyPoint = (option, layerId) => {
     // 该属性表示文本偏移锚点的距离，正值表示向右和向下，负值表示向左和向上
     'text-anchor': 'top',
     // 图标与锚点的位置关系
-    'icon-allow-overlap': false,
+    'icon-allow-overlap': true,
     // 是否允许图标重叠
-    'icon-ignore-placement': false,
+    'icon-ignore-placement': true,
     // 是否忽略图标位置（可选，默认值为 false。当值为 true 时，其他符号即使与此图标触碰也会显示）
-    'text-allow-overlap': false,
+    'text-allow-overlap': true,
     // 是否允许文本重叠（可选，默认值为 false。当值为 true 时，文本即使和其他符号触碰也会显示）
-    'text-ignore-placement': false,
+    'text-ignore-placement': true,
     // 是否忽略文本位置（可选，默认值为 false。当值为 true 时，其他符号即使与此文本触碰也会显示）
     // 'text-max-width': 12,        // 文本宽度
     'visibility': 'visible'
@@ -48602,7 +48712,7 @@ const addDiyPoint = (option, layerId) => {
   }, layerId);
   if (opt.cluster.cluster) {
     let style = opt.cluster.style || {};
-    clusterLayer(id, style);
+    clusterLayer(opt, style);
   }
   if (opt.click) {
     mapClick(id, opt.click);
@@ -48699,7 +48809,7 @@ const addLayerImagePoint = async (option, layerId) => {
     }
     if (opt.cluster.cluster) {
       let style = opt.cluster.style || {};
-      clusterLayer(id, style);
+      clusterLayer(opt, style);
     }
     if (opt.click) {
       mapClick(id, opt.click);
@@ -48744,10 +48854,6 @@ const clusterLayer = (option, style) => {
     map
   } = package_map;
   let id = option.id;
-  if (hasLayer(id)) {
-    setSource(id, option.data);
-    return;
-  }
   let layout = style ? style.layout : {};
   let layoutOpt = Object.assign({
     'text-field': '{point_count_abbreviated}',
@@ -48756,8 +48862,10 @@ const clusterLayer = (option, style) => {
   }, layout);
   let paint = style ? style.paint : {};
   let paintOpt = Object.assign({
-    'circle-color': ['step', ['get', 'point_count'], '#51bbd6', 100, '#f1f075', 350, '#f28cb1'],
-    'circle-radius': ['step', ['get', 'point_count'], 20, 100, 30, 750, 40]
+    'circle-color': ['step', ['get', 'point_count'], 'rgba(110, 204, 57, 0.7)', 20, 'rgba(240, 194, 12,  0.7)', 50, 'rgba(241, 128, 23,  0.7)', 100, 'rgba(241, 23, 23,  0.7)'],
+    'circle-stroke-color': ['step', ['get', 'point_count'], 'rgba(110, 204, 57, 0.3)', 20, 'rgba(240, 194, 12, 0.3)', 50, 'rgba(241, 128, 23, 0.3)', 100, 'rgba(241, 23, 23,  0.3)'],
+    'circle-stroke-width': ['step', ['get', 'point_count'], 5, 20, 6, 50, 7, 100, 7],
+    'circle-radius': ['step', ['get', 'point_count'], 16, 20, 18, 50, 20, 100, 21]
   }, paint);
   map.addLayer({
     id: id + '-clusters',
@@ -48771,9 +48879,12 @@ const clusterLayer = (option, style) => {
     type: 'symbol',
     source: option.id,
     filter: ['has', 'point_count'],
-    layout: layoutOpt
+    layout: layoutOpt,
+    paint: {
+      'text-color': '#ffffff'
+    }
   });
-  mapClick(id + 'clusters', e => {
+  mapClick(id + '-clusters', e => {
     package_map.zoom('in', e.position);
   });
 };
@@ -59419,6 +59530,7 @@ const mapDraw = {
   addLayerLineAnimation: addLayerLineAnimation,
   addLayerPoint: addLayerPoint,
   addDiyPoint: addDiyPoint,
+  addFlashPoint: addFlashPoint,
   addLayerImagePoint: addLayerImagePoint,
   addLayerPolygon: addLayerPolygon,
   addLayerCircle: addLayerCircle,
@@ -59429,6 +59541,7 @@ const mapDraw = {
 // 地图工具
 const mapTools = {
   toGeoJson: toGeoJson,
+  pointToGeoJson: pointToGeoJson,
   loadImage: loadImage,
   ranging: ranging,
   drawArea: drawArea,