Map

#Map The Map object represents the map on the page. Users can programmatically change the map’s methods, properties, and trigger events. Developers create maps by specifying the container and other optional parameters. Mapmost SDK for WebGL will initialize the map on the page and return the Map object.

new mapmost.Map (options: Object)

Parameters

Name	Type	Description
options	Object	Requiredparameter name type default value description container String|HTMLElement RequiredThe HTML element where the map is placed, or the id of the element. style Object/String RequiredThe style of the map, which must be a JSON object conforming to the pattern described in the mapmost style specification, or a URL to such JSON. userId String RequiredUser authorization code information. antialias Boolean false optionalThe gl context will be created using MSAA anti-aliasing, which is very useful for anti-aliasing of custom layers, but the performance drops significantly after it is turned on. bearing Number 0 optionalThe initial orientation of the map, measured in degrees counterclockwise from north. bounds LngLatBoundsLike null OptionalThe initial bounds of the map, if bounds is specified, it overrides the center and zoom constructor options. center Array [0, 0] optionalThe initial center point of the map. doubleClickZoom Boolean true optionalIf true, the "double-click to zoom map" interactive mode will be enabled. dragPan Boolean true optionalIf true, the "drag and move map" interactive mode will be enabled. dragRotate Boolean true optionalIf true, the "drag and rotate map" interactive mode will be enabled. enableOIT Boolean false optionalThe order of the map has nothing to do with translucent rendering settings. If it is true, it will be turned on. The rendering of transparent material objects will be more accurate. The default is false. It will not be turned on and the map rendering performance will be better. env3D Object optionalparameter name type default value description defaultLights Boolean true optionalWhether the default ambient light is turned on. envMap String optionalEnvironment map url, supports hdr format. exposure Number 1.33 optionalExposure, the value should be greater than 0. interactive Boolean true optionalIf false , the map will not bind monitors for mouse, touch, and keyboard events, so the map will not respond to any user interaction. maxBounds LngLatBoundsLike null optionalIf set, the map will be limited to the given range. maxPitch Number 85 optionalThe maximum tilt angle of the map, which represents the angle between the current line of sight and the top-down line of sight, ranging from 0-135. pitch Number 0 optionalThe initial tilt angle of the map, which represents the angle between the current sight direction and the overlooking sight direction. The range is 0-85. When looking down, the tilt angle is 0. When the "maxPitch" parameter is set, the range is 0-maxPitch. pitchWithRotate Boolean true optionalIf true , the tilt of the map will be controlled while "drag to rotate the map". preserveDrawingBuffer Boolean false optionalIf true , the map canvas can use map.getCanvas().toDataURL(). renderWorldCopies Boolean true optionalIf true , multiple copies of the global map will be rendered when the map is zoomed out. scrollZoom Boolean/Object true optionalIf true, the "scroll wheel zoom map" interactive mode will be enabled. sipsdCopyright String undefined optionalHide copyright information, which is displayed by default. You need to hide it by setting sipsdCopyright: "hidden". sky Enum undefined optionalThe map’s initial sky setting, which defaults to white and supports "basic", "light" and "dark" sky color settings. touchZoomRotate Boolean/Object true optionalIf false, the multi-touch rotation and zoom interaction mode on mobile devices will not be enabled. useWebGL2 Boolean true optionalWhether to enable WebGL2, if false, use WebGL1. viewshedBufferSize Enum 2048 optionalWhen turning on visual domain analysis, set the visual domain buffer size, which supports 512, 1024, 2048, 4096 and 8192. The larger the buffer size, the higher the analysis accuracy, and the more performance will be lost. zoom Number 0 optionalThe initial zoom level of the map. expireTip Boolean true optionalWhether to turn on the authorization expiration pop-up window reminder. authConfig Object optionalIntranet authorization parameters name type default value description authServiceAddress String System default optionalAuthorized service address. authServiceUseSSL Boolean true optionalWhether to use SSL when connecting to the authorization service. pluginAddress String System default OptionalAuthorized plug-in address. authInfoPort Number 39026 optionalAuthorization information port. secretKey Boolean false optionalWhether to enable dongle authorization mode. pollingInterval String 30000 optionalPolling interval, in milliseconds. It takes effect when secretKey is true.

let map = new mapmost.Map({
    container: 'map', // ID of the element
    style: "https://delivery.mapmost.com/cdn/styles/sample_data.json", // Map style URL
    center: [120.71923008473078, 31.29446443371741], // starting coordinates
    zoom: 14, //Start zoom level
    userId: '***' // Authorization code, this parameter must be added since version v3.1.0
});

Refer to Example.

method

addArcGISDynamicLayer

Support loading ArcGIS dynamic layers. There is a performance gap compared to the native framework. Regardless of network speed, the overall loading speed is 1 second slower.

Parameters

Name	Type	Description
id	String	RequiredLayer unique ID.
source	Object	Requiredparameter name type default value description url String RequiredService address, ending with "MapServer". bboxSR String wkid of tile service optionalBounding box coordinate system, cannot be empty, the default value is the wkid of tile service. If the service does not meet the standard service of arcgis, you need to enter it yourself. format String PNG optionalPicture format. imageSR String wkid of the tile service optionalImage coordinate system, cannot be empty, the default value is the wkid of the tile service. If the service does not meet the standard service of arcgis, you need to enter it yourself. layerDefs String optional Layer filter conditions, empty by default. layers String optionalThe displayed layers, display the layer with the specified id through the string "show:id,id,···", if not set, all layers will be displayed by default. transparent Boolean true optionalWhether the image is transparent. resolutions Array optionalTile resolution, obtained by default according to service request, if it does not exist in the service, it will be processed according to Google tile rules. useExtent Boolean true optionalWhen turned on, only the tile data within the fullExtent range of the service parameter is requested; when turned off, the tile data within the screen geographical range is requested. If the data source changes but the metadata fullExtent attribute is not updated, this parameter needs to be turned off.
project	String	RequiredThe coordinate system name of the raster service. "3857", "4326", "4490" and "4528" are supported by default. Other coordinate systems need to be passed in through customization.

Case

map.on('load', function() {
    map.addArcGISDynamicLayer({
        id: 'layer',
        project:'<myproject>', //Coordinate system
        source: {
            url: 'https://IP/***/MapServer', // Service address
            format: 'PNG', // Image format, default is PNG
            layers: 'show:0', // Displayed layers
            transparent: true, // Whether the image is transparent, the default is true
        },
    });
});

Refer to Example 1. Refer to Example 2.

addControl

Add IControl to the map and call control.onAdd(this). This control needs to be added after the map style is loaded.

Parameters

name	type	default value	description
control	IControl		RequiredThe IControl to be added.
position	string	top-right	optionalThe position on the map where the control will be added. Valid values ​​are " " and the default is "top-left", "top-right", "bottom-left", "bottom-right", "top-right" of type string.

Case

map.on('load', function() {
    // Add zoom and rotation controls to the map.
    map.addControl(new mapmost.NavigationControl());
});

addImage

Add image resources to the map style. Can be displayed on the map as icon-image, background-pattern, fill-pattern and line-pattern. If there is not enough space in the sprite to add this image an error will be reported.

map.addImage(id,image,options)

Parameters

Name	Type	Description
id	String	RequiredImage unique ID
image	String	RequiredImage format supports HTMLImageElement, ImageBitmap, StyleImageInterface, ImageData, {width: number, height: number, data: (Uint8Array | Uint8ClampedArray)}
options	Object	optionalparameter name type default value description pixelRatio Number 1 optionalThe ratio of pixels in the image to physical pixels on the screen. sdf Boolean false optionalWhether this image should be interpreted as an SDF image.

Case

// If the map style sprite does not already contain an image with the ID "cat",
// Add the image "cat-icon.png" with the ID "cat" to the map-style sprite.
map.loadImage('path/test1.svg.png', function(error, image) {
   if (error) throw error;
   if (!map.hasImage('cat')) map.addImage('cat', image);
});

// Add a stretchable image that can use `icon-text-fit`
// In this case, the image size is 600*400 pixels.
map.loadImage('path/test2.png', function(error, image) {
   if (error) throw error;
   if (!map.hasImage('border-image')) {
     map.addImage('border-image', image, {
         content: [16, 16, 300, 384], // Place text on the left half of the image, avoiding the 16 pixel border
         stretchX: [[16, 584]], // Stretch everything except the 16 pixel border horizontally
         stretchY: [[16, 384]], // Stretch everything except the 16 pixel border vertically
     });
   }
});

// Define a source and use it to create a new layer
map.addSource('state-data', {
type: 'geojson',
data: 'path/to/data.geojson'
});
 
map.addLayer({
id: 'states',

//Reference the GeoJSON source defined above
// And no need for a `source-layer`
source: 'state-data',
type: 'symbol',
layout: {

// Set the label content to
// attribute’s `name` attribute
"text-field": ['get', 'name']
}
});

addLayer-arc

Arc layers render raised arcs that connect pairs of source and target coordinates.

Parameters

Name	Type	Description
options	Object	Requiredparameter name type default value description data Array RequiredArc chart data, the data format is shown in the case below. id String RequiredLoad the id of the layer and define the unique identifier of the layer. type String RequiredDefine the type of loaded layer, the layer type is "arc". lineWidth Number 1 optionalArc width, the value is a positive number, the unit is meters.
beforeId	String	optionalTo insert the new layer before the existing layer ID, so that the new layer appears below the existing layer. If this parameter is not specified, the layer will be appended to the end of the layers array and displayed visually on top of all other layers.

Case

let data=[{
    from:{
        coordinates:[120,31],
        color:'#ff0000'
    },
    to:{
        coordinates:[121,31],
        color:'#00ff00'
    }
}]
map.addLayer({
    id: "arc-demo",
    type: "arc",
    data: data,
    lineWidth: 20, // Arc width
    });

Refer to Example.

addLayer-basic

Add layers to map styles, including background, circle, line, fill, symbol, raster, fill-extrusion, heatmap and hillshade types.

Parameters

Name	Type	Description
layer	Object	Requiredparameter name type default value description id String RequiredLoad the id of the layer and define the unique identifier of the layer. type String RequiredDefine the type of loaded layer (must be one of "background", "circle", "line", "fill", "symbol", "raster", "fill-extrusion", "heatmap", "hillshade"). filter Array optionalExpression that specifies source feature conditions. If no filter is provided, all features will be displayed. layout Object optionalLayout properties of the layer, please see the map style document for specific parameters. minzoom Number 0 optionalThe minimum zoom level of the layer. When the zoom level is less than minzoom, the layer will be hidden. The value can be any number between 0 and 24, inclusive. If minzoom is not provided, the layer will be visible at all zoom levels for which tiles are available. paint Object optionalThe drawing properties of the layer. Please see the map style document for specific parameters. source Object/String optionalThe data source of the layer, this parameter is optional for custom and background layers. sourceLayer String optionalSpecify the style layer name of layer.source. Applies to vector data sources only, takes effect when layer.source is of type "vector".
beforeId	String	optionalTo insert the new layer before the existing layer ID, so that the new layer appears below the existing layer. If this parameter is not specified, the layer will be appended to the end of the layers array and displayed visually on top of all other layers.

Case

//Add a circle layer with vector source
map.addLayer({
id: 'points-of-interest',
source: {
type: 'vector',
url: 'url'
},
'source-layer': 'poi_label',
type: 'circle',
paint: {
// Mapmost style specification drawing properties
},
layout: {
// Mapmost style specification layout attributes
}
});

// Define a source and use it to create a new layer
map.addSource('state-data', {
type: 'geojson',
data: 'path/to/data.geojson'
});
 
map.addLayer({
id: 'states',
//Reference the GeoJSON source defined above
// And no need for a `source-layer`
source: 'state-data',
type: 'symbol',
layout: {
// Set the label content to
// attribute’s `name` attribute
"text-field": ['get', 'name']
}
});

//Add a new symbol layer before the existing layer
map.addLayer({
    id: 'states',
    //Reference an already defined source
    source: 'state-data',
    type: 'symbol',
    layout: {
    // Set the label content to
    // attribute’s `name` attribute
    "text-field": ['get', 'name']
    }
// Add a layer before the existing `cities` layer
}, 'cities');

addLayer-buildings

Load the 3D architectural thematic layer. Users can build 3D models based on 2D GeoJSON data, or generate customized 3D thematic layers by loading prefabricated building models.

Parameters

Name	Type	Description
layer	Object	Requiredparameter name type default value description data Object RequiredTwo-dimensional GeoJSON data. id String RequiredLoad the id of the layer and define the unique identifier of the layer. type String RequiredDefine the type of loaded layer. The precision model layer type is "buildings". models Array RequiredInitially loaded three-dimensional model resource. Need to set center. center Array [0,0,0] optionalThe WGS84 coordinates of the geographical space where the world origin of the 3D model is located. Required if models are set. Example: [lng,lat,height]. floorHeight Number 4 optionalSet the height of the building floor, effective when showFloor is true. heightProp String optionalThe attribute name representing the height of the building in the GeoJSON data. images Array /String optionalTexture url: If it is two textures, such as ["top.png","wall.png"], it is the top and wall textures in order; if it is a single texture, such as ["material.png"], it is the texture of all faces; if it is a single texture, such as "material.png", it is the wall texture, and the top of the building is solid color, through material settings. material Object optionalMaterial property settings, such as transparency, color, etc. name type description top Object optionalBuilding top texture material property settings. wall Object optionalBuilding wall texture material property settings. proj String 4326 optionalSet the system coordinate system, supports "3857" and "4326". renderPassSync Boolean false optionalSuitable for loading and displaying underground 3D models. When this parameter is turned on, the opaque material model will be rendered before the translucent surface to achieve the correct three-dimensional space effect. However, the rendering performance in this mode will be affected to a certain extent. showFloor Boolean false optionalSet whether the building is divided into floor maps.
beforeId	String	optionalTo insert the new layer before the existing layer ID, so that the new layer appears below the existing layer. If this parameter is not specified, the layer will be appended to the end of the layers array and displayed visually on top of all other layers.

Case

(1) Constructed based on architectural GeoJSON

 let op = {
     id: 'b',
     type: 'buildings',
     proj: '4326',
     data: response,
     images: ['../files/images/top.png', '../files/images/wall.png'],
     heightProp: 'ztykgd',
     material:{
         top:{
             opacity:0.8
         },
         wall:{
             opacity:0.8
         }
     },
 };
 map.addLayer(op);

Refer to Example.

(2) Constructed according to the architectural model

Models need to be made according to a specific process based on vector data.

Model loading test:

• Test equipment: Lenovo R9000P (graphics card is GTX 3070);
• Model loading test: The model built based on 165,797 pieces of building data in Nanjing is stable at more than 58fps after loading.

 let op = {
  id: 'sipsg',
  type: 'buildings',
  images: ['./top.png', './wall_reverse.png'], // Top and wall textures
  models: models_obj,
  center: [120.7464153334825, 31.333162198642274],
};

