VJMAP

# HTML, Vue, and React Applications

Note

vue2, vue3, React, Html Sample code download (opens new window) ** Strongly recommended for reference—simple examples for getting started with development **

# Installation

First, ensure you have Node.js and npm, yarn, or pnpm installed. Then run the following command in your project directory to install the library:

# npm install

npm install vjmap
1

# yarn install

yarn add vjmap
1

# pnpm install

pnpm add vjmap
1

# Import

Import specific modules:

import { Map } from 'vjmap';
// Import styles
import "vjmap/dist/vjmap.min.css";
1
2
3

Or import the global module:

import vjmap from 'vjmap';
 // Import styles
import "vjmap/dist/vjmap.min.css";
1
2
3

# Pure HTML Development

For pure HTML projects without a bundler, you can include the library via a script tag.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>vjmap</title>
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<link rel="stylesheet" type="text/css" href="https://vjmap.com/demo/js/vjmap/vjmap.min.css">
    <script type="text/javascript" src="https://vjmap.com/demo/js/vjmap/vjmap.min.js"></script>
</head>
<body>
	const env = {
            serviceUrl: "https://vjmap.com/server/api/v1",
            accessToken: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJJRCI6MiwiVXNlcm5hbWUiOiJhZG1pbjEiLCJOaWNrTmFtZSI6ImFkbWluMSIsIkF1dGhvcml0eUlkIjoiYWRtaW4iLCJCdWZmZXJUaW1lIjo4NjQwMCwiZXhwIjoxOTQyMzg5NTc0LCJpc3MiOiJ2am1hcCIsIm5iZiI6MTYyNzAyODU3NH0.VQchVXxgjl5aCp3j3Uf5U2Mpk1NJNirH62Ys-8XOfnY"
    };
    // Create a new map service object with service URL and token
    let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
    // Open map
    let res = await svc.openMap({
        mapid: "sys_zp", // Map ID 
        mapopenway: vjmap.MapOpenWay.GeomRender, // Open with geometry rendering
        style: vjmap.openMapDarkStyle() // Server rendering style
    })
    if (res.error) {
        console.error(res.error)
    }
    // Create geometric 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 here
        center: prj.toLngLat(prj.getMapExtent().center()), // Set map center
        zoom: 2, // Set map zoom level
        pitch: 0, // Tilt angle
        renderWorldCopies: false // Do not display multi-screen map
    });
    // Associate service object and projection object
    map.attach(svc, prj);
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

# Vue and React Development

For Vue and React development, please download the sample project for reference.

Vue, React, Html Sample code download (opens new window)

Note

If you encounter the following error during build-based development image-20240923111147721

This is caused by secondary obfuscation of the vjmap SDK by tools such as webpack or vite. Please refer to the relevant documentation to exclude vjmap from being bundled again.

Or add an exclamation mark when importing:

For example:

import vjmap from "!vjmap"
1

← Mobile and Desktop Development →