base

Base

# Base

# Namespace

Joint3d

Joint3d is the default namespace for the framework.When developing with this framework, you need to start with Joint3d.

警告

Try not to use Joint3d as variable names or namespaces when developing to avoid the framework not working properly.

# Global Methods

# use

Using third-party modules or frameworks in Joint3d frameworks

let plugin = {
  install: (Joint3d) => {},
}
Joint3d.use(plugin)

# mixin

Adding additional properties or functions to the Joint3d

let comp = {
  a: 'b',
}
Joint3d.mixin(comp)
Joint3d.a // b

# ready

The main entrance to the framework, you must start with this when using the framework, otherwise you cannot build 3D scenes

global.Joint3d = Joint3d
Joint3d.ready(() => {
  let viewer = new Joint3d.Viewer(divId)
})

# Constants

Framework internal default constants

注意

Please use the default constants for development

# MouseEventType

Joint3d.MouseEventType.LEFT_DOWN

Joint3d.MouseEventType.LEFT_UP

Joint3d.MouseEventType.CLICK

Joint3d.MouseEventType.RIGHT_DOWN

Joint3d.MouseEventType.RIGHT_UP

Joint3d.MouseEventType.RIGHT_CLICK

Joint3d.MouseEventType.DB_CLICK

Joint3d.MouseEventType.MOUSE_MOVE

Joint3d.MouseEventType.WHEEL

Joint3d.MouseEventType.MOUSE_OVER

Joint3d.MouseEventType.MOUSE_OUT

# SceneEventType

Joint3d.SceneEventType.CAMERA_MOVE_END

Joint3d.SceneEventType.CAMERA_CHANGED

Joint3d.SceneEventType.PRE_UPDATE

Joint3d.SceneEventType.POST_UPDATE

Joint3d.SceneEventType.PRE_RENDER

Joint3d.SceneEventType.POST_RENDER

Joint3d.SceneEventType.MORPH_COMPLETE

Joint3d.SceneEventType.CLOCK_TICK

# AnalysisType

Joint3d.AnalysisType.CONTOUR_LINE

Joint3d.AnalysisType.SHADOWS

Joint3d.AnalysisType.SIGHT_CIRCLE

Joint3d.AnalysisType.SIGHT_LINE

Joint3d.AnalysisType.VIEWSHED

# MouseMode

Joint3d.MouseMode.LEFT_MIDDLE

Joint3d.MouseMode.LEFT_RIGHT

# ImageryType

Joint3d.ImageryType.ARCGIS

Joint3d.ImageryType.SINGLE_TILE

Joint3d.ImageryType.WMS

Joint3d.ImageryType.WMTS

Joint3d.ImageryType.XYZ

Joint3d.ImageryType.COORD

Joint3d.ImageryType.GRID

Joint3d.ImageryType.MAPBOX

Joint3d.ImageryType.MAPBOX_STYLE

Joint3d.ImageryType.TMS

Joint3d.ImageryType.AMAP

Joint3d.ImageryType.BAIDU

Joint3d.ImageryType.GOOGLE

Joint3d.ImageryType.TDT

Joint3d.ImageryType.TENCENT

# TerrainType

Joint3d.TerrainType.NONE

Joint3d.TerrainType.XYZ

Joint3d.TerrainType.GOOGLE

Joint3d.TerrainType.ARCGIS

Joint3d.TerrainType.VR

# LayerType

Joint3d.LayerType.VECTOR

Joint3d.LayerType.PRIMITIVE

Joint3d.LayerType.TILESET

Joint3d.LayerType.HTML

Joint3d.LayerType.GEOJSON

Joint3d.LayerType.CLUSTER

Joint3d.LayerType.CAMERA_VIDEO

Joint3d.LayerType.PLANE_VIDEO

Joint3d.LayerType.KML

Joint3d.LayerType.CZML

Joint3d.LayerType.HEAT

Joint3d.LayerType.MAPV

Joint3d.LayerType.CHART

# OverlayType

Joint3d.OverlayType.POINT

Joint3d.OverlayType.POLYLINE

Joint3d.OverlayType.POLYGON

Joint3d.OverlayType.MODEL

Joint3d.OverlayType.BILLBOARD

