hn-map 1.0.10 → 1.1.1

package/src/index.js

@@ -1,105 +0,0 @@
-import map from './map.js'
-import layer from './layer/layer.js'
-import point from './graphic/point.js'
-import numPoint from './graphic/numPoint.js'
-import imagePoint from './graphic/imagePoint.js'
-import divPoint from './graphic/divPoint.js'
-import label from './graphic/label.js'
-import line from './graphic/line.js'
-import circle from './graphic/circle.js'
-import rectangle from './graphic/rectangle.js'
-import polygon from './graphic/polygon.js'
-import route from './other/route.js'
-import heatMap from './layer/heatMap.js'
-import cluster from './layer/cluster.js'
-import pointCloud from './layer/pointCloud.js'
-import geoJson from './layer/geoJson.js'
-
-
-export default class hnMap {
-
-    id = null
-    option = null
-    mapType = null
-
-    // 允许构造函数
-    static allowConstruction = false
-
-    constructor(id, option, mapType) {
-        if (!hnMap.allowConstruction) {
-            throw new Error('此构造方法不允许直接调用，请调用create方法进行实例化');
-        }
-        this.id = id
-        this.option = option
-        // 地图类型
-        this.mapType = mapType
-
-        // 获取及创建地图对象
-        const Map = map(this)
-        this.map = new Map(this.id, this.option)
-        this.Layer = layer(this)
-
-        // 添加地图矢量图形类
-        this.Point = point(this)
-        this.NumPoint = numPoint(this)
-        this.ImagePoint = imagePoint(this)
-        this.DivPoint = divPoint(this)
-        this.Label = label(this)
-        this.Line = line(this)
-        this.Circle = circle(this)
-        this.Rectangle = rectangle(this)
-        this.Polygon = polygon(this)
-        this.Route = route(this)
-        this.HeatMap = heatMap(this)
-        this.Cluster = cluster(this)
-        this.PointCloud = pointCloud(this)
-        this.GeoJson = geoJson(this)
-    }
-
-    static async create(id, option, mapType) {
-        hnMap.allowConstruction = true
-
-        switch (mapType) {
-            case 'mars3d':
-                const currentScriptUrl = new URL(import.meta.url).origin;
-                await loadResource(currentScriptUrl + '/lib/Cesium/Widgets/widgets.css', 'css')
-                await loadResource(currentScriptUrl + '/lib/Cesium/Cesium.js', 'js')
-                await loadResource(currentScriptUrl + '/lib/turf/turf.min.js', 'js')
-                await loadResource(currentScriptUrl + '/lib/mars3d/mars3d.css', 'css')
-                await loadResource(currentScriptUrl + '/lib/mars3d/mars3d.js', 'js')
-                await loadResource(currentScriptUrl + '/lib/mars3d/plugins/heatmap/heatmap.js', 'js')
-                await loadResource(currentScriptUrl + '/lib/mars3d/plugins/heatmap/mars3d-heatmap.js', 'js')
-
-                break
-            case 'gaode':
-                await loadResource(`https://webapi.amap.com/maps?v=2.0&key=${option.gaode_key}&plugin=AMap.HeatMap,AMap.MarkerCluster,AMap.MoveAnimation`, 'js')
-                await loadResource('https://a.amap.com/jsapi_demos/static/data3d/lib/three.117.js', 'js')
-                await loadResource('https://a.amap.com/jsapi_demos/static/data3d/lib/GLTFLoader.117.min.js', 'js')
-                break
-            case 'siji':
-                await loadResource('https://map.sgcc.com.cn/maps?v=3.0.0', 'js')
-        }
-        return new hnMap(id, option, mapType);
-    }
-
-}
-
-const loadResource = (path, type) => {
-    return new Promise((resolve, reject) => {
-
-        if (type === 'css') {
-            const link = document.createElement('link')
-            link.rel = 'stylesheet'
-            link.href = path
-            link.onload = resolve;
-            link.onerror = reject;
-            document.head.appendChild(link)
-        } else {
-            const script = document.createElement('script')
-            script.src = path
-            script.onload = resolve;
-            script.onerror = reject;
-            document.body.appendChild(script)
-        }
-    })
-}

package/src/layer/cluster.js