map.addLayer(op);

Refer to Example.

addLayer-grid

3D grid layers aggregate data into grid-based heat maps. The color and height of a cell depend on the object it contains.

Parameters

Name	Type	Description
options	Object	Requiredparameter name type default value description data Array RequiredGrid chart data is passed in in the form of longitude and latitude, in the form of [[lng,lat],[lng,lat],...]. id String RequiredLoad the id of the layer and define the unique identifier of the layer. type String RequiredDefine the type of loaded layer, the layer type is "grid". cellSize Number 10 optionalThe size of a single square, the value is a positive number, and the unit is meters. colorRange Object optionalThe color range is evenly distributed according to the maximum value. The data is shown in the case below. coverage Number 0.5 optionalThe coverage rate of each square mainly affects the size of a single square, and the value is [0,1]. extrudable Boolean true optionalWhether the square can be stretched. heightMultiplier Number 1 optionalHeight multiple, the value is a positive number. ambientFactor Number 0.22 optionalAmbient light coefficient, range 0-1. directionalFactor Number 0.1 optionalParallel light coefficient, range 0-1.
beforeId	String	optionalTo insert the new layer before the existing layer ID, so that the new layer appears below the existing layer. If this parameter is not specified, the layer will be appended to the end of the layers array and displayed visually on top of all other layers.

Case

map.addLayer({
    id: "grid-demo",
    type: "grid",
    cellSize: 10, //Single square size
    colorRange: {
        0: '#1a9850',
        3: '#9fd568',
        5: '#ffffbf',
        10: '#fd9d62',
        30: '#d73027',
    }, // Color range, key value represents the number of points in a single square
    coverage: 0.5, //The coverage rate of each square mainly affects the size of a single square, and the value is between 0 and 1
    heightMultiplier: 1, // height multiple
    extrudable: true, // Whether it can be pulled up
    ambientFactor: 0.22, // ambient light coefficient
    directionalFactor: 0.1, // Parallel lighting coefficient
    data: data, // data[[lng,lat],[lng,lat],[lng,lat],[lng,lat],...]
});

Refer to Example.

addLayer-heatmap-3d

Load point data and generate a 3D heat map layer.

Parameters

Name	Type	Description
layer	Object	Requiredparameter name type default value description data Array RequiredDefine the input data of the 3D heat map layer, for example data = [[lon,lat,value]], the parameters are longitude, latitude, and attribute value. id String RequiredLoad the id of the layer and define the unique identifier of the layer. type String RequiredDefine the type of loaded layer. The heat map layer type is "heatmap-3d". blur Number 0.85 optionalThe range is [0,1], applied to all point data. The higher the coefficient, the smoother the gradient. coordinates Array optionalDefine the data boundary range of the 3D heat map layer. data must be within the boundary. For example, coordinates = [[lon,lat,alt]], and the parameters are longitude, latitude, and altitude respectively. This activation can be used to update range-wide heatmaps in real time. gradient Object optionalA ribbon object that represents a gradient. If not set, the default style will be used. The default style is shown in the case below. heightRatio Number 100 optionalDefine the 3D heat map stretch height. heightSegments Number 300 optionalThe number of length segments. The larger the value, the more detailed the heat map will be. maxValue Number undefined optionalDefine the maximum weight value in the data set, which is used to normalize color mapping and determine the upper limit of color, corresponding to the value attribute value in the parameter data. minValue Number undefined optionalDefine the minimum weight value in the data set, which is used to normalize color mapping and determine the lower limit of color. It corresponds to the value attribute value in the parameter data. Points with attribute values ​​lower than minValue are not rendered. proj String 4326 optionalDefine the 3D heat map coordinate system, supporting "3857" and "4326". radius Number 6 optionalThe radius of each data point. width Number 256 optionalDefine the width of the 3D heat map layer canvas. widthSegments Number 300 optionalNumber of width segments. The larger the value, the more detailed the heat map will be. depthTest Boolean true optionalWhether to enable depth testing. opacity Number 1 optionalTransparency of the heat map, range: 0-1. speed Number 0 optionalThe 3D heat map initially displays animation speed. The value is greater than 0. When the value is 0, it means turning off the animation. sleep Number 0 optional3D heat map animation delay start time, unit seconds, used in conjunction with speed funcOnAdd Function optionalFunction called when the layer is first loaded. name type description scene Object RequiredThree-dimensional scene related content. funcRender Function optionalFunction called when drawing each frame. name type description gl WebGLRenderingContext RequiredMap gl context. matrix Array RequiredThe camera matrix of the map. callback Function optionalThe callback function executed after the model is loaded, usage: "callback: function (group, layer, updateHeatmap) {}" name type description group Object3D RequiredObject3D object, including a series of methods to operate the model (for specific usage, see the Object3D method in addLayer-model above). layer ModelLayer RequiredInstance of three-dimensional heat map layer. updateHeatmap Function optionalThe heat map update method takes effect together with the coordinates item. For usage, see the case below.
beforeId	String	optionalTo insert the new layer before the existing layer ID, so that the new layer appears below the existing layer. If this parameter is not specified, the layer will be appended to the end of the layers array and displayed visually on top of all other layers.

• Notes: The heatmap.min.js library needs to be introduced through cdn before starting the program.

Case

  <script src="https://delivery.mapmost.com/cdn/sdk/lib/heatmap/heatmap.min.js"></script>

 let op = {
                id: 'heatmap-3d-layer',
                type: 'heatmap-3d',
                data: dataPoints, // dataPoints = [[lon,lat,value]], the parameters are longitude, latitude, attribute value respectively
                width: 256, //Heat map canvas width, default 256
                heightRatio: 200, // 3D heat map stretch height, default 100
                // proj: "3857", // The coordinate system supports "3857" and "4326", and the default is "4326"
                blur: 0.85, // Optional parameter, applied to all point data. The range is [0,1]. The higher the coefficient, the smoother the gradient. The default is 0.85.
                radius: 6, // Radius of each data point, default 6
                gradient: {
                    '0.1': 'rgb(0,102,255)',
                    '0.2': 'rgb(102,255,255)',
                    '0.3': 'rgb(102,255,153)',
                    '0.4': 'rgb(125,255,0)',
                    '0.5': 'rgb(255,255,0)',
                    '0.6': 'rgb(255,204,0)',
                    '0.7': 'rgb(255,128,0)',
                    '0.8': 'rgb(255,102,0)',
                    '0.9': 'rgb(255,0,0)',
                }, // The ribbon object representing the gradient, if not set, the default style will be used
            };

            map.addLayer(op);

Refer to Example 1 3D Heat Map.

Refer to Example 2 3D real-time heat map.

addLayer-hexagon

Load the 3D cellular heat map layer into the map.

Parameters

Name	Type	Description
options	Object	Requiredparameter name type default value description data Array RequiredHoneycomb map data is passed in in the form of longitude and latitude, in the form of [[lng,lat],[lng,lat],...]. id String RequiredLoad the id of the layer and define the unique identifier of the layer. type String RequiredDefine the type of loaded layer, the layer type is "hexagon". colorRange Object optionalThe color range is allocated according to the number of points set. The default data is shown in the case below. coverage Number 0.5 optionalThe coverage rate of each cell group mainly affects the size of a single cell, and the value is [0,1]. heightMultiplier Number 1 optionalHeight multiple, the value is a positive number. radius Number 100 optionalCell radius, in meters. ambientFactor Number 0.22 optionalAmbient light coefficient, range 0-1. directionalFactor Number 0.12 optionalParallel light coefficient, range 0-1.
beforeId	String	optionalTo insert the new layer before the existing layer ID, so that the new layer appears below the existing layer. If this parameter is not specified, the layer will be appended to the end of the layers array and displayed visually on top of all other layers.

Case

map.addLayer({
    id: 'hexagon-layer', // Load the id of the layer and define the unique identifier of the layer
    type: 'hexagon', // Define the type of layer to be loaded. The layer type is `hexagon`
    data: [...], // Honeycomb map data, passed in as latitude and longitude, in the form [[lng,lat],[lng,lat],...]
    colorRange:  {
        0: "#1a9850",
        25: "#9fd568",
        30: "#ffffbf",
        40: "#fd9d62",
        45: "#d73027",
    }, // Color interval, allocated according to the number of points set
    heightMultiplier: 10, // Height multiple, default 1
    radius: 100, // Cell radius in meters, default 100
    coverage: 0.5, //The coverage rate of each cell group mainly affects the size of a single cell. The value is [0,1]], and the default is 0.5
})

Refer to Example.

addLayer-i3s

Load the i3s service in the map.

Parameters

Name	Type	Description
options	Object	Requiredparameter name type default value description id String RequiredLoad the id of the layer and define the unique identifier of the layer. type String RequiredDefine the type of loaded layer, the layer type is "i3s". data String RequiredURL of i3S data resource. project String 3857 optionalSet the model data coordinate system, optional values: "4326", "3857", "4548", "4490", "sz2000". token String undefined optionalData access key. maxPendingCount Number 0 optionalMaximum number of requests waiting. skipLevelOfDetail Boolean false optionalWhether to enable skipping level details, which will improve loading performance. dracoUrl String optionalGeometry compression and decompression library file path, which needs to be configured for intranet/offline deployment. For details, please refer to the decompression library configuration requirements below. material Object optionalparameter name type default value description color String #FFFFFF optionalThe texture color of the material. opacity Number 1 optionalThe opacity of the material. metalness Number 0 optionalMetalness. roughness Number 1 optionalRoughness. alphaTest Number 0.25 optionalTransparency detection, when the texture transparency is less than this value, it will not be rendered. textureFlipY Boolean true optionalTexture Y-axis flip. This parameter is related to whether the Y-axis upward setting is checked when the service is released. If checked, it is true.

Decompression library configuration requirements

1. Download the following resources:

• https://delivery.mapmost.com/cdn/sdk/lib/i3s/draco@4.1.4/dist/libs/draco_decoder.wasm
• https://delivery.mapmost.com/cdn/sdk/lib/i3s/draco@4.1.4/dist/libs/draco_wasm_wrapper.js
• https://delivery.mapmost.com/cdn/sdk/lib/i3s/draco@4.1.4/dist/libs/draco-worker.js

2. The resources must be placed under the '../draco@4.1.4/dist/libs/' file path for release and deployment. For example, the resources are placed under the file path 'i3s/draco@4.1.4/dist/libs/', and the dracoUrl is 'https://***/i3s/'

Refer to Example.

addLayer-model

To load a 3D manual model, users can perform a series of interactive operations on the model, and support gltf, glb, obj and fbx format model loading.

Parameters

Name	Type	Description
layer	Object	Requiredparameter name type default value description id String RequiredLoad the id of the layer and define the unique identifier of the layer. type String RequiredDefine the type of loaded layer. The precision model layer type is "model". center Array [0, 0, 0] optionalSet the geospatial coordinates of the world origin of the 3D model. The coordinate system uses WGS84 coordinates. Required if models are set. Example: [lng, lat, height], if height is default, the default is 0. funcOnAdd Function optionalFunction called when the layer is first loaded. name type description scene Object RequiredThree-dimensional scene related content. funcRender Function optionalFunction called when drawing each frame. name type description gl WebGLRenderingContext RequiredMap gl context. matrix Array RequiredThe camera matrix of the map. models Array optionalInitially loaded 3D model resource. Need to set center. name type description model Object Requiredparameter name type description mtl String RequiredMaterial file path, only valid when type is "obj". type String RequiredModel format, values ​​are "gltf", "glb", "obj", "fbx". url String RequiredModel file path. dracoUrl String optionalDecompression library file path, only valid when type is "glb" and "gltf". ktx2ParseUrl String optional KTX 2.0 texture decompression library file path, only valid when type is "glb" and "gltf". Specific reference example Loading 3D model with KTX 2.0 texture . outline Boolean false optionalWhether to allow model outline highlighting. project String undefined optionalLoaded 3D model coordinate system. The default coordinate system is meters, and the parameter is set to "3857" when loading the EPSG:3857 coordinate system model. renderPassSync Boolean false optional Suitable for loading and displaying underground 3D models. When this parameter is turned on, the opaque material model will be rendered before the translucent surface to achieve the correct three-dimensional space effect. However, the rendering performance in this mode will be affected to a certain extent. Specific reference example Underground 3D model rendering settings . callback Function optionalThe callback function executed after the model is loaded, usage: "callback: function (group, layer) {}" name type description group Object3D RequiredObject3D object, including a series of methods for operating the model (see below for specific usage). layer ModelLayer Required3D layer instance.
beforeId	String	optionalTo insert the new layer before the existing layer ID, so that the new layer appears below the existing layer. If this parameter is not specified, the layer will be appended to the end of the layers array and displayed visually on top of all other layers.

ModelLayer method For specific details, please refer to Document.

Object3D methods

• setCoords: (LngLatLike) (required) Sets the spatial coordinates of the geographical location of the 3D model. The coordinate system uses CGCS2000 coordinates (EPSG:4490) by default.
• setScale: (Number/Object) (optional) Set the scaling ratio of the 3D model on the map, including the scaling ratios along the X, Y, and Z axes, {x:1, y:1, z:1}.
• setRotation: (Number/Object) (optional) Sets the spatial rotation matrix of the 3D model on the map, including the angles of rotation around the X, Y, and Z axes, expressed in degrees.
• setTranslate: (Number/Object) (optional) Sets the spatial translation matrix of the 3D model on the map, including the translation distances to the X, Y, and Z axes respectively, expressed in meters.
• followPath: ({path: LineGeometry, duration: Number},cb) (optional) To set the three-dimensional model to move along the polyline in the ground space, you need to enter the moving polyline path and the playback speed of the moving animation. The duration is in milliseconds. The cb callback function is executed after the animation is executed.
• stop: (optional) Stops the animation of the 3D model moving in ground space.
• addFrame: (color:String,thresholdAngle:Number) (optional) Add the wireframe of the model in the 3D scene. Parameter thresholdAngle Only render edges if the angle (in degrees) between the normals of adjacent faces exceeds this value, the default value is 1 degree.
• removeFrame: (optional) Removes the wireframe of the model in the 3D scene.
• showFrame: (optional) Display the model wireframe added in the 3D scene.
• hideFrame: (optional) Hide the wireframe of the displayed model in the 3D scene.

Model loading test:

• Test equipment: using Dell xps15 notebook (graphics card is GTX 1050Ti);
• White mold loading test: The loading limit is about 1.87G white mold, the number of vertices is 62,831,216, and the number of faces is 25,045,574;
• Precision model loading test: less than 1G, loading performance is affected by model textures.

