microvideo-map - npm Package Compare versions

Comparing version 0.0.9 to 0.1.0

lib/sdk/map-sdk/map-public.js

@@ -0,1 +1,3 @@
+import { getTemplateVal } from "../../public-function";
+
 export default {
@@ -76,2 +78,38 @@ /**
     },
+    /**
+     * 点聚合的自定义绘制
+     * @param {Object} context 点聚合内容
+     *                 context.count 当前聚合点下聚合的 Marker 的数量
+     *                 context.marker 当前聚合点显示的 Marker
+     * @param {Object} config 配置
+     */
+    renderClusterMarker(context, config) {
+        const size = config.size || [40, 40]
+        const unit = config.sizeUnit || 'px'
+        const borderRadius = config.borderRadius || '50%'
+        const className = config.className ? 'marker-cluster ' + config.className : 'marker-cluster'
+
+        let div = document.createElement('div');
+        div.setAttribute('class', className)
+        div.style.width = String(size[0]) + unit
+        div.style.height = String(size[1]) + unit;
+
+        if (config.content) {
+            //  自定义内容
+            div.innerHTML = getTemplateVal(config.content, context)
+        } else {
+            //  默认内容
+            div.style.backgroundColor = config.backgroundColor || '#ff7272';
+            div.style.borderRadius = borderRadius;
+
+            div.innerHTML = context.count;
+            div.style.lineHeight = String(size[1]) + unit;
+            div.style.color = config.color || '#ffffff';
+            div.style.fontSize = '14px';
+            div.style.textAlign = 'center';
+        }
+
+        context.marker.setOffset(new AMap.Pixel(-size[0] / 2, -size[1] / 2));
+        context.marker.setContent(div)
+    }
 }

lib/sdk/map-sdk/map-sdk-f.js

@@ -6,122 +6,109 @@ /**
  */