@@ -1,277 +0,0 @@
-import {deepMerge, wgs84ToGcj02Format} from '../util.js'
-import Layer from "./layer.js";
-
-export default (hnMap) => {
-
-  const defaultOption = {
-    id: "",
-    position: [],
-    pixelRange: 20,
-    cluster: true,
-    image: '',
-    width: 20,
-    height: 20,
-    data: null
-  }
-
-  class mars3d_class extends Layer {
-    type = 'cluster'
-    id = null
-    option = JSON.parse(JSON.stringify(defaultOption))
-    config_layer = null
-    config_label = null
-    children = null
-    layerEntity = null
-
-    constructor(option) {
-      super(option)
-      this.id = option.id
-      this.children = []
-      deepMerge(this.option, option)
-      this.config_layer = this.formatConfigLayer(this.option)
-      this.config_label = this.formatConfigLabel(this.option)
-      this.layerEntity = new mars3d.layer.GraphicLayer(this.config_layer)
-    }
-
-    // 格式化layer配置
-    formatConfigLayer(option) {
-      return {
-        id: option.id,
-        cluster: {
-          enabled: option.cluster,
-          pixelRange: option.pixelRange
-        }
-      }
-    }
-
-    // 格式化点位配置
-    formatConfigLabel(option) {
-      return {
-        id: option.id,
-        image: option.image,
-        width: option.width,
-        height: option.height,
-      }
-    }
-
-    clearEntity() {
-      this.children = []
-      this.layerEntity.clear()
-    }
-
-    addEntity(entity) {
-      this.children.push(entity)
-      this.layerEntity.addGraphic(entity.graphic)
-    }
-
-    setPosition(data) {
-      this.clearEntity()
-      data.forEach((item, index) => {
-        let imagePointOption = {
-          id: this.config_label.id + '_point' + item.id,
-          position: item.position,
-          image: this.config_label.image,
-          height: this.config_label.height,
-          width: this.config_label.width,
-          data: item.data
-        }
-        const imagePoint = new hnMap.ImagePoint(imagePointOption);
-        this.addEntity(imagePoint)
-      })
-    }
-
-    destroy() {
-      this.clearEntity()
-      this.layerEntity.remove(true)
-      hnMap.map.layerList = hnMap.map.layerList.filter(v => v.id !== this.id)
-    }
-
-    // 添加属性弹窗
-    addPopupByAttr() {
-      this.layerEntity.bindPopup((event) => {
-        const data = event.graphic.attr
-        return mars3d.Util.getTemplateHtml({title: "详情", template: "all", attr: data})
-      })
-    }
-
-    // 添加自定义dom弹窗
-    addCustomPopup(getCustomDom) {
-      this.layerEntity.bindPopup(async (event) => {
-        if (event.graphic.attr) {
-          const data = event.graphic.attr || {};
-          return await getCustomDom(data);
-        }
-      }, {offsetY: -20});
-    }
-
-    flyTo() {
-      this.layerEntity.flyTo()
-    }
-
-    getEntity(entityParam) {
-      let entity
-      if (typeof entityParam == 'string') {
-        entity = this.children.find(v => v.id === entityParam)
-      } else {
-        entity = entityParam
-      }
-      if (!entity) {
-        return Promise.reject(new Error('未找到此图形'))
-      }
-      return entity
-    }
-
-    // 手动打开聚合功能
-    openCluster() {
-      deepMerge(this.option, {cluster: true,})
-      this.config_layer = this.formatConfigLayer(this.option)
-      this.layerEntity.clusterEnabled = true
-    }
-
-    // 手动关闭聚合功能
-    closeCluster() {
-      deepMerge(this.option, {cluster: false,})
-      this.config_layer = this.formatConfigLayer(this.option)
-      this.layerEntity.clusterEnabled = false
-    }
-
-  }
-
-  class gaode_class {
-
-    id = null
-    option = JSON.parse(JSON.stringify(defaultOption))
-    config = null
-    layerEntity = null
-    // 创建全局信息窗口实例
-    infoWindow = null
-
-    constructor(option) {
-      this.id = option.id
-      deepMerge(this.option, option)
-      this.config = this.formatConfig(this.option)
-      this.layerEntity = new AMap.MarkerCluster(hnMap.map.map, this.config.position, this.config);
-    }
-
-    formatConfig(option) {
-      const position = option.position.map((item, index) => {
-        return {
-          lnglat: wgs84ToGcj02Format(item),
-          // 添加弹窗属性参数
-          extData: {
-            id: this.id + '_point' + index
-          }
-        }
-      })
-      const count = position.length;
-      const _renderClusterMarker = (context) => {
-        var factor = Math.pow(context.count / count, 1 / 18);
-        var div = document.createElement('div');
-        var Hue = 180 - factor * 180;
-        var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
-        var fontColor = 'hsla(' + Hue + ',100%,90%,1)';
-        var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
-        var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
-        div.style.backgroundColor = bgColor;
-        var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
-        div.style.width = div.style.height = size + 'px';
-        div.style.border = 'solid 1px ' + borderColor;
-        div.style.borderRadius = size / 2 + 'px';
-        div.style.boxShadow = '0 0 5px ' + shadowColor;
-        div.innerHTML = context.count;
-        div.style.lineHeight = size + 'px';
-        div.style.color = fontColor;
-        div.style.fontSize = '14px';
-        div.style.textAlign = 'center';
-        context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
-        context.marker.setContent(div)
-
-      }
-
-      const _renderMarker = (context) => {
-        let icon = new AMap.Icon({
-          image: this.option.style.image,
-          imageSize: new AMap.Size(this.option.style.height, this.option.style.width),
-          size: new AMap.Size(this.option.style.height, this.option.style.width),
-        })
-        context.marker.setIcon(icon)
-      }
-      return {
-        id: option.id,
-        position,
-        gridSize: option.pixelRange, // 设置网格像素大小
-        clusterByZoomChange: true,
-        renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
-        renderMarker: _renderMarker, // 自定义非聚合点样式
-      }
-    }
-
-    setPosition(position) {
-      deepMerge(this.option, {position: position})
-      this.config = this.formatConfig(this.option)
-      this.layerEntity.setData(this.config.position)
-    }
-
-
-    destroy() {
-      this.layerEntity.setMap(null)
-      hnMap.map.layerList = hnMap.map.layerList.filter(v => v.id !== this.id)
-    }
-
-    flyTo() {
-      let totalLng = 0;
-      let totalLat = 0;
-      this.config.position.map(item => {
-        totalLng += item.lnglat.lng;
-        totalLat += item.lnglat.lat;
-      })
-      const centerLng = totalLng / this.config.position.length;
-      const centerLat = totalLat / this.config.position.length;
-      hnMap.map.map.setCenter([centerLng, centerLat])
-    }
-
-    // 添加属性弹窗
-    addPopupByAttr() {
-      if (!this.infoWindow) {
-        this.infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
-      }
-
-      this.layerEntity.on('click', (cluster) => {
-        if (cluster.clusterData.length === 1) {
-          let content = ''
-          const data = cluster.clusterData[0].extData
-          for (const key in data) {
-            content += `<div>${key}: ${data[key]}</div>`
-          }
-          this.infoWindow.setContent(content);
-          this.infoWindow.open(hnMap.map.map, cluster.marker._position);
-        }
-
-      })
-    }
-
-    // 添加自定义dom弹窗
-    addCustomPopup(getCustomDom) {
-      if (!this.infoWindow) {
-        this.infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
-      }
-
-      this.layerEntity.on('click', (cluster) => {
-        if (cluster.clusterData.length === 1) {
-          let content = ''
-          const data = cluster.clusterData[0].extData
-          const dom = getCustomDom(data);
-          this.infoWindow.setContent(dom);
-          this.infoWindow.open(hnMap.map.map, cluster.marker._position);
-        }
-      })
-    }
-
-  }
-
-  const fn = {
-    mars3d: mars3d_class,
-    gaode: gaode_class
-  }
-  return fn[hnMap.mapType]
-}

