npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2025 – Pkg Stats / Ryan Hefner

gisthreemap

v1.4.11

Published

基于webGL的三维api

Downloads

83

Readme

暂时注释掉在package.json 中 "cesium": "^1.91.0"
本插件暂不支持npm模式载入cesium
因ceisum 静态文件的限制,无法在你的项目中使用 npm的方式安装cesium,除非在vue.config.js中手动配置
建议使用CDN的方式引入 cesium
cesium CDN 地址:
class ThreeMapClass {

  constructor(options) {
    this.options = options;
    this.ClassType = ThreeMapClass.ClassType;
    this.ThreeMapInstance = new ThreeMapClass.Class(options);// 创建地图 Class在index文件赋值
  }

  init (callback) {
    this.ThreeMapInstance.init(callback)
  }
  // 初始化EntitysClass,可自定义操作Entity
  createEntitysClass (dataSource) {
    return new this.ThreeMapInstance.CustomEntitys(this.getViewer(),dataSource)
  }
  // 初始化EntitysEffectClass,可自定义操作Entity特效类
  createEntitysEffectClass (dataSource) {
    return new this.ThreeMapInstance.CustomEntitysEffect(this.getViewer(),dataSource)
  }
  /**
   * 添加wmts图层
   * @param {} option
   * @returns
   */
  addWmtsLayer (option) {
    return this.ThreeMapInstance.addWmtsLayer(option)
  }

  /**
   * 添加切片图层
   * @param {*} option
   * @returns
   */
  addWebTileLayer (option) {
    return this.ThreeMapInstance.addWebTileLayer(option)
  }

  /**
   * 添加3dTile模型
   * @param {*} option
   * @returns
   */
  add3DTileModels (option) {
    return this.ThreeMapInstance.add3DTileModels(option)
  }

  /**
   * 添加点位
   * @param {} points  点位数据
   * @param {*} name  soureData名称
   * @returns
   */
  addMakers (points, name) {
    return this.ThreeMapInstance.addMakers(points, name)
  }

  /**
   * 通过name删除DataSource
   * @param {*} name
   * @returns
   */
  removeDataSource (name) {
    return this.ThreeMapInstance.removeDataSource(name)
  }

  /**
   * 获取Viewer
   * @returns
   */
  getViewer () {
    return this.ThreeMapInstance.getViewer()
  }

  /**
   *
   * @returns 获取dataSource的集合
   */
  getDataSources () {
    return this.ThreeMapInstance.getDataSources()
  }

  /**
   * 通过name获取DataSource
   * @param {*} name
   * @returns
   */
  getDataSourceByName (name) {
    return this.ThreeMapInstance.getDataSourceByName(name)
  }

  /**
   * 获取范围
   * @param {*} option
   * @returns
   */
  getBoundingSphere (option) {
    return this.ThreeMapInstance.getBoundingSphere(option)
  }

  /**
   * 根据经纬度获取笛卡尔三维坐标
   * @param {*} longitude
   * @param {*} latitude
   * @param {*} height
   * @returns
   */
  getCartesian3fromDegrees (longitude, latitude, height = 0) {
    return this.ThreeMapInstance.getCartesian3fromDegrees(longitude, latitude, height)
  }

  /**
   * 根据笛卡尔三维坐标 获取屏幕坐标
   * @param {*} Cartesian3
   * @returns
   */
  getCanvasCoordfromcartesian (Cartesian3) {
    return this.ThreeMapInstance.getCanvasCoordfromcartesian(Cartesian3)
  }

  /**
   * 根据3dtile的id获取模型
   * @param {*} modelid
   * @returns
   */
  getModel (modelid) {
    return this.ThreeMapInstance.getModel(modelid)
  }

  /**
   * 根据eid获取实体
   * @param {} eid
   * @param {*} sourcetype
   * @returns
   */
  getEntityByEid (eid,sourcetype) {
    return this.ThreeMapInstance.getEntityByEid(eid,sourcetype)
  }

  /**
   * 根据id获取实体
   * @param {*} id
   * @param {*} sourcetype
   * @returns
   */
  getEntityById (id,sourcetype) {
    return this.ThreeMapInstance.getEntityById(id,sourcetype)
  }

  /**
   * 根据eid删除实体
   * @param {*} eid
   * @param {*} sourcetype
   * @returns
   */
  removeEntityByEid (eid,sourcetype) {
    return this.ThreeMapInstance.removeEntityByEid(eid,sourcetype)
  }

  /**
   * 根据id删除实体
   * @param {*} eid
   * @param {*} sourcetype
   * @returns
  */
  removeEntityById (eid,sourcetype) {
    return this.ThreeMapInstance.removeEntityById(eid,sourcetype)
  }