Model loading suggestions:

• Model format: gltf/glb format model is recommended;
• Model size: It is recommended to split the model into multiple smaller models for loading;
• Model material: It is recommended to use standard material (Standard). The map name and material name of the standard material must be consistent; if a multi-dimensional sub-material is used, the number of multi-dimensional sub-materials should not exceed 13. The map names and material names of the standard materials contained in the multi-dimensional sub-material must be consistent.

Case

    let models_obj = [{
            type: 'glb',
            url: "../files/models/jinji_plaza_eastern_door_building.glb",  
            // dracoUrl: "https://delivery.mapmost.com/cdn/sdk/lib/draco/", //Supports loading geometric compression models. If the intranet is offline, you need to download the following resources to store the locally created draco folder and publish this folder. When using it, you need to pass in the absolute path of the draco folder.
                // https://delivery.mapmost.com/cdn/sdk/lib/draco/draco_decoder.wasm
                // https://delivery.mapmost.com/cdn/sdk/lib/draco/draco_wasm_wrapper.js
                // https://delivery.mapmost.com/cdn/sdk/lib/draco/draco_decoder.js
            // ktx2ParseUrl: "https://delivery.mapmost.com/cdn/sdk/lib/basis/", // Supports loading KTX 2.0 texture model. If you are offline on the intranet, you need to download the following resources to store the locally created basis folder and publish this folder. You need to pass in the absolute path to the basis folder when using it.
                // https://delivery.mapmost.com/cdn/sdk/lib/basis/basis_transcoder.wasm
                // https://delivery.mapmost.com/cdn/sdk/lib/basis/basis_transcoder.js
        }];

    let options = {
        id: 'model_id',
        type: 'model',
        models: models_obj,
        center: [120.67727020663829, 31.31997024841401],
        callback: function (group, layer) {
            // Rotate 90 degrees around the y-axis
            // group.setRotation({y:90});  
            
            // Magnify x/y/z axis by 2 times each
            // group.setScale(2);  
            
            //Add the model to the layer
            // layer.addModel(models_obj,[120.67727020663829, 31.31997024841401]);  
            
            //Click
            // map.on('click',function(e){
            //  let intersect = layer.selectModel(e.point)[0];
            //  if (intersect) {
            //     const obj = intersect.object;
            //    // TODO more
            //  }
            // })
         }
    };
    map.addLayer(options);

Refer to Example.

addLayer-3DGS

Loading Gaussian splatter (3DGS) data in a three-dimensional scene supports loading a single 3DGS model file. The 3DGS model file needs to meet the output requirements of the garden test 3DGS data modeling software. Please contact customer service for details.

Parameters

Name	Type	Description
layer	Object	Requiredparameter name type default value description id String RequiredLoad the id of the layer and define the unique identifier of the layer. type String RequiredDefine the type of loaded layer, the 3DGS layer type is "3DGS". url String Required3DGS model file path, supports splat, ply and sog formats, only supports EPSG:3857 coordinate system. coord Array RequiredThe reference point coordinates of the model, the coordinate system uses WGS84 coordinates, for example: [lng, lat, height]. depthThreshold Number 0 optionalSet the non-critical Gaussian point elimination coefficient. Calculate the ratio of the product of the ellipsoid size and opacity to the distance from the camera. The smaller the ellipsoid size, the lower the opacity. Gaussian points farther away from the camera will have less impact on the overall rendering. When this value is smaller than the elimination coefficient, they will not be rendered. When the value is 0, depth culling is turned off by default, and the range is 0-10000. depthWrite Boolean false optionalControl model depth writing on and off. Turning on depth writing can ensure that close objects correctly block distant objects. If you need to perform three-dimensional measurement and singulation operations on the 3DGS model, you need to turn on depth writing, but it will affect the rendering effect. frustumCulling Boolean flase optionalWhether to turn on frustum culling. colorFactor Object optionalAdjust model color display. name type default value description contrast Number 1.0 optionalContrast, the value range is a real number greater than 0. The specific effects are as follows: when contrast approaches 0, the contrast of the model decreases, the overall tone tends to be darker, and the level of detail weakens; when contrast = 1, the original contrast of the model is maintained; when contrast > 1, the contrast of the model is enhanced, making the picture brighter, with darker parts deeper and bright parts brighter. brightness Number 1.0 optionalBrightness, the value range is a real number greater than 0. The specific effects are as follows: when brightness approaches 0, reduce the brightness and the model becomes darker; when brightness = 1, maintain the original brightness of the model; when brightness > 1, increase the brightness and the model becomes brighter. saturation Number 1.0 optionalSaturation, the value range is a real number greater than 0. The specific effects are as follows: when saturation approaches 0, the model color becomes gray; when saturation = 1, the original color of the model is maintained; when saturation > 1, the model color becomes bright. opacity Number 1.0 optionalOpacity coefficient, the value range is a real number greater than 0, the specific effect is as follows: when opacity approaches 0, reduce the transparency of the model to make it more transparent; when opacity = 1, maintain the original opacity of the model; when opacity > 1, increase the overall transparency of the model, making it more opaque until it is completely opaque. callback Function optionalThe callback function executed after the model is loaded, usage: "callback: function (group, layer) {}" name type description group Object3D RequiredObject3D object, including a series of methods for operating the model (see below for specific usage). layer ModelLayer Required3DGS model layer instance.

Object3D methods

• setScale: (Number/Object) (optional) Set the scaling ratio of the 3D model on the map, including the scaling ratios along the X, Y, and Z axes, {x:1, y:1, z:1}.
• setRotation: (Number/Object) (optional) Sets the spatial rotation matrix of the 3D model on the map, including the angles of rotation around the X, Y, and Z axes, expressed in degrees.
• setTranslate: (Number/Object) (optional) Sets the spatial translation matrix of the 3D model on the map, including the translation distances to the X, Y, and Z axes respectively, expressed in meters.
• setColorFactor: (String,Number) (optional) To dynamically set the model color display, you need to enter the type of color display ('contrast', 'brightness', 'saturation') and the value of the color display.
• setOpacity: (Number) (optional) Dynamically set model transparency.
• setDepthWrite: (Boolean) (optional) Dynamically sets model depth writing on and off.

Case

//Load a single model
map.addLayer(
  {
    id: 'gs-3d-layer1',
    type: '3DGS',
    url: '../models/3dgsModel.splat',
    coord: [120.77692911918348, 31.416181054919676, 10],
    callback: (group, layer) => {
      group.setColorFactor('contrast', 1.6); // Dynamically set model contrast
      group.setColorFactor('brightness', 1.2); // Dynamically set model brightness
      group.setColorFactor('saturation', 1.1); // Dynamically set model saturation
      group.setOpacity(0.1); // Dynamically set model transparency
      group.setDepthWrite(true) // Model depth writing is enabled
    },
  });

Refer to Example 1. Refer to Example 2. Refer to Example 3. Refer to Example 4. Refer to Example 5. Refer to Example 6.

addLayer-MMGS

Loading Gaussian splatter (3DGS) data in a three-dimensional scene supports loading the 3DGS service released by Mapmost Studio v9.6.0-beta. Please contact customer service for details.

Parameters

Name	Type	Description
layer	Object	Requiredparameter name type default value description id String RequiredLoad the id of the layer and define the unique identifier of the layer. type String RequiredDefine the type of loaded layer. The 3DGS layer type is "MMGS". url String Required3DGS model file service address, supports the 3DGS service released by Mapmost Studio v9.6.0-beta, ending with "mmgs.json". coord Array optionalCoordinates of the datum point of the model, the coordinate system uses WGS84 coordinates. Example: [lng, lat, height]. The 3DGS service reads from the service by default, and there is no need to set this parameter. If set, the set reference point coordinates will be used first. depthWrite Boolean false optionalControl model depth writing on and off. Turning on depth writing can ensure that close objects correctly block distant objects. If you need to perform three-dimensional measurement and singulation operations on the 3DGS model, you need to turn on depth writing, but it will affect the rendering effect. frustumCulling Boolean flase optionalWhether to turn on frustum culling. maximumScreenSpaceError Number 2 optionalMaximum screen space error, the value is greater than 0, the smaller the value, the more refined the model loaded at the same level, but the worse the performance. maxCacheNum Number 100 optionalMaximum number of model service tile caches. Set according to client memory. If it is too large, it will increase memory pressure. colorFactor Object optionalAdjust model color display. name type default value description contrast Number 1.0 optionalContrast, the value range is a real number greater than 0. The specific effects are as follows: when contrast approaches 0, the contrast of the model decreases, the overall tone tends to be darker, and the level of detail weakens; when contrast = 1, the original contrast of the model is maintained; when contrast > 1, the contrast of the model is enhanced, making the picture brighter, with darker parts deeper and bright parts brighter. brightness Number 1.0 optionalBrightness, the value range is a real number greater than 0. The specific effects are as follows: when brightness approaches 0, reduce the brightness and the model becomes darker; when brightness = 1, maintain the original brightness of the model; when brightness > 1, increase the brightness and the model becomes brighter. saturation Number 1.0 optionalSaturation, the value range is a real number greater than 0. The specific effects are as follows: when saturation approaches 0, the model color becomes gray; when saturation = 1, the original color of the model is maintained; when saturation > 1, the model color becomes bright. opacity Number 1.0 optionalOpacity coefficient, the value range is a real number greater than 0, the specific effect is as follows: when opacity approaches 0, reduce the transparency of the model to make it more transparent; when opacity = 1, maintain the original opacity of the model; when opacity > 1, increase the overall transparency of the model, making it more opaque until it is completely opaque. callback Function optionalThe callback function executed after the model is loaded, usage: "callback: function (group, layer) {}" name type description group Object3D RequiredObject3D object. layer ModelLayer Required3DGS service layer instance.

Object3D methods

• setColorFactor: (String,Number) (optional) To dynamically set the model color display, you need to enter the type of color display ('contrast', 'brightness', 'saturation') and the value of the color display.
• setOpacity: (Number) (optional) Dynamically set model transparency.
• setDepthWrite: (Boolean) (optional) Dynamically sets model depth writing on and off.

Case

//Load LOD service
map.addLayer({
    id:'gs-3d-layer',
    type:'MMGS',
    url:'http://***/models/15-18_level_splat/mmgs.json',
    maximumScreenSpaceError：1，
    callback: (group, layer) => {
      group.setColorFactor('contrast', 1.6); // Dynamically set model contrast
      group.setColorFactor('brightness', 1.2); // Dynamically set model brightness
      group.setColorFactor('saturation', 1.1); // Dynamically set model saturation
      group.setOpacity(0.1); // Dynamically set model transparency
      group.setDepthWrite(true) // Model depth writing is enabled
    },
});

Refer to Example 1. Refer to Example 2.

addLayer-3DTiles

Load model data from the 3DTiles service into the map, supporting b3dm and pnts formats. In addition, it also supports the BIM service of 3DTiles 1.1 released by CIMRTS and the 3DTiles 1.1 tilt service released by CesiumLab. Note: When loading the 3DTiles 1.1 service, the useBlobMode parameter needs to be turned on.

Parameters

Name	Type	Description
layer	Object	Requiredparameter name type default value description data String RequiredURL of 3DTiles data resource. id String RequiredLoad the id of the layer and define the unique identifier of the layer. type String RequiredDefine the type of loaded layer, the 3DTiles layer type is "3DTiles". maximumScreenSpaceError Number 16 optionalMaximum screen space error parameter, the value is greater than 0, the smaller the value, the more refined the loading model at the same level, but the worse the performance. encoding enums optionalColor space encoding, ktx2.0 texture needs to be set to mapmost.ColorSpace.LinearEncoding skipCoordinateOfConvert Boolean false optionalWhen turned on, the coordinate conversion process can be skipped to improve loading performance. Only data for coordinate processing from the ECEF coordinate system to the Mapmost local coordinate system is supported. useBlobMode Boolean false optionalWhen turned off, the blob request method is not used. When loading the 3DTiles 1.1 service, this parameter needs to be enabled. useFastMode Boolean false optionalWhen turned on, it can speed up the rendering speed of tiles and improve the initial loading time, but there will be small flashes during the rendering process. enableMaxMemoryUsage Boolean false optionalWhether to enable memory management and control memory usage. When turned on, memory usage can be controlled based on the set maxMemoryUsage value. maxMemoryUsage Number 1024 optionalUnit: MB. Effective when enableMaxMemoryUsage is true. Set the maximum cache memory usage, which is used to store the amount of tile data (geometry, texture, etc.) required by the current view. When the cache exceeds this value, less commonly used tiles will be unloaded, and the full screen will be adjusted to display rougher tiles. The larger the value of this parameter, the better the image quality and the lower the performance. It is recommended that users adjust this value according to the actual performance of the device to make a trade-off between image quality and performance. enableDynamicTileAdujst Boolean false optionalWhether to enable tile sharpness adjustment to reduce the sharpness of distant tiles at horizontal viewing angles (camera tilt) to improve performance. The more horizontal the view and the larger the hierarchy, the more obvious the effect. dynamicTileAdjustRange Number 0.001 optionalSet the range of tile blur, effective when enableDynamicTileAdujst is true, range [0-1]. In the horizontal viewing angle, a value of 0 means that the original precision tiles are used in the full screen. A larger value means that the blur range of the tiles from far to near is larger. dynamicTileAdjustFactor Number 24 optionalSet the intensity of tile blur, effective when enableDynamicTileAdujst is true, range [0,+∞]. For horizontal viewing angles, the larger the value, the blurrier the tiles will be. cullRequestsWhileMoving Boolean true optionalWhen turned on, during camera movement, filter out tiles that are not actually used due to camera movement. cullRequestsWhileMovingMultiplier Number 60 optionalUsed to control the intensity of filtering requests when the camera moves, effective when cullRequestsWhileMoving is true, the value is greater than 0. The smaller the value, the fewer tiles are filtered; the larger the value, the more tiles are filtered. Setting this value too high will cause excessive culling of requests when moving, thereby increasing the loading time of some tiles. preloadFlightDestinations Boolean false optionalWhen turned on, the map.flyTo function is called, and the tiles of the flight destination will be requested in advance during the flight. brightness Number 1 optionalLayer brightness. dracoUrl String optional The absolute path of the decompressor file, used to load tilt data containing geometric compression models offline or on the intranet. Specific reference example Loading 3DTiles containing geometry compression . ktx2ParseUrl String optional KTX 2.0 texture decompression library file path. Specific reference example Loading 3DTiles containing KTX 2.0 texture . transform Matrix4 optional Set the spatial position transformation parameters when the 3DTiles data is initially loaded, which can implement operations such as translation, rotation, and scaling of tilt data. For details, refer to the usage of Matrix4 in the Math document. materialOption Object optionalMaterial parameters, only applicable to standard materials name type default value description roughness Number 1 optionalThe roughness of the 3DTiles material. metalness Number 0 optionalThe metallicity of the 3DTiles material. callback Function optionalThe callback function executed after the model is loaded, usage: "callback: function (group, layer) {}" name type description group Object3D RequiredReturns the loaded 3DTiles model object. layer 3DTilesLayer Required3DTiles layer instance.
beforeId	String	optionalTo insert the new layer before the existing layer ID, so that the new layer appears below the existing layer. If this parameter is not specified, the layer will be appended to the end of the layers array and displayed visually on top of all other layers.