Joint3d.OverlayType.RECTANGLE

Joint3d.OverlayType.CIRCLE

Joint3d.OverlayType.LABEL

Joint3d.OverlayType.TILESET

Joint3d.OverlayType.BOX

Joint3d.OverlayType.CORRIDOR

Joint3d.OverlayType.CYLINDER

Joint3d.OverlayType.ELLIPSE

Joint3d.OverlayType.ELLIPSOID

Joint3d.OverlayType.PLANE

Joint3d.OverlayType.POLYLINE_VOLUME

Joint3d.OverlayType.WALL

Joint3d.OverlayType.DYNAMIC_BILLBOARD

Joint3d.OverlayType.DYNAMIC_MODEL

Joint3d.OverlayType.CUSTOM_BILLBOARD

Joint3d.OverlayType.CUSTOM_LABEL

Joint3d.OverlayType.ATTACK_ARROW

Joint3d.OverlayType.DOUBLE_ARROW

Joint3d.OverlayType.FINE_ARROW

Joint3d.OverlayType.GATHERING_PLACE

Joint3d.OverlayType.TAILED_ATTACK_ARROW

Joint3d.OverlayType.BILLBOARD_PRIMITIVE

Joint3d.OverlayType.DIFFUSE_WALL_PRIMITIVE

Joint3d.OverlayType.ELEC_ELLIPSOID_PRIMITIVE

Joint3d.OverlayType.FLOW_LINE_PRIMITIVE

Joint3d.OverlayType.LABEL_PRIMITIVE

Joint3d.OverlayType.MODEL_PRIMITIVE

Joint3d.OverlayType.POINT_PRIMITIVE

Joint3d.OverlayType.POLYLINE_PRIMITIVE

Joint3d.OverlayType.SCAN_CIRCLE_PRIMITIVE

Joint3d.OverlayType.TRAIL_LINE_PRIMITIVE

Joint3d.OverlayType.WATER_PRIMITIVE

Joint3d.OverlayType.VIDEO_PRIMITIVE

Joint3d.OverlayType.CAMERA_VIDEO

Joint3d.OverlayType.PLAN_VIDEO

# TrackViewMode

Joint3d.TrackViewMode.FP

Joint3d.TrackViewMode.TP

Joint3d.TrackViewMode.TRACKED

Joint3d.TrackViewMode.FREE

# Joint3d.Viewer

3D scene primary interface to build 3D scenes in a given DivId

# example

<div id="viewer-container"></div>

let viewer = Joint3d.Viewer('viewer-container')
global.viewer = viewer

注意

If you are using a MVVM framework like Vue, do not add viewer, layer, or overlay to the data model. Since the 3D scene will keep refreshing each frame, adding data to the data model will cause the browser to crash if it takes a long time.

# creation

constructor(id,[options])
- parameters
  - {String} id：divId
  - {Object} options
- returns viewer

//options（optional）
{
  "contextOptions": {
    "webgl": {
      "alpha": false,
      "depth": true,
      "stencil": false,
      "antialias": true,
      "powerPreference": "high-performance",
      "premultipliedAlpha": true,
      "preserveDrawingBuffer": false,
      "failIfMajorPerformanceCaveat": false
    },
    "allowTextureFilterAnisotropic": true
  },
  "sceneMode": 3 //1: 2.5D，2: 2D，3: 3D
}

# properties

{Element} jointContainer：custom container readonly
{Object} scene readonly
{Object} camerareadonly
{Element} canvasreadonly
{Object} clock
{Object} dataSources
{Object} imageryLayers
{Object} entities
{Popup} popupreadonly
{ContextMenu} contextMenureadonly
{Tooltip} tooltipreadonly
{MapSplit} mapSplitreadonly
{Compass} compassreadonly
{ZoomController} zoomControllerreadonly
{LocationBar} locationBarreadonly
{DistanceLegend} distanceLegendreadonly
{LoadingMask} loadingMaskreadonly
{Position} cameraPositionreadonly
{Number} resolutionreadonly
{Rect} viewBoundsreadonly

# methods

setOptions(options)
- parameters
  - {Object} options：属性对象
- returns this