  /**
   * 删除所有实体
   * @param {*} sourcetype  此参数存在删除对应dataSource的,不存在删除所有
   */
   removeAllEntity (sourcetype) {
    this.ThreeMapInstance.removeAllEntity(sourcetype)
  }

  /**
   * 设置图层显示与隐藏
   * @param {*} param0
   * @param {*} visable
   */
  setLayerVisable ({layerid,layer = null},visable) {
    this.ThreeMapInstance.setLayerVisable({layerid,layer},visable)
  }

  /**
   * 创建dataSource
   * @param {} sourcetype
   * @returns
   */
  CreateDataSource (sourcetype) {
    return this.ThreeMapInstance.CreateDataSource(sourcetype)
  }

  /**
   * 相机飞到指定范围
   * @param {*} boundingSphere
   * @param {*} option
   */
  flyToBoundingSphere (boundingSphere,option = {
    duration: 100
  }) {
    this.ThreeMapInstance.flyToBoundingSphere (boundingSphere,option)
  }

  /**
   * 相机移动到指定地点
   * @param {} lon
   * @param {*} lat
   * @param {*} height
   * @param {*} additional
   */
  flyTo(lon, lat, height = 1500, additional = {
    orientation: {
      heading: 0,
      pitch: -45,
      roll: 0
    }
  }) {
    this.ThreeMapInstance.flyTo (lon, lat, height = 1500, additional = {
      orientation: {
        heading: 0,
        pitch: -45,
        roll: 0
      }
    })
  }

  /**
   * 相机飞行普通事件
   * @param {} target
   * @param {*} options
   * @returns
   */
  CommonflyTo (target, options={}) {
    return this.ThreeMapInstance.CommonflyTo(target,options)
  }

  /**
   * 是否开启光照
   * @param {} sun
   */
  sunshine (sun) {
    this.ThreeMapInstance.sunshine (sun)
  }

  /**
   * 事件注册
   * @param {*} type
   * @param {*} callback
   */
  registerterMapEvent (type, callback) {
    this.ThreeMapInstance.mapevent.registerterMapEvent (type,callback)
  }

  /**
   * 事件移除
   * @param {} type
   */
  removeMapEvent (type) {
    this.ThreeMapInstance.mapevent.removeMapEvent (type)
  }

  // 控制是否开启实体点击
  checkEntityEventMap (type) {
    this.ThreeMapInstance.mapevent.checkEntityEventMap(type)
  }
  // 鼠标移动获取坐标
  moveMouseGetCoordinate (callback) {
    this.ThreeMapInstance.mapevent.moveMouseGetCoordinate(callback)
  }

  // 新增preRender事件
  addPreRenerEvent (callback) {
    return this.ThreeMapInstance.mapevent.addPreRenerEvent(callback)
  }

  // 删除preRender事件
  removePreRenerEvent (removeHandler) {
    this.ThreeMapInstance.mapevent.removePreRenerEvent(removeHandler)
  }
  // 添加面
  addPolygon (polygon, Additional,dataSource) {
    const CustomEntitys = new this.ThreeMapInstance.CustomEntitys(this.getViewer(),dataSource)
    return this.ThreeMapInstance.defaultEntitys.createPolygon(polygon, Additional)
  }
  // 添加具有拉伸效果的面状要素
  addStretchingPolygon (polygon, Additional) {
    return this.ThreeMapInstance.defaultEntitysEffect.createPolygon(polygon, Additional)
  }
  // 添加线
  addPolyline (polyline, Additional) {
    return this.ThreeMapInstance.defaultEntitys.createPolyline(polyline, Additional)
  }
  // 添加点
  addPoint (lnglathei, label = false, point = false, billboard = false) {
    return this.ThreeMapInstance.defaultEntitys.createPoint(lnglathei, label, point, billboard)
  }

  // 添加道路交错发光线
  addSpriteline (
    polyline,
    duration,
    image,
    Additional
  ) {
    return this.ThreeMapInstance.defaultEntitysEffect.createSpriteline(
      polyline,
      duration,
      image,
      Additional)
  }

  /**
   * 添加飞线
   * @param {*} center
   * @param {*} num
   * @param {*} eid
   * @param {*} LineFlowMaterial
   * @returns
   */
  addlineFlow (center, num, eid, LineFlowMaterial) {
    return this.ThreeMapInstance.defaultEntitysEffect.createlineFlow(
      center, num,eid, LineFlowMaterial
    )
  }

