xy-map 1.1.14 → 1.1.15

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "xy-map",
-  "version": "1.1.14",
+  "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;
 
 /**
  * 添加点图层
@@ -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'
@@ -59402,6 +59512,7 @@ const mapDraw = {
   addLayerLineAnimation: addLayerLineAnimation,
   addLayerPoint: addLayerPoint,
   addDiyPoint: addDiyPoint,
+  addFlashPoint: addFlashPoint,
   addLayerImagePoint: addLayerImagePoint,
   addLayerPolygon: addLayerPolygon,
   addLayerCircle: addLayerCircle,
@@ -59412,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;
 
 /**
  * 添加点图层
@@ -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'
@@ -59420,6 +59530,7 @@ const mapDraw = {
   addLayerLineAnimation: addLayerLineAnimation,
   addLayerPoint: addLayerPoint,
   addDiyPoint: addDiyPoint,
+  addFlashPoint: addFlashPoint,
   addLayerImagePoint: addLayerImagePoint,
   addLayerPolygon: addLayerPolygon,
   addLayerCircle: addLayerCircle,
@@ -59430,6 +59541,7 @@ const mapDraw = {
 // 地图工具
 const mapTools = {
   toGeoJson: toGeoJson,
+  pointToGeoJson: pointToGeoJson,
   loadImage: loadImage,
   ranging: ranging,
   drawArea: drawArea,