3DTilesLayer method For specific details, please refer to Document.

Model loading test

• Test equipment: Lenovo R9000P notebook (memory: 32G, graphics card: GTX 3070);
• Model loading test: area 52.857 square kilometers, file size 49.7G; Note: Compressed textures are not supported yet;

Case

//Create an initialized identity matrix
let matrix = new window.mapmost.Matrix4();
//Add translation rotation transformation
let matrix4 = matrix.translate([0, 0, 200]).rotateX(Math.PI / 2);
//Load 3DTiles
map.addLayer(
    {
        id: 'tile-3d-layer',
        type: "3DTiles",
        data: TILESET_URL,
        transform: matrix4,
        // dracoUrl: "https://delivery.mapmost.com/cdn/sdk/lib/draco/", // Used to load tilt data containing geometric compression models offline or on the intranet.
            //Download the following resources to the newly created draco folder locally and publish this folder. You need to pass in the absolute path of the draco folder when using it.
            //   https://delivery.mapmost.com/cdn/sdk/lib/draco/draco_decoder.wasm
            //   https://delivery.mapmost.com/cdn/sdk/lib/draco/draco_wasm_wrapper.js
            //   https://delivery.mapmost.com/cdn/sdk/lib/draco/draco_decoder.js 
        // ktx2ParseUrl: "https://delivery.mapmost.com/cdn/sdk/lib/basis/", // Used to load the KTX 2.0 texture model offline or on the intranet.
            // Download the following resources to the newly created local basis folder and publish this folder. You need to pass in the absolute path of the basis folder when using it.
            //   https://delivery.mapmost.com/cdn/sdk/lib/basis/basis_transcoder.wasm
            //   https://delivery.mapmost.com/cdn/sdk/lib/basis/basis_transcoder.js
    }
)
// Remove 3DTiles
map.removeLayer('tile-3d-layer')

Refer to Example 1. Refer to Example 2. Refer to Example 3. Refer to Example 4. Refer to Example 5. Refer to Example 6. Refer to Example 7. Refer to Example 8.

addLayer-tree

Load the 3D tree model into the map.

Parameters

Name	Type	Description
options	Object	Requiredparameter name type default value description crownMesh String RequiredURL of the crown model, drc format. id String RequiredLoad the id of the layer and define the unique identifier of the layer. source String Requiredsource data source id. type String RequiredDefine the type of loaded layer, the 3DTiles layer type is "tree". crownColor Array [175,216,142] optionalCrown color array [r,g,b]. levels Array [15,17.5,18.5] optionalControl the visible level array under different zooms according to the data attribute size, the array length is 3. trunkColor Array [219,195,154] optionalTrunk color array [r,g,b]. ambientFactor Number 0.29 optionalAmbient light coefficient, range 0-1. dracoDecoderPath String optionalDecompression library file path. directionalFactor Number 0.1 optionalParallel light coefficient, range 0-1.

Case

//Load 3D tree
const sourceId = "tree-source"
map.addSource(sourceId, {
    type: 'geojson',
    data: '../example_data/treedata.geojson', // Point layer data must have attributes id and size, where size contains "S", "L", and "M" representing small, medium, and large tree models, such as "properties": { "id": 215, "size": "S" }
})
map.addLayer({
    id: 'trees',
    type:'tree',
    source: sourceId,
    trunkColor: [219, 195, 154],
    crownColor: [175, 216, 142],
    crownMesh: 'crown.drc',
})

//Remove 3D tree
map.removeLayer("trees")

Refer to Example.

addLayer-geoVideo

After loading the 3D video fusion layer, the user can perform a series of interactive operations on the video object.

Note: Obtaining parameters related to video fusion requires relying on the video calibration tool. For details, please contact customer service (lower right corner).

Parameters

Name	Type	Description
layer	Object	Requiredparameter name type default value description id String RequiredLoad the id of the layer and define the unique identifier of the layer. cameraData Object/Array[Object] Required The camera parameter object or object group that needs to be added. For details, please refer to the cameraData parameter in the addVideoCameras method. type String RequiredDefine the type of loaded layer. The precision model layer type is "geoVideo". center Array [0, 0, 0] optionalSet the geospatial coordinates of the world origin of the 3D model. The coordinate system uses WGS84 coordinates. Required if models are set. Example: [lng, lat, height], if height is default, the default is 0. funcOnAdd Function optionalFunction called when the layer is first loaded. name type description scene Object RequiredThree-dimensional scene related content. funcRender Function optionalFunction called when drawing each frame. name type description gl WebGLRenderingContext RequiredMap gl context. matrix Array RequiredThe camera matrix of the map. models Array optionalVideo fusion base model resource, center needs to be set. If you do not set this parameter, ensure that the 3D model or 3DTiles has been rendered in the scene. name type description model Object RequiredSingle 3D model resource supports loading of glb, gltf, obj, and fbx types. name type description mtl String RequiredMaterial file path, only valid when type is "obj". type String RequiredModel format, values ​​are "gltf", "glb", "obj", "fbx". url String RequiredModel file path. dracoUrl String optionalDecompression library file path, only valid when type is "glb" and "gltf". project String undefined optionalLoaded 3D model coordinate system. The default coordinate system is meters, and the parameter is set to "3857" when loading the EPSG:3857 coordinate system model. callback Function optionalCallback function executed after the model is loaded name type description geoVideo GeoVideoLayer RequiredVideo fusion layer instance.
beforeId	String	optionalTo insert the new layer before the existing layer ID, so that the new layer appears below the existing layer. If this parameter is not specified, the layer will be appended to the end of the layers array and displayed visually on top of all other layers.

GeoVideoLayer method For specific details, please refer to Document.

• Reference Example-3D Video Projection

addLayer-boxVideo

Load the fisheye camera video fusion layer.

Note: Obtaining parameters related to video fusion requires relying on the video calibration tool. For details, please contact customer service (lower right corner).

Parameters

Name	Type	Description
layer	Object	Requiredparameter name type default value description id String RequiredThe id of the layer, the unique identifier of the layer. cameraData Object/Array[Object] optionalCamera parameter object or object group. name type default value description videoUrl String RequiredVideo source address. width Number RequiredVideo width. height Number RequiredVideo height. videoType Number 1 optionalVideo source format, 0 means mp4, 1 means img, 2 means flv. cameraModel Number 0 optionalDistortion correction type, 0 means no distortion correction, 1 means fisheye distortion correction, 12 means division model distortion correction. fx Number 0 optionalHorizontal pixel scale focal length. fy Number 0 optionalVertical pixel scale focal length. u0 Number 0 optionalLike the horizontal coordinate value of the main point. v0 Number 0 optionalLike the vertical coordinate value of the main point. k1 Number 0 optionalRadial distortion coefficient. k2 Number 0 optionalRadial distortion coefficient. k3 Number 0 optionalRadial distortion coefficient. k4 Number 0 optionalRadial distortion coefficient. fScale Number 1 optionalFocal length scaling coefficient, default 1, the smaller the focal length, the larger the viewing angle, only effective for the fisheye correction model. colorBalance Array [] optional3×4 color correction matrix used for color uniformity, represented by a two-dimensional array, in the shape of [ [ a1, a2, a3, a4], [b1, b2, b3, b4], [c1, c2, c3, c4]]. boxDivision Object 0 optionalVideo plane mapping parameters, including five fixed object attributes: front, back, left, right, bottom. The five attributes are optional, and unspecified planes are not displayed in the cube. name type description front Object optionalThe object attribute parameter of the video plane mapping parameter boxDivision. name type default value description visible Boolean true optionalPlane visibility. maskBox Array[Number] [0,1,0,1] optionalPlane clipping range. Array representation: [xMin, xMax, yMin, yMax], the starting point is the lower left corner of the plane, xMin and xMax represent the starting point proportion and end point proportion of the horizontal cutting of the plane, yMin and yMax represent the starting point proportion and end point proportion of the vertical cutting of the plane, the parameter value range is 0-1. verticalFactor Number 1 optionalThe stretching factor of the vertical video, which stretches the video screen in the vertical direction for the cube plane mapped by the specified anchor point. anchorPoints Array[[Number,Number]] [[0,0],[w,0],[w,h],[0,h]] optionalMapped to the anchor point coordinates of the specified image area on the plane, starting from the lower left corner of the plane, four coordinate pairs specified counterclockwise. The default is the four corner points of the image. The anchor point coordinates are the image coordinates on the undistorted image. cropRange Array [] optionalThe cropping range array of the video screen, retaining the video content within the cropping range, with the lower left corner of the video screen as the coordinate origin [0,0], the X axis is positive to the right, the Y axis is positive upward, the value range is 0-1, and the upper right corner is [1,1]. back Object optionalSame as above. left Object optionalSame as above. right Object optionalSame as above. bottom Object optionalSame as above. boxTransform Object optionalFine-tuning parameters name type description center Array optionalThe center coordinates after fine-tuning. absoluteRotationQuaternion Array optionalAbsolute rotation quaternion after fine-tuning. absoluteScale Number optionalAbsolute scaling factor after fine-tuning. center Array [0, 0, 0] optionalSet the geospatial coordinates of the fisheye camera video origin: [longitude, latitude, height], the coordinate system adopts the WGS84 coordinate system. funcOnAdd Function optionalFunction called when the layer is first loaded. name type description scene Object RequiredThree-dimensional scene related content. funcRender Function optionalFunction called when drawing each frame. name type description gl WebGLRenderingContext RequiredMap gl context. matrix Array RequiredThe camera matrix of the map. callback Function optionalCallback function executed after the model is loaded name type description boxVideo boxVideoLayer RequiredInstance of fisheye camera video fusion layer.

boxVideoLayer method For specific details, please refer to Document.

• Reference Example-Fisheye Camera Video Fusion

addLayer-migrate

The migration map displays the migration trajectory and magnitude of the data dynamically and in real time on the map, allowing you to visually view the source and destination of the data.

Parameters

Name	Type	Description
options	Object	Requiredparameter name type default value description data Array RequiredLayer data, see the case for detailed format. id String RequiredLoad the id of the layer and define the unique identifier of the layer. type String RequiredDefine the type of loaded layer, the layer type is "migrate". pointImgUrl String RequiredURL of motion point image resource. steps Number 400 optionalMovement speed.

Case

  <script src="https://unpkg.com/@turf/turf@6/turf.min.js"></script> 

 // data
let data = { // color: default value '#00eaff'
    arcSet: [
        {
            coords: [[120.70254950835465, 31.34452333816192], [120.72899820084962, 31.339048513540533]],
            color: '#FFFF00'
        },
        {
            coords: [[120.71146083590128, 31.328411691268002], [120.72899820084962, 31.339048513540533]],
            color: '#66FF00',
        },
    ],

    // name: optional; size: default value 1
    pointSet: [
        {
            name: 'Starting point 1',
            coords: [120.70254950835465, 31.34452333816192],
            color: '#FFFF00',
            size: 1
        },
        {
            name: 'Starting point 2',
            coords: [120.71146083590128, 31.328411691268002],
            color: '#66FF00',
            size: 1.2
        },
        {
            name: 'end',
            coords: [120.72899820084962, 31.339048513540533],
            color: '#BBDB88',
            size: 2.3
        },
    ]
  };

map.addLayer({
    id:'test',
    type:'migrate',
    data:data,
    pointImgUrl:'./point.png'
})

Refer to Example.

addLayer-sketch

The 3D graphics drawing layer supports drawing and editing polygons, rectangles and circles. For details, please refer to Example.

Parameters

Name	Type	Description
options	Object	Requiredparameter name type default value description id String RequiredLoad the id of the layer and define the unique identifier of the layer. type String RequiredDefine the type of loaded layer, the layer type is "sketch". editable Boolean true optionalWhether the drawn graphic is editable. fillColor String #D2D418 optionalGraphic fill surface color. fillOpacity Number 0.5 optionalGraphic fill surface opacity, value range is 0.0~1.0. strokeColor String #D2D418 optionalGraphic border line color. strokeWidth Number 3 optionalGraphic border line width, unit is pixels. strokeOpacity Number 1.0 optionalGraphic border line opacity, value range is 0.0~1.0. editStrokeColor String #ff6600 optionalColor of auxiliary box in editing state. callback Function optionalGraphics drawing layer callback function, usage: "callback: function (shapes, layer) {}" name type description shapes Object3D RequiredAll graphic data drawn. layer sketchLayer RequiredGraphic drawing graphics instance. onDrawEnd Function optionalCallback function executed after drawing or editing, usage: "onDrawEnd: function (shape) {}" name type description shapes Object3D RequiredGraphic data that has been drawn or edited.

SketchLayer method For specific details, please refer to Document.

addLayer-trips

A trajectory layer represents the animated path of a vehicle’s journey.

Parameters

Name	Type	Description
options	Object	Requiredparameter name type default value description data Array RequiredTrajectory graph data, the data format is shown in the case below. id String RequiredLoad the id of the layer and define the unique identifier of the layer. type String RequiredDefine the type of loaded layer, the layer type is "trips". pathWidth Number 10 optionalTrack line width, the value is a positive number, the unit is meters. speed Number 1 optionalTime reduction multiple, the value is a positive number. percent Number 0.1 optionalThe proportion of the track line display length, the value is [0-1].
beforeId	String	optionalTo insert the new layer before the existing layer ID, so that the new layer appears below the existing layer. If this parameter is not specified, the layer will be appended to the end of the layers array and displayed visually on top of all other layers.

Case

let data=[{
   coordinates:[[lng,lat],[lng,lat],······],//trajectory data
   times:[2,5,6······], //Point timestamp, unit seconds
   color:"#ff0000", //Trajectory color
   Opacity: 1, //Trajectory opacity, value 0-1
}]

map.addLayer({
    id: "trip-demo",
    type: "trips",
    pathWidth: 10, // track width
    data: data, // trajectory line data
    speed: 20, // Time reduction multiple
});

Refer to Example.

addLight

When adding light sources to a three-dimensional scene, you can add two types of light sources: ambient light and directional light.

Parameters

Name	Type	Description
light	Lights	RequiredInstanced light source.

For details about Lights, please refer to Lights documentation.

Case