package/src/layer/geoJson.js

@@ -1,174 +0,0 @@
-import {deepMerge, wgs84ToGcj02Format} from '../util.js'
-
-let baseGeoData = {
-  type: 'FeatureCollection',
-  name: '',
-  crs: {},
-  features: [
-    {
-      type: 'Feature',
-      properties: {},
-      geometry: {
-        type: 'MultiPolygon',
-        coordinates: [[[]]]
-      }
-    }
-  ]
-}
-export default (hnMap) => {
-
-  const defaultOption = {
-    id: "",
-    data: baseGeoData,
-    opacity: 1,
-    line: {
-      show: true,
-      color: "#ff00ff",
-      opacity: 1,
-      width: 2,
-    },
-    area: {
-      show: false,
-      color: "#ffff00",
-      opacity: 1,
-    }
-  }
-
-  class mars3d_class {
-    type = 'geoJson'
-    id = null
-    option = JSON.parse(JSON.stringify(defaultOption))
-    config = null
-    layerEntity = null
-
-    constructor(option) {
-      this.id = option.id
-      deepMerge(this.option, option)
-      this.config = this.formatConfig(this.option)
-      this.layerEntity = new mars3d.layer.GeoJsonLayer(this.config)
-    }
-
-    formatConfig(option) {
-      return {
-        name: option.id,
-        id: option.id,
-        allowDrillPick: true,
-        data: option.data,
-        symbol: {
-          styleOptions: {
-            clampToGround: true,
-            fill: option.area.show,
-            randomColor: !!(option.area.show && option.area.color), // 随机色
-            outline: option.line.show,
-            opacity: option.opacity,
-            outlineStyle: {
-              color: option.line.color,
-              width: option.line.width,
-              opacity: option.line.opacity,
-            },
-          }
-        },
-        // flyTo: true,
-        // attr: option.data
-      }
-    }
-
-    set(option) {
-      deepMerge(this.option, option)
-      this.config = this.formatConfig(this.option)
-      this.layerEntity.setOptions(this.config)
-    }
-
-    customStyle(callback) {
-      this.layerEntity.options.symbol.callback = (attr) => {
-        return callback(attr)
-      }
-    }
-
-    destroy() {
-      this.layerEntity.remove(true)
-      hnMap.map.layerList = hnMap.map.layerList.filter(v => v.id !== this.id)
-    }
-
-    setData(data) {
-      this.layerEntity.loadGeoJSON(data, {clear: true})
-    }
-
-    clear() {
-      this.layerEntity.clear()
-    }
-
-    flyTo() {
-      this.layerEntity.flyTo()
-    }
-
-    // 添加属性弹窗
-    addPopupByAttr() {
-      this.layerEntity.bindPopup((event) => {
-        if (event.graphic.attr) {
-          const data = event.graphic.attr
-          return mars3d.Util.getTemplateHtml({title: "详情", template: "all", attr: data})
-        }
-      })
-    }
-
-    // 添加自定义dom弹窗
-    addCustomPopup(getCustomDom) {
-      this.layerEntity.bindPopup(async (event) => {
-        if (event.graphic.attr) {
-          const data = event.graphic.attr || {};
-          return await getCustomDom(data);
-        }
-      }, {offsetY: -20});
-    }
-
-  }
-
-  class gaode_class {
-
-    id = null
-    option = JSON.parse(JSON.stringify(defaultOption))
-    config = null
-    layerEntity = null
-
-    constructor(option) {
-      this.id = option.id
-      deepMerge(this.option, option)
-      this.config = this.formatConfig(this.option)
-      this.layerEntity = new AMap.HeatMap(hnMap.map.map, this.config)
-    }
-
-    formatConfig(option) {
-      const data = option.position.map(v => {
-        return {lng: v.lng, lat: v.lat, count: v.value}
-      })
-      const amapData = wgs84ToGcj02Format(data)
-
-      return {}
-    }
-
-    set(option) {
-      deepMerge(this.option, option)
-      this.config = this.formatConfig(this.option)
-      this.layerEntity.setOptions(this.config)
-    }
-
-    destroy() {
-      this.layerEntity.setMap(null)
-      hnMap.map.layerList = hnMap.map.layerList.filter(v => v.id !== this.id)
-    }
-
-
-    flyTo() {
-
-    }
-
-  }
-
-  const fn = {
-    mars3d: mars3d_class,
-    gaode: gaode_class
-  }
-
-  return fn[hnMap.mapType]
-}

