# vjmap-vue3

**Repository Path**: vjmap/vjmap-vue3

## Basic Information

- **Project Name**: vjmap-vue3
- **Description**: `唯杰地图VJMAP`为`CAD`图或`自定义地图格式`WebGIS`可视化`显示开发提供的一站式解决方案，支持的格式如常用的`AutoCAD`的`DWG`格式文件、`GeoJSON`等常用`GIS`文件格式，它使用WebGL`矢量图块`和`自定义样式`呈现交互式地图, 提供了全新的`大数据可视化`, 此案例实现了对CAD图纸的上传、打开、版本管理、属性查询、图层开关、批注、数据展示等功能。

- **Primary Language**: JavaScript
- **License**: LGPL-3.0
- **Default Branch**: master
- **Homepage**: https://vjmap.com/
- **GVP Project**: No

## Statistics

- **Stars**: 58
- **Forks**: 21
- **Created**: 2022-03-31
- **Last Updated**: 2026-04-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

English | [中文](README.md)

# VJMAP Sample Project

Online preview: https://vjmap.com/app/cloud/#/en

This project is based on [VJMAP](https://vjmap.com/en/) for secondary development. Unauthorized commercial use is prohibited (except for those who have purchased VJMAP private deployment).

# Getting Started
```
yarn 
yarn dev
```

# Directory Structure

- packages/core 
    
    Core library
    
    A Vue 3 wrapper around the vjmap SDK

    This package cannot run independently; it is shared across other packages

    To update the `vjmap` library, navigate to this directory and run
    
    ```
    yarn add vjmap
    ```

- packages/map-manage

    VJMAP Cloud Drawing Management Platform

    Provides features such as drawing upload, opening, version management, property query, layer toggling, annotations, data display, and more.


# Recommended VS Code Extensions

- Volar



# About VJMAP

`VJMAP` is an all-in-one solution for `CAD` drawings and `custom map format` WebGIS `visualization`. It supports common formats like `AutoCAD` `DWG` files, `GeoJSON`, and other popular `GIS` file formats. It renders interactive maps using WebGL `vector tiles` and `custom styles`, offering cutting-edge `big data visualization` and `real-time streaming data` visualization capabilities. With VJMAP, you can quickly build beautiful, smooth map presentations with spatial analysis on both browsers and mobile devices, enabling feature-rich, interactive, and customizable map applications for your website.

[VJMAP](https://vjmap.com/en/) official website: https://vjmap.com/en/

# Key Features

- Fully compatible with `AutoCAD` `DWG` files, no conversion needed
- Advanced rendering: WebGL-based, supports `vector map` rendering, raster/image/video rendering, and 3D model rendering
- Custom styles: Both server-side and client-side rendering support custom style expressions — flexible and powerful
- Multiple view modes: Supports 2D and 3D views, vertical and 360-degree rotation perspectives
- Visual effects: Supports seamless zoom, particle and route animations, fly and pan transitions
- Feature-rich: Covers all common map functions with a rich JavaScript API
- Interactive controls: Mouse/touch drag to pan, scroll wheel/double-click/pinch to zoom, Shift+drag to zoom into an area
- Big data visualization: Excellent performance for large-scale data display
- Exportable to `Autodesk Forge` f2d format for development within the Forge ecosystem, with offline deployment support. [Example](/en/guide/forgeviewer.html)
- Cross-platform (`Windows`, `Linux`); `Docker` deployment; `private` deployment; desktop language development (`C#`, `Java`, `C++`)

# Quick Start

## Opening a Map via Service

Use the `openMap` method of the `Service` object to open an existing map on the server, or pass an `http` URL or local server path via `fileid` to open a `DWG` format `CAD drawing`.

```js
// Create a map service object with the service URL and token
let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
// Open a map
let res = await svc.openMap({
    mapid: "sys_world", // Map ID (the name assigned when uploading the drawing)
    mapopenway: vjmap.MapOpenWay.GeomRender, // Open with geometry rendering
    style: vjmap.openMapDarkStyle() // Server-side rendering style
})
if (res.error) {
    message.error(res.error)
}
```

## Creating a Map Object

Use the `geographic bounds` returned from opening the map to establish a `coordinate system`, then create the `map object`.

```js
// Create a geographic projection coordinate system based on map bounds
let prj = new vjmap.GeoProjection(res.bounds);

// Map object
let map = new vjmap.Map({
    container: 'map', // DIV container ID
    style: svc.vectorStyle(), // Style (vector tile style)
    center: prj.toLngLat(prj.getMapExtent().center()), // Set map center
    zoom: 2, // Set zoom level
    pitch: 60, // Tilt angle
    renderWorldCopies: false // Disable multi-world map display
});

// Bindservice and projection objects
map.attach(svc, prj);
```

## Map Interaction

When the mouse hovers over an entity on the map, you may want to highlight it or view details on click. In `vector tile` mode, call `enableVectorLayerHoverHighlight`; in `raster tile` mode, call `enableLayerClickHighlight`.

```js
// Get all layers
const layers = svc.getMapLayers();
// Entity type ID to name mapping
const { entTypeIdMap } = await svc.getConstData();

// Enable hover highlight (entities highlight on mouse hover)
map.enableVectorLayerHoverHighlight((event, feature, layer) => {
    // Click highlight entity callback
    const prop = feature.properties;
    let content = `event: ${event}; feature: ${feature.id}; layer: ${layers[prop.layer].name}; type: ${entTypeIdMap[prop.type]}`
    message.info({ content, key: "info", duration: 5});
})
```

## Adding Overlays and Layers

The map supports drawing overlays such as point markers, text labels, polylines, circles, polygons, rectangles, and more. You can customize marker titles, icons, polyline colors, widths, and polygon fill colors, border colors, widths, and many other properties.

Adding a marker overlay:
```js
const mapBounds = map.getGeoBounds(0.6); // Get map geographic bounds with scaling
let position = mapBounds.randomPoint(); // Generate a random point within bounds
let latLng = map.toLngLat(position); // Convert geographic coordinates to lng/lat
let marker = new vjmap.Marker(); // Create a new Marker
marker.setLngLat(latLng).addTo(map); // Set coordinates and add to map
```

Creating extruded square layers:
```js
let lengthMin = mapBounds.width() / 200; // Min random square side length
let lengthMax = mapBounds.width() / 100; // Max random square side length
let geoDatas = []; // Data array
for(let i = 0; i < 100; i++) {
    const pts = [];
    const len = vjmap.randInt(lengthMin, lengthMax); // Random length within range
    const p1 = mapBounds.randomPoint(); // Random point as bottom-right corner
    const p2 = vjmap.geoPoint([p1.x, p1.y + len]);
    const p3 = vjmap.geoPoint([p1.x + len, p1.y + len]);
    const p4 = vjmap.geoPoint([p1.x + len, p1.y]);
    pts.push(p1, p2, p3, p4); // Four corners of the square
    geoDatas.push({
        points: map.toLngLat(pts), // Convert geographic coordinates to lng/lat for rendering
        properties: {
            name: "square" + (i + 1),
            color:  vjmap.randomColor(),
            type: "square",
            baseHeight: 0,
            height: prj.toMeter(vjmap.randInt(lengthMin * 10, lengthMax * 10)) // Random height based on min/max length * 10
        }
    })
}

// Create fill extrusion layer
let fillExtrusions = new vjmap.FillExtrusion({
    data: geoDatas, // Data
    // Red on hover, otherwise use the 'color' property
    fillExtrusionColor: ['case', ['to-boolean', ['feature-state', 'hover']], 'red', ['get', 'color']],
    fillExtrusionOpacity: 0.8, // Opacity
    fillExtrusionHeight:['get', 'height'], // Height value
    fillExtrusionBase: ['get', 'baseHeight'], // Base height (change for floating effect)
    isHoverPointer: true, // Change cursor on hover
    isHoverFeatureState: true // Change feature state on hover for highlight effect
});
fillExtrusions.addTo(map); // Add to map
// Click event
fillExtrusions.clickLayer(e => message.info(`You clicked #${e.features[0].id}, name: ${e.features[0].properties.name}, color: ${e.features[0].properties.color}, type: ${e.features[0].properties.type}`))
// Hover popup
fillExtrusions.hoverPopup(f => `<h3>ID: ${f.properties.name}</h3>Color: ${f.properties.color}`, { anchor: 'bottom' });
```
Result:

![image-20211015195337555](https://vjmap.com/blogimages/image-20211015195337555.png)

[Demo](https://vjmap.com/demo/#/demo/map/overlay/fillextrusion/fillextrusion?lang=en): https://vjmap.com/demo/#/demo/map/overlay/fillextrusion/fillextrusion?lang=en  

[VJMAP Documentation](https://vjmap.com/en/): https://vjmap.com/en/