//Add ambient light source
let ambientLight = new mapmost.AmbientLight({
    color: '#ffffff',
    intensity: 1
})
map.addLight(ambientLight)

addOnlineVideo

Load real-time video on the map, support hls video stream and flv video stream.

Parameters

Name	Type	Description
options	Object	Requiredparameter name type description coordinates Array RequiredCorner point coordinate array: Specifies that the video container is a two-dimensional or three-dimensional quadrilateral plane, starting from the upper left corner of the video container, clockwise, supporting CGCS2000 coordinates, and a height value needs to be added to the three-dimensional plane. id String RequiredLoad the id of the layer and define the unique identifier of the layer. type String RequiredReal-time video stream type, supports "hls", "flv" and "mp4". url String RequiredLive video url. mask String optionalImage url for feathering/cropping effect. Set the position where feathering/cropping is required by the transparency distribution of picture pixels. The greater the transparency setting, the more obvious the feathering effect will be.

Case

    //Add 2D flat video
    map.addOnlineVideo({
        id: 'test', // Similar to layer id, needs to be unique
        type: 'hls', // hls real-time video stream type
        coordinates: [ // Array of corner point coordinates: starting from the upper left corner of the video, clockwise; CGCS2000 coordinates
            [120.621, 31.295],
            [120.623, 31.295],
            [120.623, 31.293],
            [120.621, 31.293],
        ],
        url: 'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/hls/xgplayer-demo.m3u8' // hls video url
    });
    //Add stereoscopic video
    map.addOnlineVideo({
        id: 'test-3d', // Similar to layer id, needs to be unique
        type: 'flv', // flv real-time video stream type
        coordinates: [ // Array of corner point coordinates: starting from the upper left corner of the video, clockwise; CGCS2000 coordinates
            [120.621, 31.296, 100],
            [120.623, 31.296, 100],
            [120.623, 31.296, 0],
            [120.621, 31.296, 0],
        ],
        url: 'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-720p.flv', // flv video url
    });
    //Add stereoscopic video to add feathering effect
    map.addOnlineVideo({
        id: 'test-3d-mask', // Similar to layer id, needs to be unique
        type: 'flv', // flv real-time video stream type
        coordinates: [ // Array of corner point coordinates: starting from the upper left corner of the video, clockwise; CGCS2000 coordinates
            [120.624, 31.294, 100],
            [120.626, 31.294, 100],
            [120.626, 31.294, 0],
            [120.624, 31.294, 0],
        ],
        mask: "../example_data/images/mask.png",
        url: 'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-720p.flv', // flv video url
    });
   //remove video
    map.removeLayer('test')

Refer to Example.

addPostProcess

Add post-effects to your scene.

Parameters

Name	Type	Description
pv	Instance	RequiredLater instance.

For specific details, refer to PostProcessStageLibrary.

Case

// scattering fog
let pvFog = mapmost.PostProcessStageLibrary.initScatterFog(map);
//Add to scene
map.addPostProcess(pvFog);

addRasterLayer2

Load raster services for various coordinate systems. There is a performance gap between loading ArcGIS services and the native framework. Regardless of network speed, the overall loading speed is 1 second slower. At the same time, only ArcGIS static slicing services using the quadtree slicing scheme are supported.

Parameters

Name	Type	Description
options	Object	Requiredparameter name type description id String RequiredLoad the id of the layer and define the unique identifier of the layer. project String RequiredThe coordinate system name of the raster service. When loading the Gaode map service, this parameter is set to "gaode". source object RequiredMap service resource. name type default value description tiles Array RequiredArray of raster tile urls. extent Array optionallayer tile request range, for example [minx,miny,maxx,maxy] maxZoom Number 25 optionalThe maximum zoom level available for raster tiles. When displaying the map at a higher zoom level, the tile data on maxZoom will be used. minZoom Number 0 optionalThe minimum zoom level available for raster tiles. When displaying the map at a lower zoom level, the tile data on minZoom will be used. origin Array [-180,90] optionalThe starting point of slice calculation. resolutions Array optionalThe resolution of the slice, meaning how much 1px distance on the picture represents the actual distance. tileSize Number 256/512 optionalThe size of each picture in the tiled map, the WMS service default is 512, the WMTS service default is 256. zoomOffset Number 0 optionalLayer zoom offset, please see "zoomOffset Description" below for details. transformRequest Function optionalThe tile service requests the conversion function. For details, please refer to the "transformRequest Description" below. paint object optionalLayer drawing configuration item name type default value description raster-opacity Number 1.0 optionalLayer opacity.

• zoomOffset description

  • First check which level of the full resolution below the resolution of level:0 of ​​the requested tile corresponds to.

    The full resolution is as follows:
        [
            {
                level: 0,
                resolution: 156367.78906250003,
                scale: 590995186.1175001
            },
            {
                level: 1,
                resolution: 78183.89453125001,
                scale: 295497593.05875003
            },
            {
                level: 2,
                resolution: 39091.94726562501,
                scale: 147748796.52937502
            },
            {
                level: 3,
                resolution: 19545.973632812504,
                scale: 73874398.26468751
                },
            {
                level: 4,
                resolution: 9772.986816406252,
                scale: 36937199.132343754
            },
            {
                level: 5,
                resolution: 4886.493408203126,
                scale: 18468599.566171877
            },
            {
                level: 6,
                resolution: 2443.246704101563,
                scale: 9234299.783085939
            },
            {
                level: 7,
                resolution: 1221.6233520507815,
                scale: 4617149.891542969
            },
            {
                level: 8,
                resolution: 610.8116760253907,
                scale: 2308574.9457714846
            },
            {
                level: 9,
                resolution: 305.40583801269537,
                scale: 1154287.4728857423
            },
            {
                level: 10,
                resolution: 152.70291900634768,
                scale: 577143.7364428712
            },
            {
                level: 11,
                resolution: 76.35145950317384,
                scale: 288571.8682214356
            },
            {
                level: 12,
                resolution: 38.17572975158692,
                scale: 144285.9341107178
            },
            {
                level: 13,
                resolution: 19.08786487579346,
                scale: 72142.9670553589
            },
            {
                level: 14,
                resolution: 9.54393243789673,
                scale: 36071.48352767945
            },
            {
                level: 15,
                resolution: 4.771966218948365,
                scale: 18035.741763839724
            },
            {
                level: 16,
                resolution: 2.3859831094741826,
                scale: 9017.870881919862
            },
            {
                level: 17,
                resolution: 1.1929915547370913,
                scale: 4508.935440959931
            },
            {
                level: 18,
                resolution: 0.5964957773685456,
                scale: 2254.4677204799655
            },
            {
                level: 19,
                resolution: 0.2982478886842728,
                scale: 1127.2338602399827
            },
            {
                level: 20,
                resolution: 0.1491239443421364,
                scale: 563.6169301199914
            }
        ]
  • Then set the zoomOffset offset based on that level value. For example, in the figure below, the corresponding resolution of level 0 is 79.375, which is close to the 11th level in the complete level. Then set the parameter zoomOffset: -11.
  

• transformRequest description

  • Take ArcGIS static tile resource file service as an example
  
  • The tile service request conversion function is as follows

        /* Input parameters
           x: OK
           y:column
           z:zoom level
           zoomOffset:offset
        */
        transformRequest: (x, y, z, zoomOffset) => {
            return url
              .replace('{x}', 'C' + x.toString(16).padStart(8, '0'))
              .replace('{y}', 'R' + y.toString(16).padStart(8, '0'))
              .replace('{z}', 'L' + String(z).padStart(2, '0'));
        }

Case

//Load the WMS service of the 4490 coordinate system
    let wms_option = {
        'id': 'wms-test-layer',
        'project': '4490',
        'source': {
            'tiles': [
                'IP:9000/geoserver/geoserver/sip/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&FORMAT=image%2Fpng&TRANSPARENT=true&STYLES&LAYERS=sip%3Asip_road&SRS=EPSG%3A4326&WIDTH=256&HEIGHT=256&BBOX={bbox-epsg-4490}'
            ],
            'tileSize': 256
        }
    }
    map.addRasterLayer2(wms_option)

Refer to Example 1. Refer to Example 2. Refer to Example 3. Refer to Example 4.

addSource

Add a data source to the map style.

map.addSource(id: string,options: Object)

Parameters

Name	Type	Description
id	String	RequiredData source id.
options	Object	RequiredData source properties. name type description data Object/string RequiredData object or URL. type String RequiredData source type.

Case

//Load geojson data
map.addSource('sourceId', {
   type: 'geojson',
   data: {
       "type": "FeatureCollection",
       "features": [{
           "type": "Feature",
           "properties": {},
           "geometry": {
               "type": "Point",
               "coordinates": [
                   -76.53063297271729,
                   39.18174077994108
               ]
           }
       }]
   }
});

//Load geojson url
map.addSource('some id', {
    type: 'geojson',
    data: 'path/data.geojson'
});

Refer to Example.

For detailed usage of addSource, please see Sources documentation.

cameraFlyTo

Change any combination of the camera’s center position, azimuth and tilt to dynamically change it along a curve and trigger a flight effect.

Parameters

Name	Type	Description
options	Object	RequiredDescribes options for conversion targets and dynamic effects. name type default value description duration Number RequiredFlight duration, unit is milliseconds. position Array RequiredThe center point of the camera after the flight is over, an array in the form of [a, b, c]. bearing Number optionalThe bearing of the camera at the end of the flight, measured in degrees clockwise from north. If not specified, this is the current map orientation. complete Function optionalCallback function after the flight ends. distance Number optionalThe distance between the camera and the target center point after the flight is over (>0), the unit is meters. pitch Number 0 optionalThe tilt angle of the map after the flight ends. If not specified, this is the current map tilt angle.

Case

map.on('load', function () {
    let options = {
        id: 'model_id',
        type: 'model',
        callback: function (group, layer) {

            //Create a ball
            let group2 = layer.addPoints({
                type: "sphere",
                size: 1,
                color: 0xffff00,
                opacity: 0.5,
                data: [{
                    coordinate: [120.74603465203592, 31.30605899929158, 20.0]
                }]
            })
        }
    };
    map.addLayer(options);
})

function changeViewer() {
    let options = {
        position: [120.74603465203592, 31.30605899929158, 20.0],
        distance:50,
        pitch: 15,
        bearing: 20,
        duration: 2000,
        complete: function () {   }
    }
    map.cameraFlyTo(options);
}

Refer to Example.

defineProject

Custom coordinate system can be used to load the corresponding raster service through the addRasterLayer2 interface.

Parameters

Name	Type	Description
code	String	RequiredCoordinate system name, the name must be unique and not repeated. Such as "4236", "3857", "myProject", etc.
desc	String	RequiredReference projection parameters of custom projection, generally including name, projection, conversion to WGS84 coordinate system (three parameters, seven parameters), ellipsoid semi-major axis, oblateness, origin latitude, central meridian, two standard latitudes, east offset, north offset and units, etc. Relevant references can be obtained from the https://epsg.io website.

Case

    // Custom coordinate system
    map.defineProject("project0","+proj=tmerc +lat_0=0 +lon_0=120 +k=1 +x_0=40500000 +y_0=0 +ellps=GRS80 +units=m +no_defs +type=crs")
    //Load custom coordinate system raster service
    let option = {
        'id': 'test-layer',
        'project': 'project0',
        'source': {
            'tiles': [
                '<your tiles url>'
            ],
            'tileSize': 256
        }
    }
    map.addRasterLayer2(option)

easeTo

Change the map’s center, zoom level, azimuth, and tilt angles in any combination with animated transitions between old and new values. The map retains its current values ​​for any details not specified in the options.

Parameters

Name	Type	Description
options	Object	RequiredOptions describing conversion targets and dynamic effects.
eventData	Object/null	optionalOther attributes that need to be added to the event object triggered by this method.

Case

// Use the default function to dynamically transform the initial center point within 5 seconds.
map.easeTo({center: [0, 0], zoom: 9, duration: 5000});

// Use the easeTo function.
map.easeTo({
    center: [0, 0],
    zoom: 9,
    speed: 0.2,
    curve: 1,
    duration: 5000,
    easing(t) {
        return t;
    }
});

fitBounds

Pans and zooms the map so that the visible area is contained within the specified geographic range. This is only suitable when an initial value for bounds is provided. If padding is set on the map, the bounds will fit within the inset.

Parameters

Name	Type	Description
bounds	LngLatBoundsLike	RequiredPlace these bounds in the center of the viewport and fit them into the viewport using the highest zoom level, including getMaxZoom().
eventData	Object	optionalOther attributes that need to be added to the event object triggered by this method.
option	Object	optionalIn addition to the following fields, all properties of AnimationOptions and CameraOptions are supported. name type default value description bearing Number 0 optionalThe map azimuth at the end of the animation, in degrees. easing Function optionalEasing parameters of animation transition. linear Boolean false optionalIf true, map transformation uses easeTo. If false, map transformations use flyTo. maxZoom Number optionalThe maximum zoom level allowed when the map view transitions to the specified bounds. offset Array [0,0] OptionalThe center of the given bounds relative to the center of the map, in pixels. padding Number OptionalThe amount of padding to add to the given border, in pixels. pitch Number 0 optionalThe required map pitch angle at the end of the animation, in degrees.

Case

const bbox = [[-79, 43], [-73, 45]];
map.fitBounds(bbox, {
padding: {top: 10, bottom:25, left: 15, right: 5}
});

flyTo

Change any combination of the map center (supports 2D and 3D coordinates), zoom level, azimuth and tilt angle to dynamically change it along a curve and trigger a flight effect. This dynamic transformation seamlessly introduces zooming and panning, allowing users to maintain azimuth even after traversing long distances.

Parameters

Name	Type	Description
options	Object	RequiredDescribes options for conversion targets and dynamic effects. name type default value description bearing Number optionalThe orientation of the map at the end of the flight, measured in degrees clockwise from north. If not specified, this is the current map orientation. center Array [0,0] optionalThe initial center point of the map after the flight. curve Number 1.42 optionalThe scaling curve that appears along with the flight path. To achieve an effect similar to Map#easeTo, a higher zoom value will appear for large movements and a lower zoom value for smaller movements. A value of 1 results in circular motion. maxDuration Number optionalThe maximum duration of the animation, in milliseconds. If the duration exceeds this maximum value, it is reset to 0. minZoom Number 0 optionalThe zoom level starting from 0 at the vertex of the flight path. This option is ignored if options.curve is specified. pitch Number 0 optionalThe tilt angle of the map after the flight ends. If not specified, this is the current map tilt angle. screenSpeed Number optionalIn the case of linear time curve, the average rate of dynamic conversion is calculated according to the number of screenfuls moved per second. This option is ignored if options.speed is specified. speed Number 1.2 optionalThe average rate of dynamic conversion related to options.curve. A rate of 1.2 means that the map moves along the flight path at a speed that is 1.2 times the visible screenful of options.curve per second. screenful refers to the visible screen span area of ​​​​the map, which does not correspond to a fixed physical distance, but changes with the zoom level. zoom Number 0 optionalThe level of the map after the flight ends. If not specified, it is the current map level.