// options(optional)
{
  "shadows": false,
  "resolutionScale": 1,
  "showAtmosphere": true,
  "showSun": true,
  "showMoon": true,
  "enableFxaa": true,
  "msaaSamples": 1,
  "cameraController": {
    "enableRotate": true,
    "enableTilt": true,
    "enableTranslate": true,
    "enableZoom": true,
    "enableCollisionDetection": true,
    "minimumZoomDistance": 1.0,
    "maximumZoomDistance": 40489014.0
  },
  "globe": {
    "show": true,
    "showGroundAtmosphere": true,
    "enableLighting": false,
    "depthTestAgainstTerrain": false,
    "tileCacheSize": 100,
    "preloadSiblings": false,
    "terrainExaggeration": 1,
    "terrainExaggerationRelativeHeight": 1,
    "baseColor": new Joint3d.Color(0, 0, 0.5, 1),
    "filterColor": new Joint3d.Color(0, 0, 0, 0),
    "translucency": {
      "enabled": false,
      "backFaceAlpha": 1,
      "backFaceAlphaByDistance": null,
      "frontFaceAlpha": 1,
      "frontFaceAlphaByDistance": null
    }
  },
  "skyBox": {
    "sources": {},
    "show": true,
    "offsetAngle": 0
  }
}

setPitchRange(min,max)
- parameters
  - {Number} min：min angel
  - {Number} max：max angel
- returns this
limitCameraToGround()
- returns this
changeSceneMode(sceneMode, [duration])
- parameters
  - {Number} sceneMode: 2：2D，3：3D，2.5：2.5D
  - {Number} duration
- returns this
changeMouseMode(mouseMode)
- parameters
  - {Number} mouseMode, Refer to：Joint3d.MouseMode
- returns this
addBaseLayer(baseLayers,[options])
- parameters
  - {baseLayer|Array<baseLayer>} baseLayers
  - {Object} options
- returns this

//options
{
  "name": "map",
  "iconUrl": "../preview.png"
}

changeBaseLayer(index)
- parameters
  - {Number} index
- returns this
getImageryLayerInfo(windowPosition)
- parameters
  - {Object} windowPosition
- returns promise
addTerrain(terrain)
- parameters
  - {Terrain} terrain
- returns this
changeTerrain(index)
- parameters
  - {Number} index
- returns this
removeTerrain()
- returns this
addLayerGroup(layerGroup)
- parameters
  - {LayerGroup} layerGroup
- returns this
removeLayerGroup(layerGroup)
- parameters
  - {LayerGroup} layerGroup
- returns this
getLayerGroup(id)
- parameters
  - {String} id
- returns layerGroup
addLayer(layer)
- parameters
  - {Layer} layer
- returns this
removeLayer(layer)
- parameters
  - {Layer} layer
- returns this
getLayer(id)
- parameters
  - {String} id:layer id
- returns layer
getLayers()
- returns layer
eachLayer(callback, context)
- parameters
  - {Function} callback
  - {Object} context
- returns this
```
viewer.eachLayer((layer) => {})
```
flyTo(target,[duration])
- parameters
  - {VectorLayer|Overlay} target
  - {Number} duration
- returns this
zoomTo(target)
- parameters
  - {VectorLayer|Overlay} target
- returns this
flyToPosition(position, [completeCallback], [duration])
- parameters
  - {Position} position
  - {Function} completeCallback
  - {Number} duration
- returns this
zoomToPosition(position, [completeCallback])
- parameters
  - {Joint3d.Position} position
  - {Function} completeCallback
- returns this
on(type, callback, [context])
- parameters
  - {Object} type
  - {Function} callback
  - {Object} context
- returns this
once(type, callback, [context])
- parameters
  - {Object} type
  - {Function} callback
  - {Object} context
- returns this
off(type, callback, [context])
- parameters
  - {Object} type
  - {Function} callback
  - {Object} context
- returns this
destroy()
- returns this
exportScene([name])
- parameters
  - {String} name
- returns this

use(plugin)

parameters
- {Object} plugin
returns this

let plugin = {
  install: (viewer) => {},
}
viewer.use(plugin)

# example

let popup = viewer.popup
popup.setContent('<div></div>')

# properties

{String} statereadonly
{Object} configwriteOnly

