唯杰地图-VJMAP

# ThreeJS图层

提示！！！

下面文档中的vjthree已弃用，如需叠加threejs的三维图层，请用最新的唯杰地图3D库 (opens new window) https://vjmap.com/map3d/

threejs图层以插件形式提供

可以通过

npm  intall vjthree

import { } from 'vjthree'
// vjthree 和 THREE 对象将做为window全局变量
1
2
3
4

或者需要通过

vjmap.addScript([{
    src: "js/plugins/vjthree.min.js"
},{
    src: "js/plugins/vjthree.min.css"
}])
1
2
3
4
5

加载其脚本。

提示

vjthree 和 THREE 对象将做为window全局变量

# 开始

if (typeof vjThree !== "object") {
    // 如果没有环境
    await vjmap.addScript([{
        src: "js/plugins/vjthree.min.js"
    },{
        src: "js/plugins/vjthree.min.css"
    }])
}
const threeContext = map.createThreeJsContext({
    defaultLights: true
});

const lineOptions = {
    geometry: line,
    color: 0xff0000
}

let lineMesh = threeContext.line(lineOptions);
threeContext.add(lineMesh);

map.addLayer(new vjmap.ThreeLayer({context: threeContext}));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# createThreeJsContext 选项

const threeContext = map.createThreeJsContext(options);
1

options 参数是可选的，可以包含以下值：

选项 必填 默认 类型 说明
defaultLights no false boolean 是否为场景添加一些默认光照。如果没有添加光照，场景中的大部分物体都会渲染为黑色
realSunlight no false boolean 它为地图中心坐标“map.getCenter”和用户本地日期时间“new Date()”设置模拟太阳位置的灯光。这个阳光可以通过 threeContext.setSunlight 方法更新。它在内部调用 suncalc 模块。
realSunlightHelper no false boolean 它设置当 realSunlight 为真时是否显示灯光助手。
passiveRendering no true boolean 线的颜色。与其他对象不同，此颜色将按照指定在屏幕上精确渲染，而与场景照明无关
enableSelectingFeatures no false boolean 启用鼠标悬停和选择填充挤出功能。这将触发事件 SelectedFeatureChange
enableSelectingObjects no false boolean 启用鼠标悬停和选择 3D 对象。这将触发事件 SelectedChange。该值将设置所创建对象的 options.bbx 值。
enableDraggingObjects no false boolean 启用拖动 3D 对象的选项。这将触发事件 ObjectDragged where draggedAction = 'translate' 或 draggedAction = 'altitude'
enableRotatingObjects no false boolean 启用拖动 3D 对象的选项。这将触发事件 ObjectDragged where draggedAction = 'rotate'
enableToltips no false boolean 启用填充拉伸特征和 3D 对象的默认工具提示
multiLayer no false boolean 启用多层页面的选项，其中将在内部创建一个默认层来管理 threeContext.update 调用
orthographic no false boolean 启用选项以设置 THREE.OrthographicCamera
fov no threeContextConstants.FOV_DEGREES number 允许设置默认 THREE.PerspectiveCamera (opens new window) 的 FOV。如果 orthographic: true，此值无效
sky no false boolean 它设置了一个内置的大气层，最初设置了时间和地图中心位置。如果 realSunlight 也为真，则该图层会自动更新，但可以通过调用 threeContext.updateSunSky(threeContext.getSunSky()) 方法单独更新。
terrain no false boolean 它设置了一个内置的地形图层，最初设置了时间和地图中心位置。如果 realSunlight 也为真，则该图层会自动更新，但可以通过调用 threeContext.updateSunSky(threeContext.getSunSky()) 方法单独更新。

# 加载 3D 模型

可以选择从不同格式的外部文件加载 3D 模型（支持 OBJ/MTL、GLTF/GLB、FBX、DAE）。模型加载并添加到 threeContext 后，默认情况下该对象会使用一些方法、交互、事件和动画来驱动。

一旦对象被加载并添加到 threeContext 实例，它就可以是selectable、draggable和rotable（在 z 轴上） 如果 threeContext 实例属性 enableSelectingObjects、enableDraggingObjects 和 enableRotatingObjects 设置为 true。

  • 要拖动一个对象，您必须选择对象，然后按SHIFT键并移动鼠标以更改其Lnglat位置，并按CTRL键更改其高度。
  • 要旋转和对象，您必须选择对象，然后按 ALT 键并移动鼠标。对象将始终在其定义的中心上旋转。

如果 threeContext 实例属性 threeContext.enableTooltips 设置为 true，则任何 3D 对象（包括通过填充挤出映射框层创建的 3D 挤出）都将具有工具提示。

# 方法

# add

threeContext.add(obj [, layerId, sourceId])
1

将对象添加到 threeContext 场景的方法。它会将其添加到 threeContext.world.children 数组中。


# clear

async threeContext.clear([layerId, dispose])
1

此方法从“threeContext.world”中删除所有子项。如果它收到一个“layerId”，这只会影响该层中的对象。如果它接收到 true 作为参数，它还将在内部调用 obj.dispose 以释放这些对象保留的所有资源。


# createSkyLayer

threeContext.createSkyLayer()
1

这个内部方法创建了一个新的天空大气层，它被属性“threeContext.sky”内部使用。


# createTerrainLayer

threeContext.createTerrainLayer()
1

这个内部方法创建了一个新的地形层，它被属性“threeContext.terrain”内部使用。


# defaultLights

threeContext.defaultLights()
1

此方法创建 threeContext scene 的默认照明。 默认情况下，它会创建一个 THREE.AmbientLight (opens new window) 并分配给 threeContext.lights.ambientLight 两个 [THREE.DirectionalLight]（https://threejs.org/docs/#api/en/lights/DirectionalLight）。 可以手动覆盖这些灯光，将自定义灯光添加到 threeContext scene。


# dispose

threeContext.dispose() : Promise (async)
1

如果 threeContext 被用作 Web 应用程序的一部分，建议在任何时候显式地处理 threeContext 的实例 它的实例将不再被使用，或者在导航到另一个不包含 threeContext 的页面之前，否则它是 您可能会面临内存泄漏问题，这不仅是由于 threeContext，还因为内部使用了管理对象所需的 Map 和 Three.js 实例。

要完全释放 threeContext 可以积累的所有资源和内存，包括 Three.js 和 Map 的内部资源，需要调用 dispose 方法。

此方法将遍历创建的场景以处理 Three.js 中的每个对象、几何体、材质和纹理，然后将处理 Map 中的所有资源，包括 WebGLRenderingContext 和 threeContext 实例本身。
调用此方法后，threeContext 和 Map 地图实例将被完全释放，因此仅建议在导航到其他页面之前使用。


# findParent3DObject

threeContext.findParent3DObject(mesh) : Object3D
1