Case

// Use the default function to fly to the initial center point
map.flyTo({center: [0, 0], zoom: 9});
// Use the default function to fly to the initial center point
map.flyTo({center: [0, 0，20], zoom: 9});
//Use flyTo function
map.flyTo({
  center: [0, 0],
  zoom: 9,
  speed: 0.2,
  curve: 1,
  easing(t) {
    return t;
  }
});

getBearing

Returns the current azimuth of the map. Measured in degrees clockwise from north, for example a map azimuth of 90° corresponds to pointing due east.

Case

const bearing = map.getBearing();

getBounds

Returns the geographic boundaries of the map. When the azimuth or tilt angle is non-zero, the visible area is not a rectangle aligned with the axis. It is the minimum boundary that contains the visible area, consisting of two sets of coordinates of the southwest corner and the northeast corner.

Case

const bounds = map.getBounds();

getCameraParameter

Get the current status parameters of the camera, including the camera’s center position, pitch angle and azimuth angle information.

Case

const options = map.getCameraParameter();

Refer to Example.

getCanvas

Returns the map’s "canvas" element.

Case

const canvas = map.getCanvas();

getCanvasContainer

Returns the HTML element containing the map’s <canvas> element. If you want to add non-GL overlays to the map, you should append them to this element.

Case

const canvasContainer = map.getCanvasContainer();

getCenter

Returns the geographical center point of the map.

Case

// Return a latitude and longitude object such as {longitude: 0, latitude: 0}.
const center = map.getCenter();
//Get the latitude and longitude values ​​directly.
const {lng, lat} = map.getCenter();

getContainer

Returns the HTML nested element of the map.

Case

const container = map.getContainer();

getFeatureState

Get the state of the feature. A feature’s state is a set of user-defined key-value pairs that are assigned to the feature at runtime, and the feature is identified by its id attribute.

Parameters

Name	Type	Description
feature	Object	RequiredFeature object returned from Map#queryRenderedFeatures or event handler, can be used as feature identifier. name type description id String/Number RequiredThe unique ID of the feature. Can be an integer or a string, but string values ​​are only supported if the promoteId option is applied to the source or a string can be applied to an integer. source String RequiredThe vector of features or the id of the GeoJSON source. sourceLayer String OptionalFor vector tile sources, sourceLayer is required.

Case

// When the mouse leaves the `my-layer` layer, get the state of the element under the mouse
map.on('mousemove', 'my-layer', (e) => {
    if (e.features.length > 0) {
        map.getFeatureState({
            source: 'my-source',
            sourceLayer: 'my-source-layer',
            id: e.features[0].id
        });
    }
});

getFilter

Returns the filter applied to the specified style layer.

Parameters

Name	Type	Description
layerId	String	RequiredNeed to get the style layer ID of the filter.

Case

const filter = map.getFilter('myLayer');

getHighestPoint

Returns a three-dimensional array representing the coordinates of the highest point adsorbed on the model/scene surface from top to bottom at the current position.

Name	Type	Description
lngLat	Array	RequiredThe two-dimensional space coordinates to be adsorbed.
model		optionalThe model object that needs to be adsorbed, the entire scene will be adsorbed by default.

Case

let Group
map.on('load', () => {
    let options = {
        id: 'model_id',
        type: 'model',
        models: models_obj,
        center: [120.74603465203592, 31.30605899929158, 0.0],
        callback: function (group, layer) {
            Group = group;
            let position = map.getHighestPoint([120.74603465203592, 31.30605899929158], Group);
            console.log(position);
        }
    };
    map.addLayer(options); 
});

Refer to Example.

getLayer

Returns the layer with the specified ID in the map style.

Parameters

Name	Type	Description
id	String	RequiredThe layer ID to be obtained.

Case

const stateDataLayer = map.getLayer('state-data');

getLayoutProperty

Returns the value of the layout property in the specified style layer.

Parameters

Name	Type	Description
layerId	String	RequiredThe ID of the layer from which the layout properties are to be obtained.
name	String	RequiredThe name of the layout attribute to be obtained.

Case

const layoutProperty = map.getLayoutProperty('mySymbolLayer', 'icon-anchor');

getMaxBounds

Returns the maximum geographic extent to which the map is restricted, or null if not set.

Case

const maxBounds = map.getMaxBounds();

getMaxPitch

Returns the maximum pitch angle of the map.

Case

const maxPitch = map.getMaxPitch();

getMaxZoom

Returns the maximum allowed zoom level of the map.

Case

const maxZoom = map.getMaxZoom();

getMinPitch

Returns the minimum pitch angle of the map.

Case

const minPitch = map.getMinPitch();

getMinZoom

Returns the minimum allowed zoom level of the map.

Case

const minZoom = map.getMinZoom();

getPaintProperty

Sets the value of the draw property in the specified style layer.

Parameters

Name	Type	Description
layerId	String	RequiredThe ID of the layer from which to get the drawing properties.
name	String	RequiredThe name of the drawing attribute to be obtained.

Case

const paintProperty = map.getPaintProperty('mySymbolLayer', 'icon-color');

getPitch

Returns the current tilt angle of the map.

Case

const pitch = map.getPitch();

getPosition

Returns the scene coordinates of the mouse pick calculated based on the mouse event object.

Case

const position = map.getPosition(e);

getRenderWorldCopies

Returns the status of renderWorldCopies. If true, multiple copies of the world will be rendered side by side beyond -180 and 180 degrees longitude. If set to false:

• When the map is zoomed out enough so that a single representation of the world cannot fill the entire container of the map, there will be empty areas beyond longitude 180 degrees and -180 degrees.
• At each zoom level, features that span 180 degrees and -180 degrees longitude will be split in half (one part at the right edge of the map, the other at the left edge of the map).

Case

const worldCopiesRendered = map.getRenderWorldCopies();

getSource

Returns the data source for the specified ID in the map style.

Parameters

Name	Type	Description
id	String	RequiredData source ID to be obtained.

Case

const sourceObject = map.getSource('points');

getStyle

Returns the map’s style object, a JSON object that can be used to recreate the map’s style.

Case

map.on('load', () => {
    const styleJson = map.getStyle();
});

getSunPosition

Returns the horizontal azimuth angle and altitude angle parameters of the sun’s rays based on the date and geographical location. The results can be directly used in the shadow effect analysis interface. If the return value is 'null', it means that there is no sun’s rays at that time and location.

Parameters

Name	Type	Description
date	Date/Number	RequiredDate, supports new Date() or millisecond timestamp, namely new Date("2026-02-17 12:00:00") or 1771300800000.
location	Array	RequiredGeographical location, represented by longitude and latitude, in the form of [longitude, latitude].

Case

map.on('load', () => {
    let result = map.getSunPosition( 
        new Date('2026-02-17 12:00:00'),
        [120.67596530766389, 31.321025438743007],
    );
});

getTerrain

Returns the terrain style attribute in the map, or null if none.

Case

map.getTerrain();

getZoom

Returns the current zoom level of the map.

Case

map.getZoom();

hasImage

Check if an image with a specific ID exists in the style.

Parameters

Name	Type	Description
id	String	RequiredImage ID.

Case

// Check if an image with ID 'cat' exists in the style’s sprite.
const catIconExists = map.hasImage('cat');

highlight3DTiles

Highlight 3DTiles models based on attribute values. Highlighting the current model will cancel the highlight effect of the previous model.

Notes: The 3DTiles model needs to meet the same data requirements as the map.query3DTiles interface.

Name	Type	Description
option	Object	Requiredparameter name type default value description layerIds Array RequiredA collection of all layer ids participating in attribute query. propertyName String file optionalThe property name corresponding to the file name of the model needs to be highlighted. propertyValue String/Array RequiredNeed to highlight the attribute value of the model, and support the result obtained by the map.query3DTiles interface for a single value. When highlighting large batches of models, it is recommended to use array input to improve interactive performance. color String #ff0000 optionalHighlight effect color, supports hexadecimal and RGB formats.

Case

map.on('click', (e) => {
    let name = map.query3DTiles({
        point: e.point, // screen coordinates
        layerIds: [
          'tile-3d-layer',
          'tile-3d-layer-1',
          'tile-3d-layer-2',
          'tile-3d-layer-3',
        ], // Collection of all layer ids participating in attribute query
        propertyName: 'file', //The property name corresponding to the model file name
    });

    map.highlight3DTiles({
        layerIds: [
          'tile-3d-layer',
          'tile-3d-layer-1',
          'tile-3d-layer-2',
          'tile-3d-layer-3',
        ], // Collection of all layer ids participating in attribute query
        propertyValue: name, // property value
        color: '#ff0000', // Highlight effect color
    });
})

Refer to the example 3DTiles attribute picking and highlighting.

isMoving

Returns true if the map is panning, zooming, rotating, or tilting.

Case

const isMoving = map.isMoving();

isRotating

Returns true if the map is rotated due to camera animation or user gesture.

Case

map.isRotating();

isSourceLoaded

Returns a Boolean value indicating whether the source is loaded. Returns true if there are no outstanding network requests for the source with the given ID in the map style, false otherwise.

Parameters

Name	Type	Description
id	String	RequiredThe ID of the source to check.

Case

const sourceLoaded = map.isSourceLoaded('bathymetry-data');

isStyleLoaded

Returns a Boolean value indicating whether the map’s styles have been fully loaded.

Case

const styleLoadStatus = map.isStyleLoaded();

isZooming

Returns true if the map is zoomed due to camera animation or user gesture.

Case

const isZooming = map.isZooming();

jumpTo

Change any combination of the map’s center, zoom level, azimuth, and elevation without animated transitions. The map retains its current value for any details not specified in the options.

Parameters

Name	Type	Description
options	Object	RequiredCameraOptions
eventData	Object	optionalOther attributes that need to be added to the event object triggered by this method.

Case

// Jump to the coordinates at the current zoom level
map.jumpTo({center: [0, 0]});
// Jump zoom level, azimuth and tilt angle
map.jumpTo({
    center: [0, 0],
    zoom: 8,
    pitch: 45,
    bearing: 90
});

loadImage

Loads an image from an external URL to be used with Map#addImage. External domains must support CORS.

Parameters

Name	Type	Description
url	String	RequiredURL of the image file. Image files must be in png, webp or jpg format.

Case

// Load image from external URL.
map.loadImage('http://placekitten.com/50/50', (error, image) => {
    if (error) throw error;
    // Add the loaded image with ID 'kitten' to the style sprite.
    map.addImage('kitten', image);
});

moveLayer

Move the layer to a different z-position.

Parameters

Name	Type	Description
id	String	RequiredID of the layer to be moved.
beforeId	String	OptionalExisting layer ID used to insert new layer. If this parameter is omitted, the layer will be added to the end of the layers array.

Case

//Move a layer with the ID 'polygon' in front of the layer with the ID 'country-label'. The `polygon` layer will appear on the map below the `country-label` layer.
map.moveLayer('polygon', 'country-label');

off

Remove the event listener previously added with Map#on.

Parameters

Name	Type	Description
listener	Function	RequiredPreviously installed listener function.
type	String	RequiredThe event type used to install the listener before.
layerId	String	optionalThe layer ID previously used to install the listener. Only used when the layer is of type "background", "circle", "line", "fill", "symbol", "raster", "fill-extrusion", "heatmap" and "hillshade".

Case

//Create a function to print the coordinates when the mouse is moved.
function onMove(e) {
    console.log(`The mouse is moving: ${e.lngLat}`);
}
// Create a function to unbind the `mousemove` event.
function onUp(e) {
    console.log(`The final coordinates are: ${e.lngLat}`);
    map.off('mousemove', onMove);
}
//Bind both functions to mouse events at the same time when clicked.
map.on('mousedown', (e) => {
    map.on('mousemove', onMove);
    map.once('mouseup', onUp);
});

on

Add listeners for specific types of events.

Parameters

Name	Type	Description
listener	Function	RequiredFunction called when the event is triggered.
type	String	RequiredThe event type to listen to, any of the following "mousedown", "mouseup", "click", "dblclick", "mousemove", "mouseenter", "mouseleave", "mouseover", "mouseout", "contextmenu", "touchstart", "touchend" or "touchcancel". "mouseenter" and "mouseover" are triggered when the cursor enters the visible area of ​​the specified layer from outside the map canvas. "mouseleave" and "mouseout" are triggered when the cursor leaves the map canvas or the visible area of ​​the specified layer.
layerId	String	optionalID of the style layer. The listener is only fired when an event occurs on a visible feature of the layer. The event will get a set of features attributes containing matching features. Only used when the layer is of type "background", "circle", "line", "fill", "symbol", "raster", "fill-extrusion", "heatmap" and "hillshade".

Case

// Set up an event listener that fires when the map is loaded.
map.on('load', () => {
    //Add a new layer.
    map.addLayer({
        id: 'points-of-interest',
        source: {
            type: 'vector',
            url: 'mapmost://mapmost.mapmost-streets-v8'
        },
        'source-layer': 'poi_label',
        type: 'circle',
        paint: {
            // Mapmost style specification drawing properties
        },
        layout: {
            // Mapmost style specification layout properties
        }
    });
});

//Set an event listener that is triggered when a feature on the country layer on the map is clicked.
map.on('click', 'countries', (e) => {
    new mapmost.Popup()
        .setLngLat(e.lngLat)
        .setHTML(`Country name: ${e.features[0].properties.name}`)
        .addTo(map);
});

//Set an event listener that is triggered when a feature on the map’s country or background layer is clicked.
map.on('click', ['countries', 'background'], (e) => {
    new mapmost.Popup()
        .setLngLat(e.lngLat)
        .setHTML(`Country name: ${e.features[0].properties.name}`)
        .addTo(map);
});

once

Add a listener that fires only once for a specific type of event. After registration, the listener will be called when the event is triggered for the first time.

Parameters

Name	Type	Description
listener	Function	RequiredThe callback function when the event is triggered for the first time.
type	String	RequiredThe type of event to be monitored.

Case

//Record the coordinates of the user’s first contact with the map.
map.once('touchstart', (e) => {
    console.log(`The first map touch was at: ${e.lnglat}`);
});

panTo

Use animation to pan the map to a specified location.

Parameters

Name	Type	Description
lnglat	LngLatLike	RequiredThe location where the map needs to be moved.
eventData	Object	optionalOther attributes that need to be added to the event object triggered by this method.
options	Object	optionalAnimationOptions

Case

map.panTo([-74, 38]);

// Specify the panTo animation to last 5000 milliseconds.
map.panTo([-74, 38], {duration: 5000});