package/src/layer/heatMap.js

@@ -1,163 +0,0 @@
-import {deepMerge, wgs84ToGcj02Format} from '../util.js'
-
-export default (hnMap) => {
-
-  const defaultOption = {
-    id: "",
-    position: [],
-    allowDrillPick: true,
-    max: null,
-    min: null,
-    radius: 25,
-    minOpacity: 0.1,
-    maxOpacity: 0.8,
-    opacity: 1,
-    blur: 0.85,
-    gradient: {},
-    scaleByDistance: false,
-    clampToGround: true,
-    data: null
-  }
-
-  class mars3d_class {
-    type = 'heatMap'
-    id = null
-    option = JSON.parse(JSON.stringify(defaultOption))
-    config = null
-    layerEntity = null
-
-    constructor(option) {
-      this.id = option.id
-      deepMerge(this.option, option)
-      this.config = this.formatConfig(this.option)
-      this.layerEntity = new mars3d.layer.HeatLayer(JSON.parse(JSON.stringify(this.config)))
-    }
-
-    formatConfig(option) {
-      return {
-        id: option.id,
-        positions: option.position,
-        allowDrillPick: option.allowDrillPick,
-        max: option.max,
-        min: option.min,
-        heatStyle: {
-          radius: option.radius,
-          minOpacity: option.minOpacity,
-          maxOpacity: option.maxOpacity,
-          blur: option.blur,
-          gradient: option.gradient,
-        },
-        style: {
-          opacity: option.opacity,
-          scaleByDistance: option.scaleByDistance,
-          clampToGround: option.clampToGround,
-        },
-        redrawZoom: true,
-        attr: option.data
-      }
-    }
-
-    set(option) {
-      deepMerge(this.option, option)
-      this.config = this.formatConfig(this.option)
-      this.layerEntity.setOptions(this.config)
-    }
-
-    destroy() {
-      this.layerEntity.remove(true)
-      hnMap.map.layerList = hnMap.map.layerList.filter(v => v.id !== this.id)
-    }
-
-    flyTo() {
-      this.layerEntity.flyTo()
-    }
-
-    clear() {
-      this.layerEntity.clear()
-    }
-
-    setPosition(position) {
-      deepMerge(this.option, {position})
-      this.layerEntity.setPositions(position)
-    }
-
-    show() {
-      this.layerEntity.show = true
-    }
-
-    hide() {
-      this.layerEntity.show = false
-    }
-
-  }
-
-  class gaode_class {
-
-    id = null
-    option = JSON.parse(JSON.stringify(defaultOption))
-    config = null
-    layerEntity = null
-
-    constructor(option) {
-      this.id = option.id
-      deepMerge(this.option, option)
-      this.config = this.formatConfig(this.option)
-      this.layerEntity = new AMap.HeatMap(hnMap.map.map, this.config)
-      this.layerEntity.setDataSet({data: this.config.data, max: this.config.max, min: this.config.min});
-
-    }
-
-    formatConfig(option) {
-      const data = option.position.map(v => {
-        return {lng: v.lng, lat: v.lat, count: v.value}
-      })
-      const amapData = wgs84ToGcj02Format(data)
-
-      return {
-        id: option.id,
-        radius: option.radius,
-        max: option.max,
-        min: option.min,
-        opacity: [option.minOpacity, option.maxOpacity],
-        gradient: option.gradient,
-        data: amapData,
-        extData: {
-          id: option.id,
-          data: option.data,
-        },
-      }
-    }
-
-    set(option) {
-      deepMerge(this.option, option)
-      this.config = this.formatConfig(this.option)
-      this.layerEntity.setOptions(this.config)
-    }
-
-    destroy() {
-      this.layerEntity.setMap(null)
-      hnMap.map.layerList = hnMap.map.layerList.filter(v => v.id !== this.id)
-    }
-
-
-    flyTo() {
-      let totalLng = 0;
-      let totalLat = 0;
-      this.config.data.map(item => {
-        totalLng += item.lng;
-        totalLat += item.lat;
-      })
-      const centerLng = totalLng / this.config.data.length;
-      const centerLat = totalLat / this.config.data.length;
-      hnMap.map.map.setCenter([centerLng, centerLat])
-    }
-
-  }
-
-  const fn = {
-    mars3d: mars3d_class,
-    gaode: gaode_class
-  }
-
-  return fn[hnMap.mapType]
-}