{
  "position": "center", // center，left ，right
  "customClass": "custom" // Add a custom Css class name to the popup, separating multiple names with spaces
}

# methods

setPosition(position)
- parameters
  - {Cartesian3} position: World Coordinates
- returns this
setContent(content)
- parameters
  - {String|Element} content
- returns this
setWrapper(wrapper)
- parameters
  - {Element} wrapper(Templates for MVVM frameworks in general)
- returns this
showAt(position, content)
- parameters
  - {Cartesian3} position
  - {String|Element} content
- returns this
hide()
- returns this

# ContextMenu

# example

let contextMenu = viewer.contextMenu
contextMenu.enable = true
contextMenu.DEFAULT_MENU = [
  {
    label: '测试',
    callback: (e) => {}, // e: windowPosition,position,surfacePosition,overlay
    context: this,
  },
] // Setting the default ContextMenu affects the global ContextMenu (use with caution).

# properties

{Boolean} enable
{String} statereadonly
{Array} DEFAULT_MENU：writeOnly

# example

let tooltip = viewer.tooltip
tooltip.enable = true
tooltip.showAt({ x: 100, y: 100 }, 'test')

# properties

{Boolean} enable
{String} state readonly

# methods

showAt(position,content)
- parameters
  - {Cartesian2} position: Screen Coordinates
  - {String|Element} content
- returns this

# MapSplit

# examples

let baseLayer_elc = Joint3d.ImageryLayerFactory.createGoogleImageryLayer()
viewer.mapSplit.enable = true
viewer.mapSplit.addBaseLayer(baseLayer_elc, -1)

# properties

{Boolean} enable
{String} statereadonly

# methods

addBaseLayer(baseLayer,splitDirection)
- parameters
  - {BaseLayer} baseLayer
  - {Number} splitDirection,-1：left，0：none，1：right
- returns this

# Compass

# examples

viewer.compass.enable = true

# properties

{Boolean} enable
{String} state readonly

# ZoomController

# examples

viewer.zoomController.enable = true

# properties

{Boolean} enable
{String} statereadonly

# LocationBar

# examples

viewer.locationBar.enable = true

# properties

{Boolean} enable
{String} state readonly

# DistanceLegend

# examples

viewer.distanceLegend.enable = true

# properties

{Boolean} enable
{String} state,readonly

# LoadingMask

# examples

viewer.loadingMask.enable = true

# properties

{Boolean} enable
{String} statereadonly

# Joint3d.SkyBox

# example

scene.skyBox = new Joint3d.SkyBox({
  sources: {
    positiveX: 'skybox_px.png',
    negativeX: 'skybox_nx.png',
    positiveY: 'skybox_py.png',
    negativeY: 'skybox_ny.png',
    positiveZ: 'skybox_pz.png',
    negativeZ: 'skybox_nz.png',
  },
})

# creation

constructor(id)
- parameters
  - {Object} options
- returns skyBox

//options(optional)
{
  "sources": {},
  "show": true
}

# properties

{Object} sources
{Boolean} show

# Joint3d.GroundSkyBox

# example

scene.skyBox = new Joint3d.GroundSkyBox({
  sources: {
    positiveX: 'skybox_px.png',
    negativeX: 'skybox_nx.png',
    positiveY: 'skybox_py.png',
    negativeY: 'skybox_ny.png',
    positiveZ: 'skybox_pz.png',
    negativeZ: 'skybox_nz.png',
  },
})

# creation

constructor(id)
- parameters
  - {Object} options
- returns groundSkyBox

//options(optional)
{
  "sources": {},
  "show": true,
  "offsetAngle": 0
}

# properties

{Object} sources
{Boolean} show
{Number} offsetAngle

# Joint3d.Position

# example

let position = new Joint3d.Position(120, 22, 102)

let position1 = Joint3d.Position.fromString('120,22,102')

let position2 = Joint3d.Position.fromArray([120, 22, 102])

let position3 = Joint3d.Position.fromObject({ lng: 120, lat: 22, height: 102 })

# creation

constructor(lng,lat,[alt],[heading],[pitch],[roll])
- parameters
  - {Number} lng
  - {Number} lat
  - {Number} alt
  - {Number} heading
  - {Number} pitch
  - {Number} roll