proj

Coordinate system conversion, internally supports conversion between the four types of coordinate systems "4326", "3857", "4490", "4528", and supports conversion between custom coordinate systems that define projections in the form of strings.

Parameters

Name	Type	Description
fromProj	String	RequiredThe coordinate system that needs to be converted, such as: "4326" or "+proj=longlat +datum=WGS84 +no_defs".
toProj	String	RequiredTarget coordinate system, such as: "3857" or "+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs".
coord	Array	RequiredCoordinate data that needs to be converted.

Case

let coor = map.proj('4326', '3857', [120,31]);
console.log(coor)

queryRenderedFeatures

Returns a GeoJSON Feature object representing visible features that satisfy the query parameters.

Parameters

Name	Type	Description
point	Array	RequiredQuery range.
option	Object	Requiredparameter name type default value description filter Array RequiredFilter to limit query results. layers Array optionalArray of style layer IDs for query checking. Only features in these layers are returned. If this parameter is not defined, all layers will be checked. validate Boolean true optionalWhether to check whether [options.filter] complies with GL style specifications. Disabling verification provides better performance.

Case

// Find all elements of a point
const features = map.queryRenderedFeatures(
  [20, 35],
  {layers: ['my-layer-name']}
);
// Find all features within the static bounding box
const features = map.queryRenderedFeatures(
  [[10, 20], [30, 50]],
  {layers: ['my-layer-name']}
);
// Find all features of the bounding box around a point
const width = 10;
const height = 20;
const features = map.queryRenderedFeatures([
    [point.x - width / 2, point.y - height / 2],
    [point.x + width / 2, point.y + height / 2]
], {layers: ['my-layer-name']});
// Query all rendering elements of a layer
const features = map.queryRenderedFeatures({layers: ['my-layer-name']});

querySourceFeatures

Returns a GeoJSON Feature object representing the features in the specified vector tile or GeoJSON source that satisfy the query parameters.

Parameters

Name	Type	Description
sourceId	String	RequiredData source id.
option	Object	Requiredparameter name type default value description filter Array RequiredFilter to limit query results. sourceLayer Array optionalThe name of the source layer to be queried. This parameter is required for vector tile sources. For GeoJSON sources, it is ignored. validate boolean true optionalWhether to check whether [parameters.filter] complies with GL style specifications. Disabling verification provides better performance.

Case

// Find all features of a source layer in a vector source
const features = map.querySourceFeatures('your-source-id', {
    sourceLayer: 'your-source-layer'
});

query3DTiles

You can query the 3DTiles layer based on the mouse click position and return the attribute values ​​of the corresponding 3DTiles.

Name	Type	Description
option	Object	Requiredparameter name type default value description layerIds Array RequiredA collection of all layer ids participating in attribute query. point Object RequiredScreen coordinates, in the form {x: 902, y: 290}. propertyName String file optionalThe property name corresponding to the model file name.

Note: This interface only satisfies 3DTiles data generated in the following ways

• Tool: CesiumLab

• Raw data: 3D model

• Generation method: In the [Attribute Field] module, the file name of the model is stored in the 3DTiles data attribute. In the [Data Storage] module, the "Storage 3DTiles 1.1" configuration is not used.

  

Case

map.on('click', (e) => {
    let name = map.query3DTiles({
        point: e.point, // screen coordinates
        layerIds: [
          'tile-3d-layer',
          'tile-3d-layer-1',
          'tile-3d-layer-2',
          'tile-3d-layer-3',
        ], // Collection of all layer ids participating in attribute query
        propertyName: 'file', //The property name corresponding to the model file name
    });

    console.log(name)
})

Refer to the example 3DTiles attribute picking and highlighting.

rayPick

Ray picking defines the starting point of the ray and a certain point in the ray direction to obtain the first point where the ray collides with the three-dimensional scene.

Parameters

Name	Type	Description
options	Object	Requiredparameter name type description startPoint Array RequiredThe coordinates of the starting point of the ray, in the form of [longitude, latitude, height]. endPoint Array RequiredThe coordinates of a certain point in the ray direction, in the form of [longitude, latitude, height]. layers Array optionalThe three-dimensional layer that requires ray picking. The default is empty, which is all three-dimensional layers in the entire scene.

Case

let result = map.rayPick({
    startPoint: [120.74215555044185, 31.309756593244074,600],
    endPoint: [120.74215555044185, 31.309756593244074,200],
    layers: [layer3dtiles]
})

console.log(result) // Output the longitude, latitude and altitude of the picked point

Reference example 3D scene ray picking coordinates.

removeControl

Remove the control from the map.

Parameters

Name	Type	Description
control	IControl	RequiredThe IControl to be deleted.

Case

//Define a new navigation control.
const navigation = new mapmost.NavigationControl();
// Add zoom and rotation controls to the map.
map.addControl(navigation);
// Remove the zoom and rotation controls from the map.
map.removeControl(navigation);

removeFeatureState

Remove element state function. If only feature.source is specified, it will remove the state of all features from that source. If feature.id is also specified, it will remove all keys for that feature state. If key is also specified, it simply removes the key from the function’s state.

Parameters

Name	Type	Description
feature	Object	RequiredIt can be a data source, element or a detailed element. Feature object returned from Map#queryRenderedFeatures or event handler, can be used as feature identifier. name type description id String/Number RequiredThe unique ID of the feature. Can be an integer or a string, but string values ​​are only supported if the promoteId option is applied to the source or a string can be applied to an integer. source String RequiredThe vector of the feature or the id of the GeoJSON source. sourceLayer String optionalFor vector tile sources, sourceLayer is required.
key	string	optionalThe key of the functional state to be reset.

Case

//Reset the entire feature state of all features in the `my-source` source
map.removeFeatureState({
    source: 'my-source'
});
// When the mouse leaves the `my-layer` layer, reset the entire functional state of all features under the mouse
map.on('mouseleave', 'my-layer', (e) => {
    map.removeFeatureState({
        source: 'my-source',
        sourceLayer: 'my-source-layer',
        id: e.features[0].id
    });
});
// When the mouse leaves the `my-layer` layer, reset the `hover` key-value pair function of the element under the mouse
map.on('mouseleave', 'my-layer', (e) => {
    map.removeFeatureState({
        source: 'my-source',
        sourceLayer: 'my-source-layer',
        id: e.features[0].id
    }, 'hover');
});

removeImage

Remove an image from a style (such as an image used by icon-image or background-pattern).

Parameters

Name	Type	Description
id	String	RequiredImage ID.

Case

// If the image with ID 'cat' exists in the style’s sprite, delete it.
if (map.hasImage('cat')) map.removeImage('cat');

removeLayer

Removes the layer with the specified ID from the map style. If the specified layer does not exist, the error event will be triggered.

Parameters

Name	Type	Description
id	String	RequiredID of the layer to be removed.

Case

// If there is a layer with ID 'state-data', delete it.
if (map.getLayer('state-data')) map.removeLayer('state-data');

removeLight

Remove light sources from a 3D scene.

Case

//Add directional light source
let directionalLight = new mapmost.DirectionalLight({
    color: '#ffffff',
    intensity: 1,
    position: [0, 0, 1]
})
map.addLight(directionalLight)
//Delete directional light source
map.removeLight(directionalLight)

removeMaskData

Remove mask data.

Case

map.removeMaskData();

removePostProcess

Remove post-effects from the scene.

Parameters

Name	Type	Description
pv	Instance	RequiredLater instance.

For specific details, refer to PostProcessStageLibrary.

Case

// scattering fog
let pvFog = mapmost.PostProcessStageLibrary.initScatterFog(map);
// remove
map.removePostProcess(pvFog);

removeSource

Remove the data source from the map style.

Parameters

Name	Type	Description
id	string	RequiredData source ID to be removed.

Case

map.removeSource('bathymetry-data');

resize

Resizes the map based on the dimensions of its container element. This method must be called after the map’s container has been resized by another script, or after the map is initially hidden by CSS before showing the map.

Parameters

Name	Type	Description
eventData	Object	optionalAdditional properties are added to the event object triggered by this method.

Case

// Resize the map when its string id is shown after initially being hidden by CSS.
const mapDiv = document.getElementById('map');
if (mapDiv.style.visibility === true) map.resize();

setBearing

Sets the azimuth (rotation) of the map.

Parameters

Name	Type	Description
bearing	Number	RequiredThe azimuth angle to be set.
eventData	Object	optionalOther attributes that need to be added to the event object triggered by this method.

Case

// Rotate the map to 90 degrees.
map.setBearing(90);

setBloomEffect

Set scene bloom.

Parameters

Name	Type	Description
enabled	boolean	RequiredSet floodlight on/off status.
options	Object	optionalparameter name type default value description threshold Number 0.4 optionalIndicates the light intensity threshold that generates floodlight. If the light intensity shining on the object is greater than this value, floodlight will be generated, ranging from 0-1. strength Number 2 optionalFlood intensity, range 0-2. radius Number 0.4 optionalThe radius of the flood light, range 0-1.

Case

var bloomOpt =  {
    "threshold": 0.4,
    "strength": 2,
    "radius": 0.4
}
map.setBloomEffect(true, bloomOpt);

Refer to the example 3D scene bloom settings.

setBorder

Set scene ambient occlusion (AO) and stroke effects.

Parameters

Name	Type	Description
enabled	boolean	RequiredSet AO and stroke on/off status.
options	Object	optionalparameter name type default value description color Array [0.78,0.78,0.78,1] optionalStroke color, range 0-1 for each element. blurColor Array [1,1,1,1] optionalAO color, each element range 0-1. blurRadius Number 1.1 optionalStroke radius, value greater than 0. blurIntensity Number 20 optionalStroke intensity, value greater than 0.

Case

var borderOpt = {
    // Stroke color
    "color": [
        0.78,
        0.78,
        0.78,
        1
    ],
    //AO color
    "blurColor": [
        1,
        1,
        1,
        1
    ],
    //stroke radius
    "blurRadius": 1.1,
    //Stroke strength
    "blurIntensity": 20
}
map.setBorder(true, borderOpt)

Refer to the example 3D scene stroke settings.

setCameraParameter

Set the status parameters of the camera angle to realize direct jump of the camera angle.

Parameters

Name	Type	Description
options	Object	Requiredparameter name type description position Array RequiredThe center point of the camera after the flight is over, an array in the form of [a, b, c]. bearing Number optionalThe bearing of the camera after the jump, measured in degrees clockwise from north. If not specified, this is the current map orientation. pitch Number optionalThe tilt angle of the camera after the jump. If not specified, this is the current map tilt angle.

Case

let options = {
    position: [120.65717659715574, 31.315522851509385, 500],
    pitch: 10,
    bearing: 90
}
map.setCameraParameter(options);

Refer to Example.

setCenter

Set the geographical center point of the map. Equivalent to jumpTo({center: center}).

Parameters

Name	Type	Description
center	LngLatLike	RequiredThe center point to be set.
eventData	Object	optionalOther attributes that need to be added to the event object triggered by this method.

Case

map.setCenter([-74, 38]);

setDefaultLight

Turn on and off the default ambient lighting.

Parameters

Name	Type	Description
isOpen	Boolean	RequiredWhether the default ambient light is on.

Case

map.setDefaultLight(false) // Turn off the default environment light;

setEnvMap

Set environment map

Parameters

Name	Type	Description
envUrl	String	RequiredEnvironment map url, supports hdr format.
hdrAngle	Number	RequiredEnvironment map rotation angle, unit is degrees.

Case

map.setEnvMap('./WhiteBG_Ref_1K.hdr', 80);

setExposure

Set exposure

Parameters

Name	Type	Description
exposure	Number	RequiredExposure value, the value is a positive number.

Case

map.setExposure(2.5);

setFeatureState

Set the state of the feature. A feature’s state is a set of user-defined key-value pairs that are assigned to attributes at runtime. When using this method, the state object will be merged with any existing key-value pairs in the function state. This method can only be used on sources with an id attribute. The id attribute can be defined in three ways: For vector or GeoJSON sources, include the id attribute from the original data file. For vector or GeoJSON sources, use the promoteId option when defining the source. For GeoJSON sources, use the generateId option to automatically assign ids based on feature indexes in the source data. If you change feature data using map.getSource('some-id').setData(…) you may need to reapply the state taking into account the updated id value. Note: You can use feature-state expressions to access values ​​in feature-state objects for styling purposes.

Parameters

Name	Type	Description
feature	Object	RequiredFeature object returned from Map#queryRenderedFeatures or event handler, can be used as feature identifier. name type description id String/Number RequiredThe unique ID of the feature. Can be an integer or a string, but string values ​​are only supported if the promoteId option is applied to the source or a string can be applied to an integer. source String RequiredThe id of the feature’s vector tile source or GeoJSON source. sourceLayer String optionalFor vector tile sources, sourceLayer is required.
state	Object	RequiredA set of key-value pairs. These values ​​should be of valid JSON type.

Case

// When the mouse moves to the `my-layer` layer, update the state feature of the element under the mouse
map.on('mousemove', 'my-layer', (e) => {
    if (e.features.length > 0) {
        map.setFeatureState({
            source: 'my-source',
            sourceLayer: 'my-source-layer',
            id: e.features[0].id,
        }, {
            hover: true
        });
    }
});

setFilter

Sets a filter for the specified style layer.

Parameters

Name	Type	Description
filter	Array/null/undefined	RequiredFilter, a filter definition that must comply with the style specification. If null or undefined is provided, the function removes all existing filters from the layer.
layerId	String	RequiredThe ID of the layer to which the filter needs to be applied.
options	Object	optionalparameter name type default value description validate Boolean true optionalWhether to check whether the filter complies with GL’s style definition. Cancel verification performance is better.

Case

//Only display features with the 'name' attribute 'USA'
map.setFilter('my-layer', ['==', ['get', 'name'], 'USA']);

// Only show features with 5 or more 'available-spots'
map.setFilter('bike-docks', ['>=', ['get', 'available-spots'], 5]);

// Delete the filter for the 'bike-docks' style layer
map.setFilter('bike-docks', null);

setLayoutProperty

Sets the value of the layout property in the specified style layer.

Parameters

Name	Type	Description
layerId	String	RequiredThe layer ID in which the layout (layout) property needs to be set.
name	String	RequiredThe name of the layout attribute that needs to be set.
value	String	RequiredThe name of the layout attribute that needs to be set.
options	Object	optionalparameter name type default value description validate Boolean true optionalWhether to check whether value complies with GL style regulations. Cancel verification performance is better.

Case

map.setLayoutProperty('my-layer', 'visibility', 'none');

setLutEffect

Set scene filters.

Parameters