- import MapSdk from "./";
+import MapSdk from "./";
+import mapPublic from './map-public'
 
 
- class MapSdkF extends MapSdk {
-     constructor(map, mapId, mapConfig, pointClick) {
-         super(map, mapId, mapConfig, pointClick);
-     }
- 
-     /**
-      * 创建点聚合
-      * @param data  Array
-      *          - name '' 图标提示信息
-      *          - path [lng,lat] 经纬度
-      *          - icon '' 图标名称
-      *          - size [32,32] 图标大小
-      * @param config 点聚合自定义样式
-      *          - className class名
-      *          - backgroundColor 背景色
-      *          - color 字体色
-      * @param callback   单个标记点点击回调
-      *          - e 标记点对象
-      *          - item 标记点data
-      *
-      * @returns {AMap.MarkerClusterer}
-      */
-     createMvMapMarkerCluster(data, config = {}, callback) {
-         const color = '#ff7272';
-         let points = [];
-         if (data) {
-             points = this.createMvMapMarkerLayer(data, callback, config)
-         }
-         let count = data.length;
-         let cluster = new AMap.MarkerClusterer(this.map, points, {
-             renderClusterMarker: (context) => {
-                 let div = document.createElement('div');
-                 div.setAttribute('class', config.className || 'marker-cluster')
-                 div.style.backgroundColor = config.backgroundColor || color;
-                 let size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
-                 div.style.width = div.style.height = size + 'px';
-                 div.style.borderRadius = '50%';
-                 div.innerHTML = context.count;
-                 div.style.lineHeight = size + 'px';
-                 div.style.color = config.color || '#ffffff';
-                 div.style.fontSize = '14px';
-                 div.style.textAlign = 'center';
-                 context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
-                 context.marker.setContent(div)
-             },
-             ...config
-         })
-         cluster.on('click', e => {
-             if (e.markers && e.markers.length !== 0) {
-                 callback(e, e.markers, { ...config, CLICK_TYPE: 'Cluster'})
-             }
-         })
-         return cluster;
-     }
- 
-     /**
-      * 添加地图控件
-      * @param controls( ['scale','toolBar','controlBar','overView'] )-Array
-      *          -- scale        比例尺
-      *          -- toolBar      工具条
-      *          -- controlBar   工具条方向盘
-      *          -- overView     显示鹰眼
-      */
-     addMvMapControl(controls) {
-         if (controls.indexOf('scale') != -1) {
-             this.map.addControl(new AMap.Scale())
-         }
-         if (controls.indexOf('toolBar') != -1) {
-             this.map.addControl(new AMap.ToolBar({
-                 position: { top: '10px', right: '10px' }
-             }))
-         }
-         if (controls.indexOf('controlBar') != -1) {
-             this.map.addControl(new AMap.ControlBar())
-         }
-         if (controls.indexOf('overView') != -1) {
-             let OverView = new AMap.OverView()
-             this.map.addControl(OverView);
-             OverView.open()
-         }
-     }
- 
- 
-     /**
-      * 创建热力图
-      *  - data Array
-      *      lng  [Number] 经度
-      *      lat  [Number] 纬度
-      *      count  [Number] 总数
-      *  - config Object
-      *      radius  热力图中单个点的半径
-      *      opacity 热力图透明度区间
-      *      zooms 支持的缩放级别范围
-      *      gradient    热力图的渐变区间
-      *      max 最大权重值
-      */
-     createMvMapHeatMap(data, config = {}) {
-         let self = this;
-         let heatMap = new AMap.Heatmap(self.map, {
-             radius: config.radius || 25,
-             opacity: config.opacity || [0, 1],
-             zooms: config.zooms || [3, 20],
-             gradient: config.gradient || {
-                 0.5: 'blue',
-                 0.65: 'rgb(117,211,248)',
-                 0.7: 'rgb(0, 255, 0)',
-                 0.9: '#ffea00',
-                 1.0: 'red'
-             }
-         });
-         heatMap.setDataSet({
-             data: data,
-             max: config.max || 100
-         });
-         return heatMap;
-     }
- }
- export default MapSdkF;
+class MapSdkF extends MapSdk {
+    constructor(map, mapId, mapConfig, pointClick) {
+        super(map, mapId, mapConfig, pointClick);
+    }
+
+    /**
+     * 创建点聚合
+     * @param data  Array
+     *          - name '' 图标提示信息
+     *          - path [lng,lat] 经纬度
+     *          - icon '' 图标名称
+     *          - size [32,32] 图标大小
+     * @param config 点聚合自定义样式
+     *          - className class名
+     *          - size 尺寸
+     *          - content 内容 设置改属性其他style属性都失效
+     *          - backgroundColor 背景色
+     *          - color 字体色
+     * @param callback   单个标记点点击回调
+     *          - e 标记点对象
+     *          - item 标记点data
+     *
+     * @returns {AMap.MarkerClusterer}
+     */
+    createMvMapMarkerCluster(data, config = {}, callback) {
+        let points = [];
+        if (data) {
+            points = this.createMvMapMarkerLayer(data, callback, config)
+        }
+        let cluster = new AMap.MarkerClusterer(this.map, points, {
+            renderClusterMarker: (context) => mapPublic.renderClusterMarker(context, config),
+            ...config
+        })
+        cluster.on('click', e => {
+            if (e.markers && e.markers.length !== 0) {
+                callback(e, e.markers, { ...config, CLICK_TYPE: 'Cluster' })
+            }
+        })
+        return cluster;
+    }
+
+    /**
+     * 添加地图控件
+     * @param controls( ['scale','toolBar','controlBar','overView'] )-Array
+     *          -- scale        比例尺
+     *          -- toolBar      工具条
+     *          -- controlBar   工具条方向盘
+     *          -- overView     显示鹰眼
+     */
+    addMvMapControl(controls) {
+        if (controls.indexOf('scale') != -1) {
+            this.map.addControl(new AMap.Scale())
+        }
+        if (controls.indexOf('toolBar') != -1) {
+            this.map.addControl(new AMap.ToolBar({
+                position: { top: '10px', right: '10px' }
+            }))
+        }
+        if (controls.indexOf('controlBar') != -1) {
+            this.map.addControl(new AMap.ControlBar())
+        }
+        if (controls.indexOf('overView') != -1) {
+            let OverView = new AMap.OverView()
+            this.map.addControl(OverView);
+            OverView.open()
+        }
+    }
+
+
+    /**
+     * 创建热力图
+     *  - data Array
+     *      lng  [Number] 经度
+     *      lat  [Number] 纬度
+     *      count  [Number] 总数
+     *  - config Object
+     *      radius  热力图中单个点的半径
+     *      opacity 热力图透明度区间
+     *      zooms 支持的缩放级别范围
+     *      gradient    热力图的渐变区间
+     *      max 最大权重值
+     */
+    createMvMapHeatMap(data, config = {}) {
+        let self = this;
+        let heatMap = new AMap.Heatmap(self.map, {
+            radius: config.radius || 25,
+            opacity: config.opacity || [0, 1],
+            zooms: config.zooms || [3, 20],
+            gradient: config.gradient || {
+                0.5: 'blue',
+                0.65: 'rgb(117,211,248)',
+                0.7: 'rgb(0, 255, 0)',
+                0.9: '#ffea00',
+                1.0: 'red'
+            }
+        });
+        heatMap.setDataSet({
+            data: data,
+            max: config.max || 100
+        });
+        return heatMap;
+    }
+}
+export default MapSdkF;

lib/sdk/map-sdk/map-sdk-t.js

@@ -8,2 +8,3 @@ /**
  import MapSdk from "./";
+ import mapPublic from './map-public'
 
@@ -20,3 +21,2 @@ class MapSdkT extends MapSdk {
      createMvMapMarkerCluster(data, config = {}, callback) {
-         const color = '#ff7272';
          let points = [];
@@ -28,3 +28,2 @@ if (data) {
          }
-         var count = data.length;
          let cluster = new AMap.MarkerClusterer(this.map, points, {
@@ -86,17 +85,3 @@ renderMarker: (context) => {
              },
-             renderClusterMarker: (context) => {
-                 let div = document.createElement('div');
-                 div.setAttribute('class', config.className || 'marker-cluster')
-                 div.style.backgroundColor = config.backgroundColor || color;
-                 let size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
-                 div.style.width = div.style.height = size + 'px';
-                 div.style.borderRadius = '50%';
-                 div.innerHTML = context.count;
-                 div.style.lineHeight = size + 'px';
-                 div.style.color = config.color || '#ffffff';
-                 div.style.fontSize = '14px';
-                 div.style.textAlign = 'center';
-                 context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
-                 context.marker.setContent(div)
-             },
+             renderClusterMarker: (context) => mapPublic.renderClusterMarker(context, config),
              ...config
@@ -103,0 +88,0 @@ })

package.json

 {
   "name": "microvideo-map",
-  "version": "0.0.9",
+  "version": "0.1.0",
   "private": false,
@@ -5,0 +5,0 @@ "scripts": {

No alert changes

Improved metrics

Lines of code

21964

increased by0.02%

Worsened metrics

Total package byte prevSize

2408576

No dependency changes