- returns position

# properties

{Number} lng
{Number} lat
{Number} alt
{Number} heading
{Number} pitch
{Number} roll

# methods

serialize()
- returns string
copy()
- returns position
toString()
- returns string
toArray()
- returns array
toObject()
- returns Object

# static methods

fromString(str)
- parameters
  - {String} str
- returns position
fromArray(array)
- parameters
  - {Array} array
- returns position
fromObject(obj)
- parameters
  - {Object} obj
- returns position
deserialize(valStr)
- parameters
  - {String} valStr
- returns position

# Joint3d.Color

# example

//A color, specified using red, green, blue, and alpha values
//which range from 0 (no intensity) to 1.0 (full intensity).
let color = new Joint3d.Color(red, green, blue, alpha)

//Creates a Color instance from a CSS color value.
let blue = Joint3d.Color.fromCssColorString('#67ADDF');
let green = Joint3d.Color.fromCssColorString('green');

//An immutable Color instance initialized to CSS color #FF0000
let red = Joint3d.Color.RED

 //Create a completely random color
 let color = Joint3d.Color.fromRandom();

 //Create a random shade of yellow.
 let color = Joint3d.Color.fromRandom({
    red : 1.0,
    green : 1.0,
    alpha : 1.0
 });

 //Create a random bright color.
 let color = Joint3d.Color.fromRandom({
    minimumRed : 0.75,
    minimumGreen : 0.75,
    minimumBlue : 0.75,
    alpha : 1.0
 });

 //Creates a new Color that has the same red, green
 //and blue components as this Color, but with the specified alpha value.
 let translucentRed = Joint3d.Color.RED.withAlpha(0.9);

# properties

{Color} RED
{Color} YELLOW
{Color} WHITE
{Color} GREEN
{Color} BLACK
{Color} BLUE

# Joint3d.TilesetStyle

# example

let style = new Joint3d.TilesetStyle()
style.color = {
  conditions: [
    ['${floor} >= 5', 'rgb(198, 106, 11)'],
    ['true', 'rgb(127, 59, 8)'],
  ],
}

# Joint3d.JulianDate

let date = Joint3d.JulianDate.now()

# static methods

now()
- returns date
fromDate(date)
- parameters
  - {Date} date
- returns date

# Joint3d.Rect

# example

let r = Joint3d.Rect.fromDegrees(10, 20, 12, 31)

# Joint3d.CallbackProperty

let position = new Joint3d.Position(120, 20)
let point = new Joint3d.Point(position)
let size = 0
point.setStyle({
  pixelSize: new Joint3d.CallbackProperty((time) => {
    size += 1
    if (size == 10) {
      size = 0
    }
    return size
  }),
})

# Joint3d.Parse

Coordinate resolution tool class

let position = Joint3d.Parse.parsePosition('123,32,0')

# static methods

parsePosition(position)
- parameters
  - {String|Array|Position} position
- returns position
parsePositions(positions)
- parameters
  - {String|Array} positions
- returns array
parsePointCoordToArray(position)
- parameters
  - {String|Position} position
- returns array
parsePolylineCoordToArray(positions)
- parameters
  - {String|Array} positions
- returns array
parsePolygonCoordToArray(positions，loop)
- parameters
  - {String|Array} positions
  - {Boolean} loop
- returns array

# Joint3d.Transform

Coordinate conversion tool class

let cartesian3 = Joint3d.Transform.transformWGS84ToCartesian(new Joint3d.Position(120, 20))

# static methods

transformCartesianToWGS84(cartesian)
- parameters
  - {Cartesian3} cartesian
- returns position
transformWGS84ToCartesian(position)
- parameters
  - {Position} position
- returns cartesian
transformWGS84ToCartographic(position)
- parameters
  - {Position} position
- returns cartographic
transformCartesianArrayToWGS84Array(cartesianArr)
- parameters
  - {Array<cartesian3>} cartesianArr
- returns array
transformWGS84ArrayToCartesianArray(WGS84Arr)
- parameters
  - {Array<cartesian3>} WGS84Arr
- returns array
transformWGS84ToMercator(position)
- parameters
  - {Position} position
- returns position
transformMercatorToWGS84(position)
- parameters
  - {Position} position