  /**
   *  抛物线
   * @param {*} _center 起点
   * @param {*} _positions 终点坐标集合
   * @param {*} _num // 抛物线上的飞线数量
   * @param {*} height // 抛物线高度
   * @param {*} LineFlowMaterial // 飞线材质
   * @param {*} linecolor // 抛物线颜色
   */
  addparabolaFlowline (center,positions,num,height,LineFlowMaterial,linecolor) {
    return this.ThreeMapInstance.defaultEntitysEffect.createparabolaFlow(
      center,positions,num,height,LineFlowMaterial,linecolor
    )
  }

  /**
   * 材质扩散圆
   * @param {*} center
   * @param {*} eid
   * @param {*} color
   * @param {*} speed
   */
  addcircleDiffuse(center,eid, speed,color) {
    this.ThreeMapInstance.defaultEntitysEffect.createcircleDiffuse(
      center,eid, speed, color
    )
  }
  /**
   * 添加扩散圆
   * @param {} center
   * @param {*} color
   * @param {*} radius
   * @param {*} duration
   */
  addcircleDiffusion (center, color, radius, duration) {
    this.ThreeMapInstance.circleDiffusion.add(center, color, radius, duration)
  }
  /**
   * 清除扩散圆
   */
  clearcircleDiffusion () {
    this.ThreeMapInstance.circleDiffusion.clear()
  }
  /**
   * 添加扩散圆
   * @param {*} center
   * @param {*} color
   * @param {*} radius
   * @param {*} duration
   * @param {*} eid
   * @param {*} isedit
   */
  addhexagonSpread(center, color, radius, duration,eid, isedit) {
    this.ThreeMapInstance.hexagonSpread.add( center, color, radius, duration, eid,isedit)
  }

  /**
   * 添加发光线圈
   * @param {} center
   * @param {*} color
   * @param {*} radius
   * @param {*} duration
   * @param {*} eid
   * @param {*} isedit
   */
  addScanline(center, color, radius, duration, eid, isedit) {
    this.ThreeMapInstance.defaultEntitysEffect.add( center, color, radius, duration,eid,isedit)
  }

  /**
   * 添加发光线圈 EntitysEffect
   * @param {} center
   * @param {*} color
   * @param {*} radius
   * @param {*} duration
   * @param {*} eid
   * @param {*} isedit
   */
  addScanlineEntitysEffect(center, color, radius, duration, eid) {
    return this.ThreeMapInstance.defaultEntitysEffect.createdScanline( center, color, radius, duration,eid)
  }

  /**
   * 雷达平扫
   * @param {*} position
   * @param {*} scanColor
   * @param {*} maxRadius
   * @param {*} duration
   */
  addCircleScan (position,scanColor,maxRadius,duration) {
    this.ThreeMapInstance.circleScan.add(position,scanColor,maxRadius,duration)
  }

  addEntityCircleScan (position,scanColor,outlineColor,maxRadius,duration,eid) {
    this.ThreeMapInstance.defaultEntitysEffect.createRadarScan(position,scanColor,outlineColor,maxRadius,duration,eid)
  }

  /**
  * 轨迹球体
  * @param {*} position 中心点
  * @param {*} color  颜色
  * @param {*} radii  椭球半径
  * @param {*} duration  速度
  */
  addEllispoid (position, color, radii, duration, eid) {
    this.ThreeMapInstance.defaultEntitysEffect.createellispoid(position, color, radii, duration, eid)
  }

  /**
  * 电弧球体
  * @param {*} position 中心点
  * @param {*} color  颜色
  * @param {*} radii  椭球半径
  * @param {*} duration  速度
  */
  addElectricEllispoid (position, color, radii, duration, eid) {
      this.ThreeMapInstance.defaultEntitysEffect.createElectellispoid(position, color, radii, duration, eid)
  }

  /**
   * 删除实体和清除绘制状态
   */
  clearEntandCloseMe () {
    this.ThreeMapInstance.clearEntandCloseMe()
  }

  /**
   * 底图切换
   * @param {} layerid
   */
  switchBaseLayer (layerid) {
    this.ThreeMapInstance.switchBaseLayer(layerid)
  }

  /**
  * 长度
  * @param {*} callback // 测量完成的回调
  */
  MeasureDistance (callback) {
    this.ThreeMapInstance.measure.drawLine(callback)
  }

  /**
   * 面积
   * @param {*} callback // 测量完成的回调
   */
  MeasureArea (callback) {
    this.ThreeMapInstance.measure.drawArea(callback)
  }

  /**
  * 高度
  * @param {*} callback // 测量完成的回调
  */
  MeasureTriangle (callback) {
    this.ThreeMapInstance.measure.drawTriangle(callback)
  }

  changeEarthColor (color) {
    this.ThreeMapInstance.measure.changeEarthColor(color)
  }
}