Name	Type	Description
enabled	boolean	RequiredSet the filter on/off status.
options	Object	optionalparameter name type default value description lut String RequiredThe URL address of the filter resource. intensity Number 1 optionalFilter intensity, range 0-1.

Case

map.setLutEffect(true, { //Turn on and off the filter effect
  lut: './35 Free LUTs/0927yrx.CUBE', //CUBE type lut link
  intensity: 1 //Filter intensity
})

Refer to the example 3D scene filter settings.

setMaxBounds

Sets or clears the geographic extent of the map. Panning and zooming operations are limited to these ranges. If you perform a pan or zoom to display an area outside these boundaries, the map will instead display a location and zoom level as close as possible to the operation’s requested while still staying within the boundaries.

Parameters

Name	Type	Description
bounds	LngLatBoundsLike/null/undefined/Array	RequiredThe maximum bounds to be set. If null or undefined, this function removes the map’s maximum bounds.

Case

// Define the boundaries that match the `LngLatBoundsLike` object.
const bounds = [
    [-74.04728, 40.68392], // [West, South]
    [-73.91058, 40.87764] // [East, North]
];
// Set the maximum limit of the map.
map.setMaxBounds(bounds);

setMaskData

Set the raster mask data. The raster mask data is of geojson type. This method only takes effect when raster-mask is set to true.

Parameters

Name	Type	Description
data	Object/String	RequiredSet raster mask data, which is geojson type.

Case

map.setMaskData('test.geojson');

map.addSource('wmts-test-source', {
    'type': 'raster',
    'tiles': [ "<your server url>"],
    'tileSize': 256
});

map.addLayer(
    {
        'id': 'wmts-test-layer',
        'type': 'raster',
        'source': 'wmts-test-source',
        'paint': {
            'raster-mask': true,
        }
    }
);

Refer to Example.

setMaxPitch

Sets or clears the map’s maximum pitch angle. If the map’s current pitch angle is higher than the new maximum, the map will pitch to the new maximum.

Parameters

name	type	default value	description
maxPitch	Number	85	optionalThe maximum pitch angle to be set (0-135). If null or undefine , this function deletes the current maximum pitch angle and resets it to 85.

Case

map.setMaxPitch(70);

setMaxZoom

Sets or clears the map’s maximum zoom level. If the map’s current zoom level is higher than the new maximum, the map will zoom to the new maximum.

Parameters

name	type	default value	description
maxZoom	Number	22	optionalThe maximum zoom level to be set. If null or undefined , this function removes the current maximum zoom and sets it to 22.

Case

map.setMaxZoom(18.75);

setMinPitch

Sets or clears the map’s minimum pitch angle. If the map’s current pitch angle is below the new minimum, the map will pitch to the new minimum.

Parameters

name	type	default value	description
minPitch	Number	0	optionalMinimum pitch angle to be set (0-135). If null or undefined , this function deletes the current minimum pitch angle and resets it to 0.

Case

map.setMinPitch(5);

setMinZoom

Sets or clears the map’s minimum zoom level. If the map’s current zoom level is below the new minimum, the map will zoom to the new minimum. It is not always possible to zoom out and reach the set minZoom. Other factors such as map height may limit zooming. For example, if the map’s height is 512 pixels, you will not be able to zoom below zoom 0, no matter what minZoom is set to.

Parameters

name	type	default value	description
minZoom	Number	-2	optionalMinimum zoom level to set (-2 - 24). If null or undefined , the function removes the current minimum zoom and sets it to -2.

Case

map.setMinZoom(12.25);

setPaintProperty

Sets the value of the draw property in the specified style layer.

Parameters

Name	Type	Description
layerId	String	RequiredThe ID of the layer on which to set the drawing properties.
name	String	RequiredThe name of the drawing attribute to be set.
value	Any	RequiredThe value of the drawing attribute to be set. Must be of a suitable type for this property, as defined in the Style Specification.
option	Object	optionalparameter name type default value description validate Boolean true optionalWhether to check whether value conforms to the style specification. Cancel verification performance is better.

Case

map.setPaintProperty('my-layer', 'fill-color', '#faafee');

setPitch

Set the tilt angle of the map. Equivalent to jumpTo({pitch: pitch}).

Parameters

Name	Type	Description
pitch	Number	RequiredThe tilt angle to be set (0-135).
eventData	Object	optionalOther attributes that need to be added to the event object triggered by this method.

Case

// Use a 2-second animation to set the tilt angle of the map.
map.setPitch(80, {duration: 2000});

setRenderWorldCopies

Set the state of renderWorldCopies.

Parameters

name	type	default value	description
renderWorldCopies	Boolean	true	optionalIf true, multiple copies of the world will be rendered side by side beyond -180 and 180 degrees longitude. If set to false, when the map is zoomed out enough that a single representation of the world cannot fill the entire container of the map, there will be empty areas beyond longitude 180 and -180 degrees. At each zoom level, features that span 180 degrees and -180 degrees longitude will be split in half (one part at the right edge of the map, the other at the left edge of the map).

Case

map.setRenderWorldCopies(true);

setStyle

A Mapmost style object that updates the map with the new values. If a style has been set when used and the diff option is set to true, the map renderer will attempt to compare the given style to the current state of the map and perform only the changes required to make the map style match the desired state. Changes to sprites (images used for icons and patterns) and glyphs (fonts used for label text) are indistinguishable. If there are any differences between the current style and the sprites or fonts used in a given style, the map renderer will force a complete update, deleting the current style and building the given style from scratch.

Parameters

Name	Type	Description
style	Object/String	RequiredA JSON object that conforms to the pattern described in the Style Specification, or the URL of such JSON.
option	Object	optionalparameter name type default value description diff Boolean true optionalIf false, forces a "full" update, removing the current style and building the given style instead of attempting a diff-based update. localIdeographFontFamily String sans-serif OptionalDefines a CSS font family used to override locally generated glyphs in the "CJK Unified Ideographs", "Hiragana", "Katakana" and "Hangul Syllables" scopes. Within these ranges, map style font settings are ignored, except for the font-weight keywords (light/regular/medium/bold). Set to false to enable font settings in map styles for these glyph ranges. Force a full update.

Case

map.setStyle("http://***/mms-style/****.json");

setTerrain

Set up the 3D terrain in the scene.

Parameters

Name	Type	Description
option	Object	Requiredparameter name type default value description source String RequiredSpecify the name of the terrain data source, corresponding to the source name previously added through the map.addSource method. heightMultiplier Number 1 optionalTerrain height magnification factor, the value must be greater than 0.

Case

map.addSource('dem', {
    'type': 'raster-dem',
    'tiles': [
        "<tiles url>"// Such as "http://***/dem/{z}/{x}/{y}.png"
    ],
    'tileSize': 512,
    'maxzoom': 14
});

//Add terrain
map.setTerrain({'source': 'dem', 'heightMultiplier': 1});

//remove terrain
map.setTerrain(null)

Refer to Example.

setZoom

Set the zoom level of the map. Equivalent to jumpTo({zoom: zoom}).

Parameters

Name	Type	Description
zoom	Number	RequiredThe zoom level to be set (0-20).
eventData	Object	optionalOther attributes that need to be added to the event object triggered by this method.

Case

// No cutscenes zoom to zoom level 5
map.setZoom(5);

unhighlight3DTiles

You can clear the model highlighting effect of the map.highlight3DTiles interface.

Case

map.unhighlight3DTiles()

Refer to the example 3DTiles attribute picking and highlighting.

event

click

Fired when a device (usually a mouse) is pressed and released at the same point on the map.

Note: This event is compatible with the optional layerId parameter. If the layerId is included as the second parameter in Map#on, the event listener will only fire if the pressed and released points contain the visible part of the specified layer.

    //Initialize the map
    var map = new mapmost.Map({ 
       // map options
       });

    //Set event listener
    map.on('click', function(e) {
    console.log('A click event has occurred at ' + e.lngLat);
    });

    //Initialize the map
    var map = new mapmost.Map({ 
      // map options
      });

    //Set an event listener for the feature’s layer
    map.on('click', 'poi-label', function(e) {
      console.log('A click event has occurred on a visible portion of the poi-label layer at ' + e.lngLat);
    });

    //Initialize the map
    var map = new mapmost.Map({ 
      // map options
      });

    //Set the event listener and obtain the three-dimensional coordinates of the scene
    map.on('click', function (e) {
        console.log("Three-dimensional coordinates: " + e.coord );
    })

 

contextmenu

Fires when the right mouse button is clicked or the context menu key is pressed in the map.

//Initialize the map
var map = new mapmost.Map({ 
  // map options
  });
//Set the event listener to start when the right mouse button is pressed in the map.
map.on('contextmenu', function() {
  console.log('A contextmenu event occurred.');
});

 

move

Fires repeatedly during an animated transition from one view to another, as a method of user interaction or method.

//Initialize the map
var map = new mapmost.Map({
   // map options
   });
//Set the event listener to turn on repeatedly during the animation transition.
map.on('move', function() {
  console.log('A move event occurred.');
});

 

dblclick

Fired when a device (usually a mouse) is pressed and released twice at the same location on the map.

Note: This event is compatible with the optional layerId parameter. If the layerId is included as the second parameter in Map#on, the event listener will only fire if the point that was clicked twice contains the visible part of the specified layer.

    //Initialize the map
    const map = new mapmost.Map({});
    //Set event listener
    map.on('dblclick', (e) => {
        console.log('A dblclick event has occurred at ' + e.lngLat);
    });

    //Initialize the map
    const map = new mapmost.Map({});
    //Set event listeners for specific layers
    map.on('dblclick', 'poi-label', (e) => {
        console.log('A dblclick event has occurred on a visible portion of the poi-label layer at ' + e.lngLat);
    });

 

drag

Triggered repeatedly during the "drag pan" interaction.

    //Initialize the map
    const map = new mapmost.Map({});
    //Set the event listener to be turned on repeatedly during the "drag pan" interaction.
    map.on('drag', () => {
        console.log('A drag event occurred.');
    });

 

dragend

Fired when the "drag pan" interaction ends.

    //Initialize the map
    const map = new mapmost.Map({});
    //Set the event listener to start at the end of the "drag pan" interaction process.
    map.on('dragend', () => {
         console.log('A dragend event occurred.');
    });

 

dragstart

Fired when the "drag to pan" interaction starts.

    //Initialize the map
    const map = new mapmost.Map({});
    //Set the event listener to start when the "drag pan" interaction process begins.
    map.on('dragstart', () => {
        console.log('A dragstart event occurred.');
    });

 

load

Start immediately after all necessary assets have been downloaded and the first visual complete rendering of the map has been made.

    //Initialize the map
    const map = new mapmost.Map({});
    //Set the event listener to start when the map is loaded.
    map.on('load', () => {
        console.log('A load event occurred.');
    });

 

moveend

Fired after the map has completed a transition from one view to another, either as a result of user interaction or methods such as Map#jumpTo.

    //Initialize the map
    const map = new mapmost.Map({});
    //Set the event listener to start after the map completes conversion.
    map.on('moveend', () => {
        console.log('A moveend event occurred.');
    });

 

movestart

Starts before the map begins transitioning from one view to another, as a result of user interaction or methods such as Map#jumpTo.

    //Initialize the map
    const map = new mapmost.Map({});
    // Set the event listener to start before the map transitions from one view to another.
    map.on('movestart', () => {
        console.log('A movestart` event occurred.');
    });

 

pitch

In the pitch (tilt) animation of the map between one state and another, triggered repeatedly as a result of user interaction or methods such as Map#flyTo.

    //Initialize the map
    const map = new mapmost.Map({});
    // Set the event listener to fire repeatedly during the map’s pitch (tilt) transition state.
    map.on('pitch', () => {
        console.log('A pitch event occurred.');
    });

 

pitchend

Fired immediately after the map’s pitch (tilt) has changed, as a result of user interaction or methods such as Map#flyTo.

    //Initialize the map
    const map = new mapmost.Map({});
    //Set the event listener to start as soon as the map’s pitch (tilt) changes.
    map.on('pitchend', () => {
        console.log('A pitchend event occurred.');
    });

 

pitchstart

Fired when the map’s pitch begins to change, either as a result of user interaction or as a result of methods such as Map#flyTo.

    //Initialize the map
    const map = new mapmost.Map({});
    // Set the event listener to start before the map’s pitch (tilt) begins to change.
    map.on('pitchstart', () => {
        console.log('A pitchstart event occurred.');
    });

 

remove

Triggered immediately after the map is removed by Map.event:remove.

    //Initialize the map
    const map = new mapmost.Map({});
    //Set the event listener to start as soon as the map is removed.
    map.on('remove', () => {
        console.log('A remove event occurred.');
    });

 

resize

Fires immediately after the map is resized.

    //Initialize the map
    const map = new mapmost.Map({});
    // Set the event listener to start as soon as the map is resized.
    map.on('resize', () => {
        console.log('A resize event occurred.');
    });

 

rotate

Fires repeatedly during the "drag to rotate" interaction.

    //Initialize the map
    const map = new mapmost.Map({});
    //Set the event listener to be turned on repeatedly during the "drag to rotate" interaction.
    map.on('rotate', () => {
        console.log('A rotate event occurred.');
    });

 

rotateend

Fired when the "drag to rotate" interaction ends.

    //Initialize the map
    const map = new mapmost.Map({});
    //Set the event listener to start when the "drag to rotate" interaction ends.
    map.on('rotateend', () => {
        console.log('A rotateend event occurred.');
    });

 

rotatestart

Fired when the "drag to rotate" interaction starts.

    //Initialize the map
    const map = new mapmost.Map({});
    // Set the event listener to start when the "drag to rotate" interaction begins.
    map.on('rotatestart', () => {
        console.log('A rotatestart event occurred.');
    });

 

zoom

Triggered repeatedly during the animation transitioning from one zoom level to another, as a result of user interaction or methods such as Map#flyTo.

    //Initialize the map
    const map = new mapmost.Map({});
    //Set the event listener to fire repeatedly on zoom transitions.
    map.on('zoom', () => {
        console.log('A zoom event occurred.');
    });

 

zoomend

Fired after the map has completed transitioning from one zoom level to another, as a result of user interaction or methods such as Map#flyTo.

The scaling transition will usually end before rendering is complete, so if you need to wait for rendering to complete, you can use the Map.event:idle event instead.

    //Initialize the map
    const map = new mapmost.Map({});
    // Set the event listener to start at the end of the zoom transition.
    map.on('zoomend', () => {
        console.log('A zoomend event occurred.');
    });

 

zoomstart

Launched before the map begins transitioning from one zoom level to another, as a result of user interaction or methods such as Map#flyTo.

    //Initialize the map
    const map = new mapmost.Map({});
    // Set the event listener to start before the zoom transition begins.
    map.on('zoomstart', () => {
        console.log('A zoomstart event occurred.');
    });