- returns position
transformWindowToWGS84(position,viewer)
- parameters
  - {Object} position,format:{x:1,y:1}
  - {Viewer} viewer
- returns position
transformWGS84ToWindow(position,viewer)
- parameters
  - {Position} position
  - {Viewer} viewer
- returns Object

# Joint3d.CoordTransform

China Coordinate Conversion Tool

let point = Joint3d.CoordTransform.BD09ToGCJ02(120, 20)

# static methods

BD09ToGCJ02(lng, lat)
- parameters
  - {Number} lng
  - {Number} lat
- returns []
GCJ02ToBD09(lng, lat)
- parameters
  - {Number} lng
  - {Number} lat
- returns []
WGS84ToGCJ02(lng, lat)
- parameters
  - {Number} lng
  - {Number} lat
- returns []
GCJ02ToWGS84(lng, lat)
- parameters
  - {Number} lng
  - {Number} lat
- returns []

# Joint3d.Math

# static methods

area(positions)
- parameters
  - {Array<Position>} positions
- returns number
bounds(positions , expand)
- parameters
  - {Array<Position>} positions
  - {Number}} expand:0~1
- returns object
mid(startPosition , endPosition)
- parameters
  - {Position} startPosition
  - {Position} endPosition
- returns position
center(positions)
- parameters
  - {Array<Position>} positions
- returns position
distance(positions)
- parameters
  - {Array<Position>} positions
- returns number
heading(startPosition, endPosition)
- parameters
  - {Position} startPosition
  - {Position} endPosition
- returns number
parabola(startPosition, endPosition,height,count)
- parameters
  - {Position} startPosition
  - {Position} endPosition
  - {Number} height
  - {Number} count
- returns Array

# Joint3d.Util

# static methods

uuid([prefix])
- parameters
  - {String} prefix
- returns string
merge(dest, ...sources)
- parameters
  - {Object} dest
  - {Object|Array} sources
- returns object
emptyImageUrl()
debounce(fn,delay)
throttle(fn,delay)

# Joint3d.DomUtil

# static methods

get(id)
- parameters
  - {String} id
- returns Element
create(tagName, className, [container])
- parameters
  - {String} tagName
  - {String} className
  - {Element} [container]
- returns Element
addClass(el, name)
- parameters
  - {Element} el
  - {String} className
removeClass(el, name)
- parameters
  - {Element} el
  - {String} className
addClass(el, name)
- parameters
  - {Element} el
  - {String} className
createSvg(width, height, path, [container])
- parameters
  - {Number} width
  - {Number} height
  - {String} path
  - {Element} [container]
- returns svg
parseDom(domStr, [withWrapper], [className])
- parameters
  - {String} domStr
  - {Boolean} withWrapper
  - {String} className
- returns Element | Nodes
enterFullscreen(el)
- parameters
  - {Element} el
exitFullscreen()
createVideo(url, className, [container])
- parameters
  - {String} url
  - {String} className
  - {Element} [container]
- returns Element | Nodes

Base

# Base

# Namespace

# Global Methods

# use

# mixin

# ready

# Constants

# MouseEventType

# SceneEventType

# AnalysisType

# MouseMode

# ImageryType

# TerrainType

# LayerType

# OverlayType

# TrackViewMode

# Joint3d.Viewer

# example

# creation

# properties

# methods

# Popup

# example

# properties

# methods

# ContextMenu

# example

# properties

# Tooltip

# example

# properties

# methods

# MapSplit

# examples

# properties

# methods

# Compass

# examples

# properties

# ZoomController

# examples

# properties

# LocationBar

# examples

# properties

# DistanceLegend

# examples

# properties

# LoadingMask

# examples

# properties

# Joint3d.SkyBox

# example

# creation

# properties

# Joint3d.GroundSkyBox

# example

# creation

# properties

# Joint3d.Position

# example

# creation

# properties

# methods

# static methods

# Joint3d.Color

# example

# properties

# Joint3d.TilesetStyle

# example

# Joint3d.JulianDate

# static methods

# Joint3d.Rect

# example

# Joint3d.CallbackProperty

# Joint3d.Parse

# static methods

# Joint3d.Transform

# static methods