### Handle Mouse Control Start Event (JavaScript)
Source: https://www.esmap.cn/docs/sdk3.0/-tutorial/map-event
Listens for the 'controlstart' event, which fires when a user begins interacting with the 3D scene using mouse controls such as clicking or rotating. This event can be used to prepare the scene or UI for user input.
```javascript
map.on('controlstart', function () {
// 鼠标开始操作三维场景后触发,例如点击、旋转等。
});
```
--------------------------------
### Creating and Adding Effect Markers
Source: https://www.esmap.cn/docs/sdk3.0/-tutorial/effects-marker
Illustrates how to create an instance of an effect marker and add it to an effect layer. This example uses the CIRCLE_ROTATE type but can be adapted for others. A callback function can be provided for actions upon successful creation. The marker is then added to the layer using `layer.addMarker()`.
```javascript
// 创建一个特效标注
var marker = new esmap.ESEffectTool.EffectMarker(esmap.ESMarkerType.CIRCLE_ROTATE, {
x: 12629907.4,
y: 2580180.5,
height: 1,
callback: function(){}
});
layer.addMarker(marker); // 将特效marker添加到特效层
```
--------------------------------
### Include Unified SDK for Indoor Mode - JavaScript
Source: https://www.esmap.cn/docs/sdk3.0/-tutorial/map-upgrade
This snippet shows how to include the unified SDK file for indoor mode in version 3.0. It replaces older specific SDK inclusions with a single, consolidated file.
```html
```
--------------------------------
### 3D Path Planning Initialization and Drawing
Source: https://www.esmap.cn/docs/sdk3.0/-tutorial/map-routeAnalysis
This section details how to initialize the navigation object, set start and end points, and draw the planned route in a 3D scene. It's crucial to call these functions after the 'map.on('loadComplete')' event.
```APIDOC
## POST /websites/esmap_cn_sdk3_0/path-planning
### Description
Initializes the navigation object, sets the start and end points for path planning, and draws the calculated route on the 3D map. This process should be triggered after the map has fully loaded.
### Method
POST
### Endpoint
/websites/esmap_cn_sdk3_0/path-planning
### Parameters
#### Request Body
- **navi_options** (object) - Optional - Configuration for the navigation line style.
- **lineStyle** (object) - Optional - Styles for the navigation line.
- **color** (string) - Optional - Color of the navigation line (e.g., '#33cc61').
- **lineType** (string) - Optional - Type of the navigation line (e.g., 'ESARROW'). Refer to 'Drawing Line Annotation' page for more types.
- **lineWidth** (number) - Optional - Width of the navigation line.
- **offsetHeight** (number) - Optional - Height offset for the navigation line.
- **smooth** (boolean) - Optional - Enables smooth transitions for route turns.
- **seeThrough** (boolean) - Optional - Makes the line always visible, even through floors.
- **noAnimate** (boolean) - Optional - Disables animation effects on the navigation line.
- **godEdgeColor** (string) - Optional - Color for the edge of the line.
- **godArrowColor** (string) - Optional - Color for the arrows on the line.
- **start_point** (object) - Required - Configuration for the starting point.
- **name** (string) - Required - Name of the starting point.
- **x** (number) - Required - X-coordinate of the starting point.
- **y** (number) - Required - Y-coordinate of the starting point.
- **fnum** (number) - Required - Floor number.
- **height** (number) - Required - Height from the ground.
- **url** (string) - Optional - Path to the image marker for the start point.
- **size** (number) - Optional - Size of the image marker.
- **showLevel** (number) - Optional - Zoom level at which the marker becomes hidden.
- **text** (string) - Optional - Text label for the start point.
- **textStyle** (object) - Optional - Styling for the text label.
- **fontSize** (number) - Optional - Font size of the text.
- **fillStyle** (string) - Optional - Fill color of the text.
- **imageStyle** (object) - Optional - Styling for the image marker.
- **align** (string) - Optional - Alignment of the image (e.g., 'bottom').
- **scale** (number) - Optional - Scaling factor for the image.
- **renderOrder** (number) - Optional - Rendering order.
- **pickable** (boolean) - Optional - Whether the marker is clickable.
- **callback** (function) - Optional - Callback function executed when the marker is created.
- **end_point** (object) - Required - Configuration for the ending point (same structure as start_point).
### Request Example
```json
{
"navi_options": {
"lineStyle": {
"color": "#33cc61",
"lineType": "ESARROW",
"lineWidth": 6,
"offsetHeight": 0.5,
"smooth": true,
"seeThrough": false,
"noAnimate": false,
"godEdgeColor": "#920000",
"godArrowColor": "#ff0000"
}
},
"start_point": {
"name": "Start Point 1",
"x": 100,
"y": 200,
"fnum": 1,
"height": 10,
"url": "./image/start.png",
"size": 64,
"showLevel": 23
},
"end_point": {
"name": "End Point 1",
"x": 150,
"y": 250,
"fnum": 1,
"height": 10,
"url": "./image/end.png",
"size": 64,
"showLevel": 23
}
}
```
### Response
#### Success Response (200)
- **route_result** (object) - Contains the calculated path data.
- **navi_descriptions** (array) - Textual descriptions for navigation steps.
#### Response Example
```json
{
"route_result": [
{
"point": {"x": 100, "y": 200, "fnum": 1},
"distance": 0,
"duration": 0
},
{
"point": {"x": 120, "y": 220, "fnum": 1},
"distance": 28.28,
"duration": 5
},
{
"point": {"x": 150, "y": 250, "fnum": 1},
"distance": 70.71,
"duration": 12
}
],
"navi_descriptions": [
"Start at your current location.",
"Proceed straight for 28 meters.",
"Turn slightly right and proceed for 42 meters to reach your destination."
]
}
```
```
--------------------------------
### Include SDKs for City Mode - JavaScript
Source: https://www.esmap.cn/docs/sdk3.0/-tutorial/map-upgrade
Illustrates including the necessary SDK files for city mode in ESMap 3.0. This includes the unified SDK and the `esplugin-tile-3.0.min.js` plugin for tile base map functionality.
```html
// 引入统一SDk文件
// 需使用城市三维场景的瓦片底图功能,添加引入以下文件
```
--------------------------------
### Get Floor Object by Number (JavaScript)
Source: https://www.esmap.cn/docs/sdk3.0/esmap.ESBuilding
Provides an example of how to retrieve a specific floor object from a building using its floor number. The function returns an object representing the floor.
```javascript
var floor = building.getFloor(1)
```
--------------------------------
### ESLineMarker Constructor
Source: https://www.esmap.cn/docs/sdk3.0/esmap.ESLineMarker
Initializes a new ESLineMarker instance with the provided configuration.
```APIDOC
## new ESLineMarker(config)
### Description
Creates a line marker.
### Method
`new`
### Parameters
#### Path Parameters
None
#### Query Parameters
None
#### Request Body
- **config** (object) - Required - Configuration object for the line marker.
- **id** (number | string) - Required - The ID of the line marker.
- **points** (Array) - Required - The collection of points defining the line marker.
- **style** (object) - Required - The style object for the line marker.
### Request Example
```json
{
"config": {
"id": 123,
"points": [[10, 20], [30, 40]],
"style": {
"color": "#FF0000",
"width": 2
}
}
}
```
### Response
#### Success Response (200)
This constructor does not return a value, it initializes the object.
#### Response Example
N/A
```
--------------------------------
### ESNavigation Constructor
Source: https://www.esmap.cn/docs/sdk3.0/esmap.ESNavigation
Initializes a new ESNavigation object with optional configuration settings.
```APIDOC
## new ESNavigation(configs)
### Description
Creates a navigation object.
### Method
Constructor
### Parameters
#### Path Parameters
None
#### Query Parameters
None
#### Request Body
- **configs** (object) - Optional - Configuration object for the navigation.
- **appKey** (string) - Optional - The appKey for calling Gaode 3D scene API.
- **speed** (number) - Optional - Simulated navigation speed. Defaults to 4.
- **followAngle** (boolean) - Optional - Whether to automatically rotate the 3D scene during simulated navigation. Defaults to true.
- **followPosition** (boolean) - Optional - Whether to automatically follow the viewpoint during simulated navigation. Defaults to true.
- **audioPlay** (boolean) - Optional - Whether to play audio. Defaults to false.
- **mode** (number) - Optional - Navigation mode (1: Pedestrian, 2: Vehicle). Defaults to 1.
- **lineStyle** (object) - Optional - Style for the navigation line.
- **scaleAnimate** (boolean) - Optional - Whether to enable zoom animation. Defaults to true.
- **locationMarkerUrl** (string) - Required - URL of the location marker icon.
- **locationMarkerSize** (number) - Optional - Size of the location marker icon. Defaults to 50.
### Request Example
```json
{
"configs": {
"appKey": "YOUR_APP_KEY",
"speed": 5,
"followAngle": false,
"followPosition": false,
"audioPlay": true,
"mode": 2,
"lineStyle": {},
"scaleAnimate": false,
"locationMarkerUrl": "path/to/marker.png",
"locationMarkerSize": 60
}
}
```
### Response
#### Success Response (200)
- **ESNavigation object** - The newly created navigation object.
#### Response Example
```json
{
"message": "ESNavigation object created successfully."
}
```
```
--------------------------------
### Get Building Object
Source: https://www.esmap.cn/docs/sdk3.0/-tutorial/map-attr
Retrieve the building object for indoor scenes. You can get the default building or specify a building by its ID.
```APIDOC
## Get Building Object
### Description
Retrieve the building object for indoor scenes. You can get the default building or specify a building by its ID.
### Method
JavaScript
### Endpoint
N/A (Client-side function)
### Parameters
#### Path Parameters
None
#### Query Parameters
None
#### Request Body
None
### Request Example
```javascript
// Method 1: Get the default Building object in indoor mode
let building = map.getBuilding();
// Method 2: Get Building object by scene ID
let building = map.getBuildingById('test666');
```
### Response
#### Success Response (200)
- **building** (object) - The building object.
#### Response Example
```json
{
"building": "[Building Object]"
}
```
```
--------------------------------
### Set Navigation Start and End Points
Source: https://www.esmap.cn/docs/sdk3.0/-tutorial/map-navi
This code segment illustrates how to define the starting and ending points for navigation. It includes parameters for point names, coordinates, floor number, height, custom marker images, and visibility settings. These methods are typically called after initializing the navigation object.
```javascript
// 确定起点
avi.setStartPoint({
name: '起点1',
x: map.center.x + 10,
y: map.center.y + 10,
fnum: 1, // 楼层
height: 10, // 起点距离地面的高度
url: './image/start.png', // 图片路径,
size: 64, // 图片尺寸
showLevel: 23, // 到达三维场景缩放等级隐藏导航对象
// text: '起点位置', // 场景中展示的文字内容
// textStyle:{
// fontSize: 20, // 字体大小
// fillStyle: '#ff0000', // 填充色
// }
// imageStyle:{
// align:'bottom' // 图片位置
// scale: 1, // 单独设置图片缩放比例
// },
// renderOrder: 79, // 渲染等级
// pickable: false, // 是否可被点击
// callback: (marker)=> {
// console.log(marker) // 输出起点实例
// }
});
// 确定终点
avi.setEndPoint({
name: '终点1',
x: map.center.x - 10,
y: map.center.y - 10,
fnum: 1,
height: 10,
url: './image/end.png',
size: 64,
showLevel: 23,
// text: '终点位置',
// textStyle:{
// fontSize: 20,
// fillStyle: '#ff0000',
// }
// imageStyle:{
// align:'bottom'
// scale: 1,
// },
// renderOrder: 79,
// pickable: false,
// callback: (marker)=> {
// console.log(marker)
// }
});
```
--------------------------------
### ESImageMarker Constructor
Source: https://www.esmap.cn/docs/sdk3.0/esmap.ESImageMarker
Initializes a new ESImageMarker instance with specified options.
```APIDOC
## new ESImageMarker(options)
### Description
Creates an image marker.
### Method
Constructor
### Parameters
#### Path Parameters
None
#### Query Parameters
None
#### Request Body
##### options (object) - Required
Parameters for the image marker.
###### Properties
- **url** (string) - Required - The URL of the image.
- **x** (number) - Required - The x-coordinate.
- **y** (number) - Required - The y-coordinate.
- **z** (number) - Required - The z-coordinate.
- **showLevel** (number) - Required - The display level.
- **size** (number) - Required - The size of the image.
### Request Example
```json
{
"url": "http://example.com/image.png",
"x": 100,
"y": 200,
"z": 10,
"showLevel": 5,
"size": 50
}
```
### Response
#### Success Response (200)
This is a constructor, no direct response.
#### Response Example
N/A
```
--------------------------------
### ESControlOptions Constructor
Source: https://www.esmap.cn/docs/sdk3.0/esmap.ESControlOptions
Initializes a new instance of ESControlOptions with specified configuration options.
```APIDOC
## new ESControlOptions(options)
### Description
Initializes a new instance of ESControlOptions with specified configuration options.
### Method
Constructor
### Endpoint
N/A
### Parameters
#### Path Parameters
None
#### Query Parameters
None
#### Request Body
##### `options` (object) - Required
Control configuration options.
###### Properties
- **`size`** (string) - Optional - Control size.
- **`position`** (esmap.ESControlPositon) - Optional - Control position.
- **`offset`** (object) - Optional - Control offset.
###### Properties
- **`x`** (number) - Optional - Control offset x.
- **`y`** (number) - Optional - Control offset y.
- **`expandSpan`** (string) - Optional - Spacing when the floor expands.
```
--------------------------------
### Get Indoor Building Floor Height
Source: https://www.esmap.cn/docs/sdk3.0/-tutorial/map-attr
Retrieve the height of a specific floor within an indoor building.
```APIDOC
## Get Indoor Building Floor Height
### Description
Retrieve the height of a specific floor within an indoor building.
### Method
JavaScript
### Endpoint
N/A (Client-side method)
### Parameters
#### Path Parameters
None
#### Query Parameters
None
#### Request Body
None
### Request Example
```javascript
const floorHeight = building.getFloorHeight(fnum); // Pass the floor number (fnum)
```
### Response
#### Success Response (200)
- **floorHeight** (number) - The height of the specified floor.
#### Response Example
```json
{
"floorHeight": 3.5
}
```
```
--------------------------------
### Get Floor Boundary Data
Source: https://www.esmap.cn/docs/sdk3.0/-tutorial/map-ordinary
Obtain the boundary data points for a specified floor within an indoor building.
```APIDOC
## Get Floor Boundary Data
### Description
Obtain the boundary data points for a specified floor within an indoor building.
### Method
JavaScript (Function call)
### Endpoint
N/A (Client-side function call)
### Parameters
#### Path Parameters
None
#### Query Parameters
None
#### Request Body
None
### Request Example
```javascript
const floorNumber = 1; // Example: 1st floor
const boundaryPoints = building.getFloorBounds(floorNumber)[0].points;
```
### Response
- **boundaryPoints** (Array