# html、Vue、React应用
提示
vue2、vue3、React、Html示例代码下载 (opens new window) ** 强烈建议下载参考，入门开发的简单示例 **
# 安装
首先，确保您已安装 Node.js 和 npm、yarn 或 pnpm。然后在您的项目目录中运行以下命令来安装库：
# npm 安装
npm install vjmap
1
# yarn 安装
yarn add vjmap
1
# pnpm 安装
pnpm add vjmap
1
# 引入
引入指定模块：
import { Map } from 'vjmap';
// 引入样式
import "vjmap/dist/vjmap.min.css";
1
2
3
2
3
或引入全局模块：
import vjmap from 'vjmap';
// 引入样式
import "vjmap/dist/vjmap.min.css";
1
2
3
2
3
# 纯Html开发
对于不使用打包工具的纯 HTML 开发项目，您可以通过 script 标签引入库。
<!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"
};
// 新建地图服务对象，传入服务地址和token
let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
// 打开地图
let res = await svc.openMap({
mapid: "sys_zp", // 地图ID
mapopenway: vjmap.MapOpenWay.GeomRender, // 以几何数据渲染方式打开
style: vjmap.openMapDarkStyle() // 服务器渲染样式
})
if (res.error) {
console.error(res.error)
}
// 根据地图范围建立几何投影坐标系
let prj = new vjmap.GeoProjection(res.bounds);
// 地图对象
let map = new vjmap.Map({
container: 'map', // DIV容器ID
style: svc.vectorStyle(), // 样式，这里是矢量瓦片样式
center: prj.toLngLat(prj.getMapExtent().center()), // 设置地图中心点
zoom: 2, // 设置地图缩放级别
pitch: 0, // 倾斜角度
renderWorldCopies: false // 不显示多屏地图
});
// 关联服务对象和投影对象
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
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、React开发
Vue、React开发请下载示例工程参考开发
vue、React、Html示例代码下载 (opens new window)
提示
如果工程化开发时，提示如下错误
这是由于 webpack 或 vite 等工具对 vjmap sdk 二次混淆所引起的。请查看相关文档把 vjmap 排查，不要二次打包。
或者在import时加上 !号
如
import vjmap from "!vjmap"
1