此方法通过网格在 threeContext 场景中找到父 Object3D。此方法与返回对象数组的 threeContext.queryRenderedFeatures 结合使用，其中大多数是 [THREE.Raycaster](https://threejs.org/docs/#api/en/core/ Raycaster) 相交。


# getFeatureCenter

threeContext.getFeatureCenter(feature, model, level): lnglat
1

计算要素几何坐标的中心，包括给定 GeoJson (opens new window) 要素的高度（以米为单位），该要素可以包含或不包含已加载的 3D 模型以及给定级别。 此方法在内部调用“threeContext.getObjectHeightOnFloor”，可用于填充拉伸的 Poligon 特征或 3D 模型的点特征。


# getObjectHeightOnFloor

threeContext.getObjectHeightOnFloor(feature, obj, level) : number
1

计算给定 GeoJson (opens new window) 功能的高度（以米为单位），该功能可以包括或不包括加载的 3D 模型和给定级别。 此方法可用于填充拉伸的 Poligon 特征或 3D 模型的点特征。

# getSunPosition

threeContext.getSunPosition(date, coords)
1

此方法基于suncalc.js模块获取太阳光位置（方位角，高度），该模块计算给定日期，时间，lng，lat组合的太阳位置。


# getSunSky

threeContext.getSunSky(date, sunPos)
1

此方法基于“suncalc.js”模块获取太阳天空层位置“[方位角，高度]”，该模块计算给定日期、时间、lng、lat 组合的太阳位置。 如果提供了date，它将使用它，否则它将使用new Date()。如果提供了sunPos，它将使用它，否则它将基于map.getCenter()调用threeContext.getSunPosition方法来计算它。

# getSunTimes

threeContext.getSunTimes(date, coords)
1

此方法基于“suncalc.js”模块获取太阳时间，该模块计算来自给定日期时间、lng、lat 和 alt 的不同光照阶段（日出、日落等）的时间。这用于根据日/夜时间更改地图样式。 返回具有以下属性的对象（每个都是“日期”对象）：

# loadObj

async threeContext.loadObj(options, callback(obj));
1

此异步方法从其各自的文件加载不同格式的 3D 模型。 它会自动缓存每个资源 url 的第一个对象，以便从 obj.duplicate 返回下一个实例。 请注意，与所有其他对象类不同，这是异步的，并将对象作为回调函数的参数返回。 在内部，使用 THREE.OBJLoader (opens new window)、[THREE.FBXLoader](https: //github.com/mrdoob/three.js/blob/dev/examples/jsm/loaders/FBXLoader.js), [THREE.GLTFLoader](https://github.com/mrdoob/three.js/blob /dev/examples/jsm/loaders/GLTFLoader.js) 或 THREE.ColladaLoader (opens new window)分别将资产获取到每种 3D 格式。 THREE.FBXLoader (opens new window) 也依赖于[Zlib](https://github.com /imaya/zlib.js) 打开此格式所基于的压缩文件。

选项 必填 默认 类型 描述
type yes "mtl" string ("mtl", "gltf", "fbx", "dae") 类型
obj yes NA string OBJ 模型所需的资产 .obj 文件的 URL 路径
mtl no NA string OBJ 模型所需的资产 .obj 文件的 URL 路径
bin no NA string URL path to assets .bin files needed for GLTF models respectively
units no scene string ("scene" or "meters") 建议使用“米”以获得精度。用于解释对象顶点的单位。如果是米，threeContext 还会随着纬度的变化重新缩放对象，以显示与附近的对象和地理一起缩放。
rotation no 0 number or {x, y, z} 沿三个轴旋转对象，以在未来旋转之前将其对齐到所需的方向。请注意，未来的旋转将应用于此转换，并且不要覆盖它。 rotate 属性必须以数字或每个轴的形式提供（（即对于在 x 轴上旋转 90 度的对象rotation: {x: 90, y: 0, z: 0}
scale no 1 number or {x, y, z} 沿三个轴缩放对象，以便在未来变换之前适当调整其大小。请注意，未来的缩放适用于此转换，而不是覆盖它。 scale 属性必须以数字或每个轴的形式提供（（即对于转换为比其默认大小高 3 倍的对象scale: {x: 1, y: 1, z: 3}
anchor no bottom-left string () 此参数将 3D 模型的关键中心定位到它所定位的坐标。这可能有以下值top，bottom，left，right，center，top-left，top-right，bottom-left，bottom-right。默认值为“左下角”。 auto 值不会做任何事情，因此模型将使用模型中定义的锚点，无论它是什么。
adjustment no 1 {x, y, z} 3D 模型通常不在其轴上居中，因此对象定位和旋转错误。 adjustment 参数必须以每个轴的单位提供（即 adjustment: {x: 0.5, y: 0.5, z: 0}），因此模型将校正对象的中心位置
normalize no true bool 此参数允许对某些 3D 模型的高光值进行归一化
feature no 1 GeoJson (opens new window) feature GeoJson 特征实例。例如height、base_height、color
tooltip no false bool 此参数允许有或没有工具提示，默认情况下设置为 threeContext.enableTooltips 的值
bbox no false bool 此参数允许有或没有边界框，默认情况下设置为 threeContext.enableSelectingObjects 的值
raycasted no true bool 此参数允许单独从光线投射中隐藏对象
clone no true bool 默认情况下，此参数允许加载对象而不克隆它，但它会降低性能，因为新对象将消耗额外的内存，因为不会克隆任何纹理。当动画和纹理不能很好地用于克隆时，某些对象可能需要全新的实例，然后 clone: false 将解决问题。默认情况下，“克隆”参数为 true。
defaultAnimation no 0 number 这允许通过参数分配默认动画。如果对象不包含动画则忽略
callback yes NA function 在对象加载后运行的函数。第一个参数将是成功加载的对象，通常用于完成模型的配置并通过 threeContext.add() 方法将其添加到 threeContext 场景中。

对象将具有以下已可用于侦听的事件，这些事件使 UI 能够对这些事件做出反应。您可以将以下这些 addEventListener 行添加到 threeContext.loadObj 中：

	threeContext.loadObj(options, function (model) {

		soldier = model.setCoords(origin);

		soldier.addEventListener('SelectedChange', onSelectedChange, false);
		soldier.addEventListener('Wireframed', onWireframed, false);
		soldier.addEventListener('IsPlayingChanged', onIsPlayingChanged, false);
		soldier.addEventListener('ObjectDragged', onDraggedObject, false);
		soldier.addEventListener('ObjectMouseOver', onObjectMouseOver, false);
		soldier.addEventListener('ObjectMouseOut', onObjectMouseOut, false);

		threeContext.add(soldier);
	})
1
2
3
4
5
6
7
8
9
10
11
12
13

通过这种方式，一旦这些事件被触发，您就可以通过函数在您的 UI 中进行管理。请参阅下面的 onSelectedChange 示例，以使用 Map 中的方法 map.flyTo(options[, eventData])：

// 激活停用 UI 按钮的方法。
// 这个例子使用 jQuery
// 此示例需要在 threeContext.loadObj(options) 的选项中包含 GeoJson 功能
function onSelectedChange(e) {
	let selected = e.detail.selected; // 如果在事件之后选择了对象，我们会得到
	$('#deleteButton')[0].disabled = !selected; // 我们用 jquery 找到删除按钮

	// if selected
	if (selected) {
		selectedObject = e.detail; //
		// 我们平稳地飞向选定的对象
		map.flyTo({
			center: selectedObject.userData.feature.properties.camera,
			zoom: selectedObject.userData.feature.properties.zoom,
			pitch: selectedObject.userData.feature.properties.pitch,
			bearing: selectedObject.userData.feature.properties.bearing
		});
	}
	threeContext.update();
	map.repaint = true;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 3D 格式和 MIME 类型

大多数流行的 3D 格式扩展名（.glb、.gltf、.fbx、.dae、...）都不是标准的 MIME 类型，因此您将需要配置您的 Web 服务器引擎以接受此扩展，否则下载它们时您会收到不同的 HTTP 错误。
如果您从 ASP.Net 应用程序使用 IIS 服务器，请在 web.config 文件的 <system.webServer> 节点中添加以下 xml 行：

<system.webServer>
	  ...
	  <staticContent>
		  <remove fileExtension=".mtl" />
		  <mimeMap fileExtension=".mtl" mimeType="model/mtl" />
		  <remove fileExtension=".obj" />
		  <mimeMap fileExtension=".obj" mimeType="model/obj" />
		  <remove fileExtension=".glb" />
		  <mimeMap fileExtension=".glb" mimeType="model/gltf-binary" />
		  <remove fileExtension=".gltf" />
		  <mimeMap fileExtension=".gltf" mimeType="model/gltf+json" />
		  <remove fileExtension=".fbx" />
		  <mimeMap fileExtension=".fbx" mimeType="application/octet-stream" />
		  <remove fileExtension=".dae" />
		  <mimeMap fileExtension=".dae" mimeType="application/vnd.oipf.dae.svg+xml" />
	  </staticContent>
</system.webServer>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

如果您使用的是 ASP.net 核心服务器，请在 Startup 类的 Configure 方法中添加以下：

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    ...

    // Set up custom content types - associating file extension to MIME type
    var provider = new FileExtensionContentTypeProvider();
    // Add new mappings
    provider.Mappings[".mtl"] = "model/mtl";
    provider.Mappings[".obj"] = "model/obj";
    provider.Mappings[".glb"] = "model/gltf-binary";
    provider.Mappings[".gltf"] = "model/gltf+json";
    provider.Mappings[".fbx"] = "application/octet-stream";
    provider.Mappings[".dae"] = "application/vnd.oipf.dae.svg+xml";

    app.UseStaticFiles(new StaticFileOptions 
    {
        ContentTypeProvider = provider
    });

    ...
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

如果您使用的是 nginx 服务器，请将以下行添加到 http 对象中的 nginx.conf 文件中：

http {
	include /etc/nginx/mime.types;
	types {
		model/mtl mtl;
		model/obj obj;
		model/gltf+json gltf;
		model/gltf-binary glb;
		application/octet-stream fbx;
		application/vnd.oipf.dae.svg+xml dae;
	}
	...
}
1
2
3
4
5
6
7
8
9
10
11
12

如果您使用的是Apache服务器，请在mime中添加以下行。文件类型：

model/mtl mtl
model/obj obj
model/gltf+json gltf
model/gltf-binary glb
application/octet-stream fbx
application/vnd.oipf.dae.svg+xml dae
1
2
3
4
5
6

# memory

threeContext.memory() : Object
1

这将从 THREE.WebGLRenderer.info 返回成员memory


# programs

threeContext.programs() : int
1

这将从 THREE.WebGLRenderer.info 返回 programs 成员的长度


# projectToWorld

threeContext.projectToWorld(lnglat) : THREE.Vector3
1

计算给定 lnglat 对应的 THREE.Vector3 。它的逆方法是 threeContext.unprojectFromWorld 。


# queryRenderedFeatures

threeContext.queryRenderedFeatures(point) : Array
1

此方法使用 THREE.Raycaster 计算与拾取射线相交的对象，并返回场景中按距离从近到远排序的 threeContext 对象数组。将 {x: number, y: number} 的输入作为一个对象，其值表示屏幕坐标（由 Map 鼠标事件返回为 e.point）。


# realSunlight

threeContext.realSunlight([helper = true])
1

此方法为 threeContext 的“场景”创建模拟太阳光的照明。它创建一个 THREE.HemisphereLight 和一个 THREE.DirectionalLight，它基于 suncalc.js. 模块定位，该模块计算给定日期、时间、lng、lat 组合的太阳位置。它以 map.getCenter 和 new Date() 作为值在内部调用 threeContext.setSunlight。可以手动覆盖这些灯光，将自定义灯光添加到 threeContext scene。如果 helper 为真，则显示一个助手。

# remove

threeContext.remove(obj)
1

从 threeContext 场景和“threeContext.world.children”数组中移除对象的方法。


# removeByName

threeContext.removeByName(name)
1

从 threeContext 场景和 threeContext.world.children 数组中删除对象的方法，搜索对象及其子对象，从对象本身开始，并删除具有匹配名称的第一个对象。

# removeLayer

threeContext.removeLayer(layerId)
1

从 map 中移除图层的方法，包括 threeContext 场景中的所有 3D 对象和 threeContext.world.children 数组。


# setLayerHeigthProperty

threeContext.setLayerHeigthProperty(layerId, level)
1

设置关卡中所有对象高度的方法。此方法仅适用于对象具有 GeoJson 功能，并且在其属性中具有“级别”属性的情况。


# setLayerZoomRange

threeContext.setLayerZoomRange(layerId, minZoomLayer, maxZoomLayer)
1

自定义图层不适用于 minzoom 和 maxzoom 属性，因为每个图层都在渲染整个场景，并且如果图层包含标签，它们也不会在 minzoom 上隐藏。此方法设置任何自定义图层的缩放范围，并管理 3D 对象和 CSS2D 标签切换操作，与通过 threeContext.setLayoutProperty 设置的图层可见性同步。


# setLayerZoomVisibility

threeContext.setLayerZoomVisibility(layerId)
1

此方法根据当前缩放设置或重置图层可见性。不同的方法使用它来设置图层的可见性。

# setLayoutProperty

threeContext.setLayoutProperty(layerId, name, value)
1

当自定义图层受到影响时，此方法复制了map.setLayoutProperty 的行为，但它可以用于任何图层类型。

# setObjectsScale

threeContext.setObjectsScale()
1

此方法缩放来自 threeContext.world.children 的所有 fixedZoom 对象。

# setStyle

threeContext.setStyle(styleId[, options])
1

此方法复制map.setStyle的行为，以从 threeContext.world 中删除 3D 对象。这是对 map.setStyle 的直接传递，但它也在内部调用 threeContext.clear(true) 以从 threeContext.world 中删除子项，并处理这些对象保留的所有资源。

# setSunlight

threeContext.setSunlight(newDate = new Date(), coords)
1

该方法基于suncalc.js.模块更新太阳光位置，该模块计算给定日期、时间、lng、lat组合的太阳位置。它以 map.getCenter 和 new Date() 作为值在内部调用 threeContext.setSunlight。

# toggleLayer

threeContext.toggleLayer(layerId, visible)
1

此方法用于切换任何图层的可见性，但它是专门为自定义图层设计的。如果您想避免区分 map 图层（包括自定义图层），此方法将替换对 map.setLayoutProperty(layerId, 'visibility', visible) 的调用

# update

threeContext.update()
1

使用 threeContext.loadObj(options, callback(obj)) 这可能是 threeContext 中最重要的方法，因为它负责调用 THREE.WebGLRenderer.render(scene, camera) 方法。


# updateLightHelper

threeContext.updateLightHelper()
1

这个方法更新了threeContext.lights.dirLightHelper的位置，如果我们想在灯光移动时看到助手正确渲染，就需要它。

# updateSunGround

threeContext.updateSunGround(sunPos)
1

如果 threeContext.realSunlight 为 true，此方法会根据太阳高度更新卫星样式（如果应用）上的光照。

# updateSunSky

threeContext.updateSunSky(sunPos)
1

如果 threeContext.sky 为 true，此方法会使用接收到的太阳位置更新天空大气层。

# unprojectFromWorld

threeContext.unprojectFromWorld(Vector3): lnglat
1

计算给定 [THREE.Vector3] 对应的 lnglat。它的逆方法是threeContext.projectToWorld。

# versions

threeContext.version() : string
1

这将返回 threeContext 的版本

# threeContext properties

在下面的所有示例中，threeContext 的实例将始终称为“tb”。

# altitudeStep

threeContext.altitudeStep : Number
1

此 getset 属性接收并返回垂直拖动对象时要使用的步长大小（以米为单位）。默认设置为 0.1 = 10cm。

# defaultCursor

threeContext.defaultCursor : string
1

此 getset 属性接收并返回地图画布容器 this.getCanvasContainer().style.cursor 的默认光标值，初始设置为 'default'。

# enableDraggingObjects

threeContext.enableDraggingObjects : Boolean
1

此 getset 属性接收并返回值以启用垂直或水平拖动使用 threeContext 创建的 3D 对象的选项。此属性要求将 threeContext.enableSelectingFeature 设置为 true。当此属性为 true 并且选择了一个对象时，按住 [Shift] 键并单击鼠标，该对象将在其 x-y 轴上（水平）移动。按住 [Ctrl] 键并单击鼠标，对象将在其 z 轴（垂直）上移动。当对象被放下时，这个拖动动作会触发 ObjectDragged 事件，可以按如下方式监听：

obj.addEventListener('ObjectDragged', onDraggedObject, false)
1

此属性不影响 map 的“填充挤出”层。


# enableRotatingObjects

threeContext.enableRotatingObjects : Boolean
1

此getset属性接收并返回值，以启用垂直或水平拖动使用threeContext创建的3D对象的选项。此属性需要'threeContext'。enableSelectingFeature'设置为true。当此属性为true，并且选择了一个对象时，按住[Alt]键并单击鼠标，该对象将绕其z轴上的定位点旋转。按住[Ctrl]键并单击鼠标，对象将沿其z轴（垂直）移动。此拖动操作会在对象被丢弃时触发“ObjectDrawed”事件，可按如下方式监听：

obj.addEventListener('ObjectDragged', onDraggedObject, false)
1

此属性不影响map“填充拉伸”图层。


# enableSelectingFeatures

threeContext.enableSelectingFeatures : Boolean
1

此getset属性接收并返回值，以启用从“填充拉伸”图层选择要素的选项。此属性不影响对三维对象的访问。此selectionunselection操作在选择或取消选择对象时触发“SelectedFeatureChange”事件（由于选择了其他功能而显式或隐式），可以按如下方式进行监听：

obj.addEventListener('SelectedFeatureChange', onSelectedFeatureChange, false)
1

# enableSelectingObjects

threeContext.enableSelectingObjects : Boolean
1

此getset属性接收并返回值，以启用选择使用threeContext创建的三维对象的选项。此selectionunselection操作在选择或取消选择对象时触发“SelectedChange”事件（由于选择了其他对象而显式或隐式），可以按如下方式进行监听：

obj.addEventListener('SelectedChange', onSelectedChange, false)
1

此属性不影响map“填充拉伸”图层。


# enableTooltips

threeContext.enableTooltips : Boolean
1

此getset属性接收并返回值，以使选项在对象上具有工具提示（自定义或默认）。此属性需要'threeContext'。enableSelectingFeature'设置为true。当此属性为true，并且对象被覆盖或选中时，将显示其工具提示。

# fov

threeContext.fov : Number (degrees)
1

默认情况下是threeContextConstants.FOV_DEGREES.
此getset属性设置并返回相机中使用的视野（FOV）的值。此值仅在“threeContext”时有效。orthographic为false，这意味着正在使用的相机是 THREE.PerspectiveCamera 。

# gridStep

threeContext.gridStep : Number(integer)
1

此getset属性接收并返回水平拖动对象时要使用的步骤的大小（以精度小数为单位），以减少map在其坐标中管理的小数数。默认情况下，此步骤的精度设置为6小数=11.1厘米，将此属性设置为7，网格将减少到1.1厘米。FOV的map最小值为“0.01”，因此，如果它收到“0”值，map地图会将其转换为“0.01”。使改变fov属性到它的最小值。


# lights

threeContext.lights : Object
1

此get\set属性接收并返回应用于场景的完整灯光集。

  • threeContext.lights.ambientLight 由threeContext.defaultLights()方法用实例THREE.AmbientLight初始化，但可以手动重写。
  • threeContext.lights.dirLight 可以通过threeContext.defaultLights()或threeContext.setSunlight使用实例THREE.DirectionalLight初始化。不建议使用[realSunlight]（realSunlight）属性覆盖此灯光。
  • threeContext.lights.dirLightHelper 由[threeContext.setSunlight]（setSunlight）使用实例THREE.DirectionalLightHelper初始化。
  • threeContext.lights.hemiLight由threeContext.setSunlight使用实例THREE.HemisphereLight`初始化。
  • threeContext.lights.pointLight 默认情况下未初始化。

# multiLayer

threeContext.multiLayer : Boolean
1

默认情况下为“false”。 此getset属性接收并返回值，以使选项具有多个3D层，其中将在内部创建一个默认层来管理“threeContext”。update calls尽管此值可以在运行时更改，但除非通过threeContext 进行样式更改，否则该值不会生效。设置样式`。因此，如果您知道页面可能有多个3D层，建议使用初始化参数 “multiLayer:true” 在构造函数中将其初始化为true。


# orthographic

threeContext.orthographic : Boolean
1

默认情况下为“false”。此getset属性设置并返回要使用的相机的值。


# rotationStep

threeContext.rotationStep : Number
1

此getset属性接收并返回拖动和旋转对象时要使用的步长大小（以度为单位）。默认情况下，该值设置为5。

# sky

threeContext.sky: Boolean
1

默认情况下为“false”。此属性由threeContext构造函数中的init参数'sky:true'设置。此getset属性设置并返回一个选项，使内置大气层最初设置为时间和地图中心位置。如果“realSunlight”也是真的，则该层会自动更新，但可以通过“threeContext”单独更新。updateSunSky（threeContext.getSunSky()）`方法调用。如果在创建大气天空层后将此属性设置为“false”，它将删除该层。

# terrain

threeContext.terrain: Boolean
1

默认情况下为“false”。此属性由threeContext构造函数中的init paramterrain:true设置。此getset属性设置并返回具有内置地形层的选项。如果“realSunlight”也为真，则该层会自动更新，调整其光照，但可以通过“threeContext”单独更新。updateSunGround（threeContext.getSunPosition()）`方法调用。如果在创建地形层后将此属性设置为“false”，它将删除该层。

# Objects

threeContext提供了方便的函数，可以构建各种类型的网格。js网格，以及3D模型。在引擎盖下，它们调用THREE.Object3D的子类。物体分为两大类。静态对象放置后不会移动或更改，通常用于显示背景或地理特征。它们可能具有复杂的内部几何结构，主要以lnglat坐标表示。相比之下，动态对象可以在地图上移动，只需一个lnglat点即可定位。它们的内部几何图形主要在局部场景单元中生成，无论是通过外部obj文件还是下面这些方便的方法。

# Static objects

# Line

threeContext.line(options);
1

在完整的三维空间中向地图添加一条线。颜色渲染独立于场景照明。在内部，调用custom line shader。

选项 必需 默认 类型 用途
geometry yes NA lineGeometry 绘制直线的lnglat坐标数组
color no black color 线条的颜色。与其他threeContext对象不同，无论场景照明如何，该颜色都将精确地按指定在屏幕上渲染
width no 1 number 线条宽度。此宽度以显示像素为单位，而不是米或场景单位。
opacity no 1 Number Line opacity

# Dynamic objects

# Extrusion

threeContext.extrusion(options);
1

将拉伸形状添加到地图中。

选项 必需 默认 类型 说明
coordinates no [[[]]] or Vector2 array 嵌套数组 遵循geoJson特性标准的嵌套数组。几何学用“多边形”或“坐标数组。
geometryOptions no {} Object 对象，该对象包含以下选项ExtradeGeometry
height no 100 Number 拉伸形状的长度。
units no scene string ("scene" or "meters") 用于解释对象顶点的单位。如果是米，threeContext也会随着纬度的变化重新缩放对象，使其看起来与附近的对象和地理位置成比例。
scale no 1 number or {x, y, z} 沿三个轴缩放对象，以便在未来变换之前适当调整其大小。请注意，未来的缩放将应用于此转换之上，而不是覆盖它scale属性必须以数字或每轴的形式提供（即，对于转换为比默认大小高3倍的对象，比例：{x:1，y:1，z:3}
rotation no 0 number or {x, y, z} 沿三个轴旋转对象，以便在未来旋转之前将其与所需方向对齐。请注意，未来的旋转将应用于此转换之上，并且不会覆盖它rotate属性必须以数字或每轴的形式提供（即，对于在x轴上旋转90度的对象，旋转：{x:90，y:0，z:0}
materials no THREE.MeshPhongMaterial({ color: 0x660000, side: THREE.DoubleSide }) threeMaterial or threeMaterials array THREE material使用。可以通过文本字符串或预定义的材质对象本身调用。
anchor no bottom-left string 该参数将3D模型的关键中心定位到其定位的坐标上。它可以有以下值“top”、“bottom”、“left”、“right”、“center”、“top left”、“top right”、“bottom left”、“bottom right”。默认值为“左下角”`
adjustment no 1 {x, y, z} 对于几何图形，中心默认为{0,0,0}位置，这是用于定位和旋转的点。为了从地板计算中获得完美的定位和高度，这可以用标准化单位重新定义，“调整”参数必须以每个轴的单位提供（即“调整：{x:-0.5，y:-0.5，z:0}”，因此模型将校正对象的中心位置减去x轴长度的一半，减去y轴长度的一半）。如果使用此方法创建的立方体的默认中心位于0高度上的混凝土“lnglat”中，则该立方体的一半将位于地面地图标高以下，对象将位于其{x，y}中心，所以你可以定义调整：{x:-0.5，y:-0.5，z:0.5}来改变中心到左下角，而这个角正好在地平面上的'lnglat'位置工具提示“|no | false | bool |此参数允许有或没有工具提示，默认情况下，该参数的值设置为“threeContext”。启用工具提示
bbox no false bool 此参数允许有或没有边界框，默认情况下，该参数的值设置为'threeContext'。启用选择对象`
raycasted no true bool 此参数允许对光线投射单独隐藏对象

# Label

threeContext.label(options);
1

创建一个新的HTML标签对象，该对象可以通过obj'定位。setCoords（coords）然后通过'threeContext'添加到threeContext场景。加上（obj）。在内部，此方法使用由THREE.css2drender呈现的CSS2DObject创建THREE的实例。CSS2DObject`将与'obj'关联。

选项 必需 默认 类型 说明
htmlElement yes null htmlElement HTMLElement将被呈现为CSS2DObject
cssClass no " label3D" string CssClass将被聚合以管理标签对象的样式。
alwaysVisible no false number 宽度和高度段的数量。数字越大，球体越平滑。
topMargin no -0.5 int 如果“topMargin”是以数字定义的，它将以单位添加到其垂直位置，其中1是对象高度。默认情况下，标签将位于对象的垂直中间（topMargin:-0.5）
feature no null GeoJson功能 GeoJson功能分配给工具提示。它将用于动态定位

# Object3D

threeContext.Object3D(options)
1

将任何几何体添加为THREE.Object3D或THREE.Mesh

选项 必需 默认 类型 说明
obj yes null THREE.Mesh 要使用此方法添加新属性来丰富对象。
units no scene string ("scene" or "meters") 用于解释对象顶点的单位。如果是米，threeContext也会随着纬度的变化重新缩放对象，使其看起来与附近的对象和地理位置成比例。
anchor no bottom-left string 该参数将3D模型的关键中心定位到其定位的坐标上。它可以有以下值“top”、“bottom”、“left”、“right”、“center”、“top left”、“top right”、“bottom left”、“bottom right”。默认值为“左下角”`
adjustment no 1 {x, y, z} 对于几何图形，中心默认为{0,0,0}位置，这是用于定位和旋转的点。为了从地板计算中获得完美的定位和高度，这可以用标准化单位重新定义，“调整”参数必须以每个轴的单位提供（即“调整：{x:-0.5，y:-0.5，z:0}”，因此模型将校正对象的中心位置减去x轴长度的一半，减去y轴长度的一半）。如果使用此方法创建的立方体的默认中心位于0高度上的混凝土“lnglat”中，则该立方体的一半将位于地面地图标高以下，对象将位于其{x，y}中心，所以你可以定义'adjustment:{x:-0.5，y:-0.5，z:0.5}'来改变中心到左下角，而这个角正好在地平面的'lnglat'位置。
tooltip no false bool 此参数允许有或没有工具提示，默认情况下设置为'threeContext'值。启用工具提示`
bbox no false bool 此参数允许有或没有边界框，默认情况下，该参数的值设置为'threeContext'。启用选择对象`
raycasted no true bool 此参数允许对光线投射单独隐藏对象

# Sphere

threeContext.sphere(options);
1

向地图添加一个球体。 在内部，使用 THREE.SphereGeometry 调用 THREE.Mesh，并调用 Object3D(options) 以将其转换为动态对象。

选项 必需 默认 类型 说明
radius no 50 number Radius of sphere.
units no scene string ("scene" or "meters") 用于解释对象顶点的单位。如果是米，threeContext也会随着纬度的变化重新缩放对象，使其看起来与附近的对象和地理位置成比例。
sides no 8 number 宽度和高度段的数量。数字越大，球体越平滑。
color no black color 球体的颜色。
material no MeshLambertMateTHREE material 使用。可以通过文本字符串或预定义的材质对象本身调用。
anchor no bottom-left string 该参数将3D模型的关键中心定位到其定位的坐标上。它可以有以下值“top”、“bottom”、“left”、“right”、“center”、“top left”、“top right”、“bottom left”、“bottom right”。默认值为“左下角”`
adjustment no 1 {x, y, z} 对于几何图形，中心默认为{0,0,0}位置，这是用于定位和旋转的点。为了从地板计算中获得完美的定位和高度，这可以用标准化单位重新定义，“调整”参数必须以每个轴的单位提供（即“调整：{x:-0.5，y:-0.5，z:0}”，因此模型将校正对象的中心位置减去x轴长度的一半，减去y轴长度的一半）。如果使用此方法创建的立方体的默认中心位于0高度上的混凝土“lnglat”中，则该立方体的一半将位于地面地图标高以下，对象将位于其{x，y}中心，所以你可以定义'adjustment:{x:-0.5，y:-0.5，z:0.5}'来改变中心到左下角，而这个角正好在地平面的'lnglat'位置。
tooltip no false bool 此参数允许有或没有工具提示，默认设置为 threeContext.enableTooltips
bbox no false bool 此参数允许有或没有边界框，默认设置为 threeContext.enableSelectingObjects
raycasted no true bool 此参数允许对光线投射单独隐藏对象

# Tooltip

threeContext.tooltip(options);
1

创建一个新的类似浏览器的工具提示对象，该对象可以通过“obj”定位。setCoords（coords）然后通过'threeContext'添加到threeContext场景。加上（obj）。在内部，此方法使用由THREE.css2drender呈现的CSS2DObject创建THREE的实例。CSS2DObject将与'obj'关联。工具提示`属性。

选项 必需 默认 类型 说明
text yes "" string 将用于渲染为CSS2DObject
cssClass no "toolTip text-xs" string CssClass将被聚合以管理标签对象的样式。
mapStyle no false int 如果“mapStyle”为true，则应用与Map弹出窗口相同的样式。
topMargin no 0 int 如果“topMargin”是以数字定义的，它将以单位添加到其垂直位置，其中1是对象高度。默认情况下，标签将位于对象的顶部（topMargin:0）
feature no null GeoJson功能 GeoJson功能分配给工具提示。它将用于动态定位

# Tube

threeContext.tube(options);
1

以等边多边形作为横截面，沿特定的线几何图形挤出管。在内部使用自定义管几何图形生成器，还可以使用“Object3D（选项）”将其转换为动态对象。

选项 必需 默认 类型 说明
geometry yes NA lineGeometry 形成管主干的线坐标
radius no 20 number 管横截面的半径，或管宽度的一半。
sides no 8 number 沿管的面数。高度越高，管子越接近光滑圆柱体。
material no MeshLambertMaterial threeMaterial [THREE material]（https:github.commrdoobthree.jstreemastersrcmaterials）使用。可以通过文本字符串或预定义的材质对象本身调用。
color no black color 管颜色。如果“material”是预定义的“THREE”，则忽略。实物。
opacity no 1 Number 管不透明度
anchor no bottom-left string 该参数将3D模型的关键中心定位到其定位的坐标上。它可以有以下值“top”、“bottom”、“left”、“right”、“center”、“top left”、“top right”、“bottom left”、“bottom right”。默认值为“左下角”`
adjustment no 1 {x, y, z} 对于几何图形，中心默认为{0,0,0}位置，这是用于定位和旋转的点。为了从地板计算中获得完美的定位和高度，这可以用标准化单位重新定义，“调整”参数必须以每个轴的单位提供（即“调整：{x:-0.5，y:-0.5，z:0}”，因此模型将校正对象的中心位置减去x轴长度的一半，减去y轴长度的一半）。如果使用此方法创建的立方体的默认中心位于0高度上的混凝土“lnglat”中，则该立方体的一半将位于地面地图标高以下，对象将位于其{x，y}中心，所以你可以定义'adjustment:{x:-0.5，y:-0.5，z:0.5}'来改变中心到左下角，而这个角正好在地平面的'lnglat'位置。
tooltip no false bool 此参数允许有或没有工具提示，默认设置为threeContext.enableTooltips
bbox no false bool 此参数允许有或没有边界框，默认设置为 threeContext.enableSelectingObjects
raycasted no true bool 此参数允许对光线投射单独隐藏对象

# mapToWorld

mapToWorld(coords);
1

地图几何坐标转threejs世界坐标.

# worldToMap

worldToMap(coords);
1

threejs世界坐标转地图几何坐标.

# mapToWorldLength

mapToWorldLength(coords);
1

地图几何长度转threejs世界坐标长度.

# worldToMapLength

worldToMapLength(coords);
1

threejs世界坐标长度转地图几何长度

# getWorldSize

getWorldSize();
1

threejs世界坐标总长度

# loadTexture

loadTexture(img, defaultImg);
1

加载材质，要使用base64图片，返回 THREE.Texture 对象.

# coneMesh

创建一个四棱锥

/**
 * 创建一个四棱锥
 **/
coneMesh(co: GeoPoint, opts?:  {
    size?: number /* 大小，默认 1024 */
    height?: number /* 大小，默认 4096 */
    color?: string | number /* 颜色，默认 0xffcc00 */
    animation?: boolean /* 是否有动画，默认 true */
    animationUpDown?: boolean /* 是否有上升下降动画。默认如果有z值就有动画，默认 true  */
    obj3dOpts?: object /* Object3D选项 */
}): any
1
2
3
4
5
6
7
8
9
10
11

选项参数列表:

选项 必需 类型 说明
size no number 大小，默认 1024
height no number 高，默认 4096
color no string, number 颜色，默认 0xffcc00
animation no boolean 是否有动画，默认 true
animationUpDown no boolean 是否有上升下降动画。默认如果有z值就有动画，默认 true
obj3dOpts no number Object3D选项

# wall

创建一个立体光墙

/**
 * 创建一个立体光墙
 **/
wall(pts: GeoPoint[], opts?:  {
    height?: number /* 立体光墙高度，默认 10000 */
    flyline?: boolean /* 光墙旁边有飞线效果，默认有 */
    repeatX?: number /* 光墙飞线纹理x重复贴图次数，默认 3 */
    repeatY?: number /* 光墙飞线纹理y重复贴图次数，默认 3 */
    offsetX?: number /* 光墙飞线纹理x动画每次偏移值，默认 0.02 */
    offsetY?: number /* 光墙飞线纹理y重复贴图次数，默认 0 */
    color1?: string | number /* 光墙飞线颜色，默认 0xffff00 */
    texture1?: string /* 光墙飞线纹理图片 */
    color2?: string | number /* 立体光墙颜色，默认 0x00ffff */
    texture2?: string /* 立体光墙纹理图片 */
    opacity?: number /* 立体光墙透明度，默认  0.5  */
    obj3dOpts?: object /* Object3D选项 */
}): any
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

选项参数列表:

选项 必需 类型 说明
height no number 立体光墙高度，默认 10000
flyline no boolean 光墙旁边有飞线效果，默认有
repeatX no number 光墙飞线纹理x重复贴图次数，默认 3
repeatY no number 光墙飞线纹理y重复贴图次数，默认 3
offsetX no number 光墙飞线纹理x动画每次偏移值，默认 0.02
offsetY no number 光墙飞线纹理y重复贴图次数，默认 0
color1 no string , number 光墙飞线颜色，默认 0xffff00
texture1 no number 光墙飞线纹理图片
color2 no string , number 立体光墙颜色，默认 0x00ffff
texture2 no number 立体光墙纹理图片
opacity no number 立体光墙透明度，默认 0.5
obj3dOpts no object Object3D选项

# wave

创建一个波动光圈

 /**
 * 创建一个波动光圈
 **/
wave(co: GeoPoint, opts?:  {
    size?: number /* 大小，默认 3413 */
    color?: string | number /* 颜色，默认 0x22ffcc */
    texture?: string /* 波动光圈纹理图片 */
    speed?: number /* 速度，默认 0.4 */
}): any
1
2
3
4
5
6
7
8
9

选项参数列表:

选项 必需 类型 说明
size no number 大小，默认 3413
color no string , number 颜色，默认 0x22ffcc
texture no string 波动光圈纹理图片
speed no number 速度，默认 0.4

# radialGradient

创建一个径向渐变球

  /**
 * 创建一个径向渐变球
 **/
radialGradient(co: GeoPoint, opts?:  {
    size?: number /* 大小，默认 10240 */
    color?: string | number | any/* 颜色，默认 new THREE.Vector3(0.0,1.0,1.0) */
    speed?: number /* 速度，默认 0.02 */
}): any
1
2
3
4
5
6
7
8

选项参数列表:

选项 必需 类型 说明
size no number 大小，默认 10240
color no string , number 颜色，默认 new THREE.Vector3(0.0,1.0,1.0)
speed no number 速度，默认 0.02

# radar

创建一个扫描雷达

/**
 * 创建一个扫描雷达
 **/
radar(co: GeoPoint, opts?:  {
    size?: number /* 大小，默认 20480 */
    color1?: string | number /* 雷达扫描颜色，默认 0x00ffff */
    texture1: string /* 雷达扫描纹理图片 */
    color2?: string | number /* 雷达刻度颜色，默认 0x00cccc */
    texture2: string /* 雷达刻度纹理图片 */
    speed?: number /* 速度，默认 0.02 */
}): any
1
2
3
4
5
6
7
8
9
10
11

选项参数列表:

选项 必需 类型 说明
size no number 大小，默认 20480
color no string , number 雷达扫描颜色，默认 0x00ffff
texture1 yes string 雷达扫描纹理图片
color2 no string , number 雷达刻度颜色，默认 0x00cccc
texture1 yes string 雷达刻度纹理图片
speed no number 速度，默认 0.02

# waveWall

创建一个波动光圈

 /**
 * 创建一个波动光圈
 **/
waveWall(co: GeoPoint, opts?:  {
    size?: number /* 大小，默认 10240  */
    height?: number /* 大小，默认 2000  */
    color?: string | number /* 颜色，默认 0x00ffff */
    texture?: string /* 纹理图片 */
    speed?: number /* 速度，默认 0.1 */
    opacity?: number /* 透明度，默认 0.5 */
}): any
1
2
3
4
5
6
7
8
9
10
11

选项参数列表:

选项 必需 类型 说明
size no number 大小，默认 10240
height no number 高 ，默认 2000
color no string , number 颜色，默认 0x00ffff
texture no string 纹理图片
speed no number 速度，默认 0.1
opacity no number 透明度，默认 0.5

# flyline

创建一条飞行线

 /**
 *  创建一条飞行线
 **/
flyline(opts:  {
    source: GeoPoint, /*  起点 */
        target: GeoPoint /* 终点，*/
    height?: number /* 插值中点值的高度 */
    size?: number /* 粒子大小，默认 3  */
    color: string | number /* 颜色 */
    color2?: string | number /* 如果需要渐变颜色，设置这个值 */
    count?: number /* 粒子总数  默认 1000  */
    range?: number /* 显示粒子的范围数，默认 500  */
    opacity?: number /* 透明度，默认 1.0  */
    speed?: number /* 速度，默认 1  */
}): any
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

选项参数列表:

选项 必需 类型 说明
source yes GeoPoint 起点
target yes GeoPoint 终点
size no number 粒子大小，默认 30
height no number 插值中点值的高度
color yes string , number 颜色
color2 no string , number 如果需要渐变颜色，设置这个值
count no number 粒子总数 默认 1000
range no number 显示粒子的范围数，默认 500
speed no number 速度，默认 1
opacity no number 透明度，默认 1.0

# Object methods


# addCSS2D

obj.addCSS2D(element, objName [, center = obj.anchor, height = 0])
1

这是一种通用方法，它使用收到的Dom Htmlement在屏幕上相对于包含它的对象的相对位置绘制它。 objName 需要命名对象，并可能删除以前的对象。 center定义将渲染标签的位置，默认情况下为对象定位obj.anchor. height 定义此对象位置，其中0为对象底部，1为对象顶部，默认情况下为对象的底部中心（0）。


# addHelp

obj.addHelp(helpText [,objName = helpName, mapSyle = false, center = obj.anchor, height = 0])
1

此方法创建一个类似浏览器的帮助工具提示实例，可通过“obj”访问该实例。救命。此帮助工具提示仅在拖动对象以进行平移、旋转或高度更改时可见。如果“mapStyle”为true，则应用与Map弹出窗口相同的样式。 center 定义将渲染标签的位置，默认情况下为对象定位 obj.anchor. height定义此对象位置，其中0为对象底部，1为对象顶部，默认情况下为对象的底部中心（0）。


# addLabel

obj.addLabel(HTMLElement [, visible, center = obj.anchor, height = 0.5])
1
2

它使用收到的DOM HtmleElement在屏幕上相对于包含它的对象的位置绘制它。 如果“visible”为true，则标签将始终可见，否则默认情况下其值为false，其常规行为仅显示在鼠标上方。 center 定义将渲染标签的位置，默认情况下为对象定位 obj.anchor. height 定义此对象位置，其中0为对象底部，1为对象顶部，默认情况下为对象的中间中心（0.5）.


# addTooltip

obj.addTooltip(tooltipText [, mapSyle = false, center = obj.anchor, custom = true, height = 1])
1

此方法使用tooltipText为对象创建类似浏览器的工具提示。如果“mapStyle”为true，则应用与Map弹出窗口相同的样式。 center 定义将渲染标签的位置，默认情况下为对象定位obj.anchor. custom 除非工具提示是由threeContext自动生成的，否则对于用户显式添加的工具提示，始终为true. height 定义此对象位置，其中0为对象底部，1为对象顶部，默认情况下为对象的顶部中心（1）。


# copyAnchor

obj.copyAnchor(anchor)
1

复制在中内部使用的锚属性obj.duplicate.


# drawBoundingBox

obj.drawBoundingBox
1

此方法使用创建两个边界框 THREE.Box3Helper (opens new window) 第一个边界框将被指定给 obj.boundingBox 属性，第二个将被分配给 obj.boundingBoxShadow.


# drawLabelHTML

obj.drawLabelHTML(HTMLElement [, visible = false, center = obj.anchor])
1
2

它使用接收到的 DOM HTMLElement (opens new window) 将其绘制在屏幕上与包含它的对象的相对位置。 如果 visible 为 true，则标签将始终可见，否则默认情况下其值为 false，并且它的常规行为仅在 MouseOver 上显示。 center 定义了在 3D 对象中通过 options.adjustment 参数定义的对象位置和旋转中心。 由于标签是 根据物体的中心计算，这个值会改变物体的位置。 它的位置始终相对于包含它的对象，并在该标签可见时重新渲染。 在内部，此方法使用由 THREE.CSS2DRenderer (opens new window) 渲染的 CSS2DObject 来创建 THREE.CSS2DObject 的实例，该实例将是 关联到 obj.label 属性。


# duplicate

obj.duplicate()
1

返回对象的克隆。通过重用材料和几何图形，在处理多个相同对象时，性能提高约95%。


# removeCSS2D

obj.removeCSS2D(objName)
1

通过'objName.CSS2DObject'的实例并处置其资源。


# removeHelp

obj.removeHelp()
1

移除 obj.help 中存储的 CSS2DObject 实例。 它在内部调用 obj.removeCSS2D 方法。


# removeLabel

obj.removeLabel()
1

移除 obj.label 中存储的 CSS2DObject 实例。它在内部调用 obj.removeCSS2D 方法。


# removeTooltip

obj.removeTooltip()
1

移除 obj.tooltip 中存储的 CSS2DObject 实例。它在内部调用 obj.removeCSS2D 方法。


# set

obj.set(options)
1

只需一次调用即可更新对象的位置、旋转和缩放的广泛方法。它在内部调用 obj._setObject(options) 方法。如果 options.duration 有值，此方法也可用于为对象设置动画。查看下面的类型部分了解详细信息。

options object on animations (duration > 0)

option required default type description
coords no NA lnglat 将对象移动到的位置
rotation no NA rotationTransform 旋转以设置对象，以度为单位
scale no NA scaleTransform 缩放以设置对象，其中1是默认比例
duration no 1000 number 动画的持续时间，以毫秒为单位，以完成其他属性“缩放”、“旋转”和“坐标”中指定的值。如果为0或未定义，它将直接将值应用于对象，而无需动画。

options object without animations (duration == 0)

option required default type description
position no NA lnglat 将对象移动到的位置
rotation no NA rotationTransform 旋转以设置对象，以度为单位
scale no NA scaleTransform 缩放以设置对象，其中1是默认比例
worldCoordinates no NA Vector3 动画的持续时间，以毫秒为单位，以完成其他属性“缩放”、“旋转”和“坐标”中指定的值。如果为0或未定义，它将直接将值应用于对象，而无需动画。
quaternion no NA [Vector3, radians] 旋转设置为“Vector3”接收的轴，以弧度为单位设置角度
translate no NA lnglat 增量到坐标位置以平移对象。
worldTranslate no NA Vector3 增量到对象世界位置以平移对象。

# setAnchor

obj.setAnchor(anchor)
1

从字符串参数自动设置位置和关键锚点。动态计算位置锚和关键锚anchor是一个字符串值，可以有以下值：top、bottom、left、right、center、top left、top right、bottom left、bottom right`。定位精度的默认值为“左下角”


# setBoundingBoxShadowFloor

obj.setBoundingBoxShadowFloor()
1

每次对象接收到新坐标以将 obj.boundingBoxShadow 定位在地板的高度时，都会从 obj.setCoords 调用此方法。

因此，通过这种方式，如果一个对象改变了它的高度，阴影框总是投影在地板上，拖动它更容易可视化、定位和旋转。


# setCoords

obj.setCoords(lnglat)
1

将对象定位在定义的 lnglat 坐标处，如果它是用 units: "meters" 实例化的，则适当调整其大小。可以在将对象添加到地图之前调用。


# setFixedZoom

obj.setFixedZoom(scale)
1

根据 fixedZoom 值设置用于转换对象的比例。接收到的参数 scale 应该总是等于 map.transform.scale。该方法是从 obj.setScale 和其他加载方法中调用的，因此不需要在 UI 之外单独调用。


# setObjectScale

obj.setObjectScale(scale)
1

设置用于转换对象的比例，考虑对象当前 obj.unitsPerMeter 并取决于对象以 scene 或 meters 为单位。接收到的参数 scale 应该总是等于 map.transform.scale。此方法在内部依次调用 obj.setScale(scale)、obj.setBoundingBoxShadowFloor()、obj.setReceiveShadowFloor()。


# setRotation

obj.setRotation(xyz)
1

在 3 个轴上将对象旋转到其定义的中心，该值必须以度为单位提供，并且可以是数字（它将将旋转应用于 3 个轴）或作为 {x, y, z} 对象。此旋转应用在通过 loadObj(options) 提供的旋转之上。


# setRotationAxis

obj.setRotationAxis(xyz)
1

在 z 轴上的一个底角上旋转对象，该值必须以度为单位提供，并且可以是数字（它将旋转应用于 3 个轴）或作为 {x, y, z} 对象。此旋转应用在通过 loadObj(options) 提供的旋转之上。


# setScale

obj.setScale(scale)
1

设置用于转换对象的比例，考虑对象当前 obj.unitsPerMeter 并取决于对象以 scene 或 meters 为单位。接收到的参数 scale 应该总是等于 map.transform.scale，如果它为 null，则使用 obj.userData.mapScale 代替。此方法在内部调用 obj.setFixedZoom。


# setTranslate

obj.setTranslate(lnglat)
1

将对象从其当前位置移动，添加 lnglat 坐标。不要将此方法与 obj.setCoords 混淆 该方法必须在将对象添加到地图后调用。


# Object properties

在下面的所有示例中，threeContext 对象的实例将始终称为“obj”。

# boundingBox

obj.boundingBox : THREE.Box3Helper
1

此 getset 属性接收并返回一个 THREE.Box3Helper，其中包含初始大小的对象。 boundingBox 表示对象在 MouseOver（黄色）或 Selected（绿色）上时可见。根据 threeContext 的设计，.boundingBox 对于 THREE.Raycaster 是隐藏的，即使它对相机可见。 TODO：在 threeContext 的下一个版本中，此对象材质将是可配置的。在这个版本中仍然在 Objects.prototype 中预定义

# boundingBoxShadow

obj.boundingBoxShadow : THREE.Box3Helper
1

此 getset 属性接收并返回一个 THREE.Box3Helper，其中包含初始大小但高度为 0 的对象，并独立于其高度位置投影到地图的地板上，因此它充当形状的影子。 boundingBoxShadow 表示一旦对象在 MouseOver 上或以黑色选择时可见。根据 threeContext 的设计，.boundingBoxShadow 对于 THREE.Raycaster 是隐藏的，即使它对相机可见。 TODO：在 threeContext 的下一个版本中，此对象材质将是可配置的。在这个版本中仍然在 Objects.prototype 中预定义


# castShadow

obj.castShadow : boolean
1

此 getset 属性接收并返回对象选项的值以投射阴影。它创建一个以对象为中心的具有“THREE.PlaneBufferGeometry”和“THREE.ShadowMaterial()”的平面，以对象的最长维度（x、y、z）大小投影阴影并将其设为 10大几倍，才能容纳完整的影子。


# color

obj.color : integer hex
1

此 getset 属性从十六进制值接收并返回颜色值。此方法调用 color.setHex

# help

obj.help : CSS2DObject
1

此 get 属性返回一个 CSS2DObject THREE.CSS2DObject 值，该值表示由 obj 创建的THREE.Object3D的帮助工具提示.addHelp 方法，在拖动时显示旋转、平移或高度变化的值。尽管这是可访问的，但这是一个内部对象，仅在对象上的拖放操作中可见。


# hidden

obj.hidden : boolean
1

此 getset 属性接收并返回对象隐藏状态的值。此属性覆盖 obj.visibility 的值。


# fixedZoom

obj.fixedZoom : Number
1

此 getset 属性接收并返回低于对象在任何缩放级别具有固定比例的缩放值。超过该值，对象将像往常一样重新缩放。此属性对于需要在非常低的缩放级别上可见的模型（即描述世界航线的飞机）非常有用，但它们也需要在缩放较高时可见。重要的是要知道 fixedZoom 将使用 scene 单位的模型，而不是 meters。

# label

obj.label : CSS2DObject
1

此 get 属性返回一个 CSS2DObject THREE.CSS2DObject 值，该值表示由 `obj. addLabel 方法。标签可以用作在鼠标悬停时显示或始终可见的元素。它通常用于显示对象的属性或状态，并且可以包含任何 HTMLElement。


# modelHeight

obj.modelHeight : Number
1

此 get 属性以米为单位返回对象的高度。

# raycasted

obj.raycasted : boolean
1

如果为 false，此 getset 属性接收并返回一个布尔值以隐藏 THREE.Raycaster 中的 THREE.Object3D 。默认情况下，所有对象对于 raycaster 都是可见的。这个值可以默认通过 threeContext.loadObj 或 threeContext.Object3D 初始化。


# receiveShadow

obj.receiveShadow : boolean
1

此 getset 属性接收并返回接收阴影的对象选项的值。


# tooltip

obj.tooltip : CSS2DObject
1

此 get 属性返回一个 CSS2DObject``THREE.CSS2DObject 值，该值表示由 obj. addTooltip 方法。默认情况下，工具提示显示对象的 uuid 值，并且只有在 threeContext.enableTooltips 为 true 时才可见。


# unitsPerMeter

obj.unitsPerMeter : Number
1

此 get 属性返回对象当前纬度处每米单位的转换值。

# visibility

obj.visibility : boolean
1

此 getset 属性接收并返回一个布尔值以覆盖 THREE.Object3D 的属性 visible，还为 obj.label 和 obj 添加相同的可见性值.tooltip 该属性被 obj.hidden 覆盖，因此如果 obj.hidden 为 false，obj.visibility 将被忽略。根据 threeContext 的设计，.boundingBoxShadow 对于 THREE.Raycaster 是隐藏的，即使它对相机可见。


# wireframe

obj.wireframe : boolean
1

此 getset 属性接收并返回一个布尔值，以在线框或纹理中转换 THREE.Object3D 。根据 threeContext 的设计，只要将对象转换为线框，它也会对 THREE.Raycaster 隐藏，即使它对相机可见。


# Object events

在下面的所有示例中，threeContext 对象的实例将始终称为“obj”

# IsPlayingChanged

obj.addEventListener('IsPlayingChanged', onIsPlayingChanged, false)
1

一旦对象改变其动画播放状态，就会触发此事件，这意味着它将在对象动画开始和停止播放时触发。一旦执行了“threeContext.loadObj”回调方法，就可以随时监听该事件。在 eventArgs.detail 中返回更改的对象的实例。

map.addLayer({
	...
	threeContext.loadObj(options, function (model) {

		soldier = model.setCoords(origin);

		soldier.addEventListener('IsPlayingChanged', onIsPlayingChanged, false);

		threeContext.add(soldier);
	})

	...
});
...
function onIsPlayingChanged(eventArgs) {
	if (e.detail.isPlaying) {
		//do something in the UI such as changing a button state
	}
	else {
		//do something in the UI such as changing a button state
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# ObjectChanged

obj.addEventListener('ObjectChanged', onObjectChanged, false)
1

当对象被任何方法（包括动画）更改时会触发此事件。一旦执行了“threeContext.loadObj”回调方法，就可以随时监听该事件。在 eventArgs.detail 中返回更改的对象实例，对对象执行的操作可能是以下一项或多项： - position：定义为 lnglat + alt 坐标（即 [-122.43471544901193 , 37.73719686062993, 0]), undefined 如果更改不影响位置。 - rotation：定义为 Vector3 格式的弧度（即{x: 0, y: 0, z: -3.026900303641103}），如果更改不影响旋转，则为undefined。 - scale：定义为 Vector3（即{x: 1, y: 1, z: 1}），, undefined 如果更改不影响比例。

map.addLayer({
	...
	threeContext.loadObj(options, function (model) {
		model.setCoords(origin);
		model.addEventListener('ObjectChanged', onObjectChanged, false);
		threeContext.add(model);
	})

	...
});
...
function onObjectChanged(e) {
	let object = e.detail.object; // the object that has changed
	let action = e.detail.action; // the action that defines the change
	//do something in the UI such as changing a button state or updating the new position and rotation
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# ObjectDragged

obj.addEventListener('ObjectDragged', onDraggedObject, false)
1

当一个对象改变被拖放到不同的位置时，该事件被触发，并且只有在 map.once('mouseup' 和 map.once('mouseout' 时触发一次。该事件可以随时监听一次正在执行 threeContext.loadObj 回调方法。在 eventArgs.detail 中返回更改的对象的实例，如果对象已旋转，则在拖动期间所做的操作可能是 "rotate"如果对象已移动到其他位置，则它的中心轴或“平移”“高度”。

map.addLayer({
	...
	threeContext.loadObj(options, function (model) {

		soldier = model.setCoords(origin);

		soldier.addEventListener('ObjectDragged', onDraggedObject, false);

		threeContext.add(soldier);
	})

	...
});
...
function onDraggedObject(e) {
	let draggedObject = e.detail.draggedObject; // the object dragged
	let draggedAction = e.detail.draggedAction; // the action during dragging

	//do something in the UI such as changing a button state or updating the new position and rotation
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# ObjectMouseOver

obj.addEventListener('ObjectMouseOver', onObjectMouseOver, false)
1

当鼠标指针悬停在对象上时会触发此事件。一旦执行了“threeContext.loadObj”回调方法，就可以随时监听该事件。在 eventArgs.detail 中返回更改的对象的实例。

map.addLayer({
	...
	threeContext.loadObj(options, function (model) {

		soldier = model.setCoords(origin);

		soldier.addEventListener('ObjectMouseOver', onObjectMouseOver, false);

		threeContext.add(soldier);
	})

	...
});
...
function onObjectMouseOver(e) {
	//do something in the UI such as adding help or showing this object attributes
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# ObjectMouseOut

obj.addEventListener('ObjectMouseOut', onObjectMouseOut, false)
1

当鼠标指针离开已被越过的对象时触发此事件。一旦执行了“threeContext.loadObj”回调方法，就可以随时监听该事件。在 eventArgs.detail 中返回更改的对象的实例。

map.addLayer({
	...
	threeContext.loadObj(options, function (model) {

		soldier = model.setCoords(origin);

		soldier.addEventListener('ObjectMouseOut', onObjectMouseOut, false);

		threeContext.add(soldier);
	})

	...
});
...
function onObjectMouseOut(e) {
	//do something in the UI such as removing help
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# SelectedChange

obj.addEventListener('SelectedChange', onSelectedChange, false)
1

一旦一个对象改变了它的选择状态，这个事件就会被触发，这意味着它会在一个对象被选中或取消选中时被触发。一旦执行了“threeContext.loadObj”回调方法，就可以随时监听该事件。在 eventArgs.detail 中返回更改的对象的实例。

map.addLayer({
	...
	threeContext.loadObj(options, function (model) {

		soldier = model.setCoords(origin);

		soldier.addEventListener('SelectedChange', onSelectedChange, false);

		threeContext.add(soldier);
	})

	...
});
...
function onSelectedChange(e) {
	let selectedObject = e.detail; //we get the object selected/unselected
	let selectedValue = selectedObject.selected; //we get if the object is selected after the event
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# SelectedFeature

map.on('SelectedFeature', onSelectedFeature)
1

此事件由 threeContext 触发，使用与 map 相同的模式 feature-state select 和 hover TODO 一旦对象改变其选择状态，这意味着它会在对象被选择或未选择时触发。一旦执行了“threeContext.loadObj”回调方法，就可以随时监听该事件。在 eventArgs.detail 中返回更改的对象的实例。

map.addLayer({
	'id': 'room-extrusion',
	'type': 'fill-extrusion',
	'source': 'floorplan',
	'paint': {
	// See the map Style Specification for details on data expressions.
 
	// Get the fill-extrusion-color from the source 'color' property.
	'fill-extrusion-color':
		[
			'case',
			['boolean', ['feature-state', 'select'], false],
			'#ffff00',
			['boolean', ['feature-state', 'hover'], false],
			'#0000ff',
			['get', 'color']
		],
 
	// Get fill-extrusion-height from the source 'height' property.
	'fill-extrusion-height': ['get', 'height'],
 
	// Get fill-extrusion-base from the source 'base_height' property.
	'fill-extrusion-base': ['get', 'base_height'],
 
	// Make extrusions slightly opaque for see through indoor walls.
	'fill-extrusion-opacity': 0.5
}
});
//selected extrusion feature event
map.on('SelectedFeature', onSelectedFeature);
...
function onSelectedFeature(e) {
	let selectedObject = e.detail; //we get the object selected/unselected
	let selectedValue = selectedObject.selected; //we get if the object is selected after the event
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

# Wireframed

obj.addEventListener('Wireframed', onWireframed, false)
1

一旦对象更改其线框状态，就会触发此事件，这意味着它将在对象再次进行线框或纹理化时触发。一旦执行了“threeContext.loadObj”回调方法，就可以随时监听该事件。在 eventArgs.detail 中返回更改的对象的实例。

map.addLayer({
	...
	threeContext.loadObj(options, function (model) {

		soldier = model.setCoords(origin);

		soldier.addEventListener('Wireframed', onWireframed, false);

		threeContext.add(soldier);
	})

	...
});
...
function onWireframed(e) {
	if (e.detail.wireframe) {
		//do something in the UI such as changing a button state
	}
	else {
		//do something in the UI such as changing a button state
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# Object animations

# playDefault

obj.playDefault(options)
1

播放加载的三维模型的默认嵌入动画。

options object

选项 必需 默认 类型 说明
duration no 1000 number 动画的持续时间，以毫秒为单位
speed no 1 number 此值更改“obj”。搅拌机。正在播放的动画的时间刻度，其中1是动画的默认持续时间，<1将使动画变慢，>1将使动画变快

# playAnimation

obj.playAnimation(options)
1

播放加载的三维模型的一个嵌入动画。必须在“选项”属性中设置动画索引。动画`

options object

option required default type description
animation yes NA number 三维模型中动画的索引。如果你需要检查动画的索引，你可以使用'obj'获得完整的数组。动画`。
duration no 1000 number 动画的持续时间，以毫秒为单位
speed no 1 number 此值更改“obj”。搅拌机。正在播放的动画的时间刻度，其中1是动画的默认持续时间，<1将使动画变慢，>1将使动画变快

# followPath

obj.followPath(options [, callback] )
1

沿指定路径平移对象。动画结束时执行的可选回调函数

选项 必需 默认 类型 说明
path yes NA lineGeometry 对象要遵循的路径
duration no 1000 number 沿路径移动的持续时间，以毫秒为单位
trackHeading no true boolean 旋转对象，使其在整个动画中与移动方向保持对齐

# stop

obj.stop()
1

停止对象的所有当前动画。


# threeContext types

# pointGeometry

[longitude, latitude(, meters altitude)]

由2-3个数字组成的数组，代表经度、纬度和可选高度（以米为单位）。如果省略高度，则假定为0。从GeoJson点填充此数组时，可以在点访问此数组。几何学坐标。虽然GeoJson规范中没有标准化海拔高度，但threeContext将接受这样的海拔高度来沿z轴定位对象。


# lineGeometry

[pointGeometry, pointGeometry ... pointGeometry]

由至少两个lnglat组成的阵列，形成一条直线。当从GeoJson行字符串填充此数组时，可以通过Linestring'访问此数组。几何学坐标。


# rotationTransform

number or {x: number, y: number, z: number}

旋转对象的角度（以度为单位）。可以表示为对象或数字。对象形式沿三个主轴采用三个可选参数：x平行于赤道，y平行于纵线，z垂直于地平面。数字形式沿z轴旋转，相当于“{z:number}”。

# scaleTransform

number or {x: number, y: number, z: number} 缩放对象的数量，其中1是默认大小。可以表示为对象或数字。这三个轴与“旋转变换”的轴相同。然而，以数字形式表示时，所有三个轴都会按该数量进行缩放。

# threeMaterial

string or instance of THREE.Material()

表示用于对象的材质。这通常可以通过'color'和'opacity'参数进一步定制，其中的'opacity'参数可以表示为对应材质类型的字符串（例如'THREE.MeshPhysicalMaterial()''的'MeshPhysicalMaterial'，或直接预建的THREE材质。

# Performance considerations

  • 使用obj.duplicate() 当添加许多相同的对象时。如果您的对象包含不在obj.children 的集合，那么这些对象也需要克隆。

threejs具体用法请参考threejs (opens new window)官网

# 示例

亲手试一试


#

(async () => {
    // --threejs 3d线--
    // 地图服务对象
    let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
    // 打开地图
    let res = await svc.openMap({
        mapid: env.exampleMapId, // 地图ID
        mapopenway: vjmap.MapOpenWay.GeomRender, // 以几何数据渲染方式打开
        style: vjmap.openMapDarkStyle() // div为深色背景颜色时，这里也传深色背景样式
    })
    if (res.error) {
        // 如果打开出错
        message.error(res.error)
    }
    // 获取地图范围
    let mapExtent = vjmap.GeoBounds.fromString(res.bounds);
    // 根据地图范围建立几何投影坐标系
    let prj = new vjmap.GeoProjection(mapExtent);

    // 地图对象
    let map = new vjmap.Map({
        container: 'map', // DIV容器ID
        style: svc.rasterStyle(), // 样式，这里是栅格样式
        center: prj.toLngLat(mapExtent.center()),
        zoom: 2,
        pitch: 60,
        antialias:true,
        renderWorldCopies: false // 不显示多屏地图
    });

    // 关联服务对象和投影对象
    map.attach(svc, prj);
    // 根据地图本身范围缩放地图至全图显示
    //map.fitMapBounds();
    await map.onLoad();

    const mapBounds = map.getGeoBounds(0.6);

    if (typeof vjThree !== "object") {
        // 如果没有环境
        await vjmap.addScript([{
            src: "js/plugins/vjthree.min.js"
        },{
            src: "js/plugins/vjthree.min.css"
        }])
    }

    const threeContext = map.createThreeJsContext({
        defaultLights: true
    });
    const arcSegments = 25;
    const lineQuantity = 50;

    for (let i = 0; i < lineQuantity; i++){
        const line = [];
        const destination = [300*(Math.random()-0.5), 140*(Math.random()-0.5)];
        const maxElevation = Math.pow(Math.abs(destination[0]*destination[1]), 0.5) * 80000;

        const increment = destination.map(function(direction){
            return direction/arcSegments;
        })

        for (let l = 0; l<=arcSegments; l++){
            const waypoint = increment.map(function(direction){
                return direction * l
            })

            const waypointElevation = Math.sin(Math.PI*l/arcSegments) * maxElevation;

            waypoint.push(waypointElevation);
            line.push(waypoint);
        }

        const lineOptions = {
            geometry: line,
            color: (line[1][1]/180) * 0xffffff, // color based on latitude of endpoint
            width: Math.random() + 1 // random width between 1 and 2
        }

        let lineMesh = threeContext.line(lineOptions);
        threeContext.add(lineMesh)
    }
    map.addLayer(new vjmap.ThreeLayer({context: threeContext}));
})();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

← L7图层 →