---
title: 相关示例
source: https://vjmap.com/guide/relatedExamples.html
---
# 相关示例
## 增加Marker至地图
在地图`sys_hello`中，把此地图中一个CAD坐标为[725.32,18969.19]的点加进地图中
```js
let marker = new vjmap.Marker();
let lngLat = map.toLngLat([725.32,18969.19]);
marker.setLngLat(lngLat);
marker.addToMap()
```
let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
// 打开地图
let res = await svc.openMap({
mapid: "sys_hello", // 地图ID
mapopenway: vjmap.MapOpenWay.GeomRender, // 以几何数据渲染方式打开
style: vjmap.openMapLightStyle() // div为深色背景颜色时，这里也传深色背景样式
})
if (res.error) {
// 如果打开出错
showError(res.error)
return;
}
// 获取地图范围
let mapBounds = vjmap.GeoBounds.fromString(res.bounds);
// 根据地图范围建立几何投影坐标系
let prj = new vjmap.GeoProjection(mapBounds);
//
// 地图对象
let map = new vjmap.Map({
container: 'map', // DIV容器ID
style: svc.rasterStyle(), // 样式，这里是栅格样式
center: prj.toLngLat(mapBounds.center()), // 设置地图中心点
zoom: 0, // 设置地图缩放级别
pitch: 0,
renderWorldCopies: false // 不显示多屏地图
});
//
// 关联服务对象和投影对象
map.attach(svc, prj);
await map.onLoad();
let marker = new vjmap.Marker();
let lngLat = map.toLngLat([725.32,18969.19]);
marker.setLngLat(lngLat);
marker.addTo(map)
let mousePositionControl = new vjmap.MousePositionControl({
showLatLng: true
});
map.addControl(mousePositionControl, "top-left");
## 获取Marker的CAD坐标
```js
// 获取Marker的渲染经纬度坐标
let lngLat = marker.getLngLat();
// 把渲染经纬度坐标坐标转成CAD几何坐标
let pt = map.fromLngLat(lngLat)
```
let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
// 打开地图
let res = await svc.openMap({
mapid: "sys_hello", // 地图ID
mapopenway: vjmap.MapOpenWay.GeomRender, // 以几何数据渲染方式打开
style: vjmap.openMapLightStyle() // div为深色背景颜色时，这里也传深色背景样式
})
if (res.error) {
// 如果打开出错
showError(res.error)
return;
}
// 获取地图范围
let mapBounds = vjmap.GeoBounds.fromString(res.bounds);
// 根据地图范围建立几何投影坐标系
let prj = new vjmap.GeoProjection(mapBounds);
//
// 地图对象
let map = new vjmap.Map({
container: 'map', // DIV容器ID
style: svc.rasterStyle(), // 样式，这里是栅格样式
center: prj.toLngLat(mapBounds.center()), // 设置地图中心点
zoom: 1, // 设置地图缩放级别
pitch: 0,
renderWorldCopies: false // 不显示多屏地图
});
//
// 关联服务对象和投影对象
map.attach(svc, prj);
await map.onLoad();
let marker = new vjmap.Marker({
draggable: true
});
marker.setLngLat([10, 10]);
marker.addTo(map)
marker.on("dragend", e => {
// 获取Marker的渲染经纬度坐标
let lngLat = marker.getLngLat();
// 把渲染经纬度坐标坐标转成CAD几何坐标
let pt = map.fromLngLat(lngLat)
// 像素坐标
let pixel = map.project(lngLat);
map.logInfo(`当前Marker的CAD坐标为 X:${pt.x.toFixed(4)}, y:${pt.y.toFixed(4)}, 经纬度:${lngLat.lng.toFixed(4)},${lngLat.lat.toFixed(4)},像素坐标: ${pixel.x.toFixed(0)},${pixel.y.toFixed(0)}`, "success", 3000)
})
let mousePositionControl = new vjmap.MousePositionControl({
showLatLng: true
});
map.addControl(mousePositionControl, "top-left");
map.logInfo("拖动Marker，显示当前的CAD坐标", 600000)
## 根据CAD坐标序列创建多边形
已知几组CAD的GeoJSON坐标序列和属性值，创建多边形增加至地图中。通过调用 `map.toLngLat`(data) 把CAD的GeoJSON几何坐标转渲染经纬度
```js
let data = {
"type": "FeatureCollection",
"features": [
{
"id": "1",
"type": "Feature",
"properties": {
"name": "polygon1",
"color": "#00ffff"
},
"geometry": {
"coordinates": [
[
[
3006.0952985307595,
15198.972934052355
],
[
12606.64046359223,
9285.59366571666
],
[
4745.324495099878,
3720.060236694666
],
[
3006.0952985307595,
15198.972934052355
]
]
],
"type": "Polygon"
}
},
{
"id": "2",
"type": "Feature",
"properties": {
"name": "polygon2",
"color": "#ff00ff"
},
"geometry": {
"coordinates": [
[
[
19841.833921319492,
13807.589576796912
],
[
19841.833921319492,
4207.0444117340885
],
[
26172.62819683108,
4207.0444117340885
],
[
26172.62819683108,
13807.589576796912
],
[
19841.833921319492,
13807.589576796912
]
]
],
"type": "Polygon"
}
}
]
}
let polygon = new vjmap.Polygon({
data: map.toLngLat(data), // CAD几何坐标转渲染经纬度
fillColor: ['case', ['to-boolean', ['feature-state', 'hover']], 'red', ['get', 'color']],
fillOpacity: 0.8,
fillOutlineColor: "#f00",
isHoverPointer: true,
isHoverFeatureState: true
});
polygon.addTo(map);
```
let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
// 打开地图
let res = await svc.openMap({
mapid: "sys_hello", // 地图ID
mapopenway: vjmap.MapOpenWay.GeomRender, // 以几何数据渲染方式打开
style: vjmap.openMapLightStyle() // div为深色背景颜色时，这里也传深色背景样式
})
if (res.error) {
// 如果打开出错
showError(res.error)
return;
}
// 获取地图范围
let mapBounds = vjmap.GeoBounds.fromString(res.bounds);
// 根据地图范围建立几何投影坐标系
let prj = new vjmap.GeoProjection(mapBounds);
//
// 地图对象
let map = new vjmap.Map({
container: 'map', // DIV容器ID
style: svc.rasterStyle(), // 样式，这里是栅格样式
center: prj.toLngLat(mapBounds.center()), // 设置地图中心点
zoom: 0, // 设置地图缩放级别
pitch: 0,
renderWorldCopies: false // 不显示多屏地图
});
//
// 关联服务对象和投影对象
map.attach(svc, prj);
await map.onLoad();
let data = {
"type": "FeatureCollection",
"features": [
{
"id": "1",
"type": "Feature",
"properties": {
"name": "polygon1",
"color": "#00ffff"
},
"geometry": {
"coordinates": [
[
[
3006.0952985307595,
15198.972934052355
],
[
12606.64046359223,
9285.59366571666
],
[
4745.324495099878,
3720.060236694666
],
[
3006.0952985307595,
15198.972934052355
]
]
],
"type": "Polygon"
}
},
{
"id": "2",
"type": "Feature",
"properties": {
"name": "polygon2",
"color": "#ff00ff"
},
"geometry": {
"coordinates": [
[
[
19841.833921319492,
13807.589576796912
],
[
19841.833921319492,
4207.0444117340885
],
[
26172.62819683108,
4207.0444117340885
],
[
26172.62819683108,
13807.589576796912
],
[
19841.833921319492,
13807.589576796912
]
]
],
"type": "Polygon"
}
}
]
}
let polygon = new vjmap.Polygon({
data: map.toLngLat(data), // CAD几何坐标转渲染经纬度
fillColor: ['case', ['to-boolean', ['feature-state', 'hover']], 'red', ['get', 'color']],
fillOpacity: 0.8,
fillOutlineColor: "#f00",
isHoverPointer: true,
isHoverFeatureState: true
});
polygon.addTo(map);
let mousePositionControl = new vjmap.MousePositionControl({
showLatLng: true
});
map.addControl(mousePositionControl, "top-left");
## 获取绘制图层的CAD坐标
通过调用 `map.fromLngLat` 把绘制图层的GeoJson转为CAD几何坐标
```js
// 获取获取绘图对象的渲染经纬度
let lngLatJson = draw.getAll();
// 渲染经纬度转成CAD几何坐标
let cadJson = map.fromLngLat(lngLatJson);
```
let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
// 打开地图
let res = await svc.openMap({
mapid: "sys_hello", // 地图ID
mapopenway: vjmap.MapOpenWay.GeomRender, // 以几何数据渲染方式打开
style: vjmap.openMapLightStyle() // div为深色背景颜色时，这里也传深色背景样式
})
if (res.error) {
// 如果打开出错
showError(res.error)
return;
}
// 获取地图范围
let mapBounds = vjmap.GeoBounds.fromString(res.bounds);
// 根据地图范围建立几何投影坐标系
let prj = new vjmap.GeoProjection(mapBounds);
//
// 地图对象
let map = new vjmap.Map({
container: 'map', // DIV容器ID
style: svc.rasterStyle(), // 样式，这里是栅格样式
center: prj.toLngLat(mapBounds.center()), // 设置地图中心点
zoom: 0, // 设置地图缩放级别
pitch: 0,
renderWorldCopies: false // 不显示多屏地图
});
//
// 关联服务对象和投影对象
map.attach(svc, prj);
let mousePositionControl = new vjmap.MousePositionControl({
showLatLng: true
});
map.addControl(mousePositionControl, "bottom-left");
const draw = new vjmap.Draw.Tool();
map.addControl(draw, 'top-left');
// 增加一个按钮
let options = {};
options.buttons = [
{
id: "getdaa",
title: "查看绘制的GeoJson数据(CAD坐标)",
text: "查看",
onActivate: (ctx, e) => {
// 获取获取绘图对象的渲染经纬度
let lngLatJson = draw.getAll();
// 渲染经纬度转成CAD几何坐标
let cadJson = map.fromLngLat(lngLatJson);
map.logInfo(JSON.stringify(cadJson));
console.log(cadJson)
}
}
];
let btnGroupCtrl = new vjmap.ButtonGroupControl(options);
map.addControl(btnGroupCtrl, 'top-right');
## 获取鼠标当前位置的坐标
// 地图服务对象
let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
// 打开地图
let res = await svc.openMap({
mapid: "sys_hello", // 地图ID
mapopenway: vjmap.MapOpenWay.GeomRender, // 以几何数据渲染方式打开
style: vjmap.openMapDarkStyle() // div为深色背景颜色时，这里也传深色背景样式
})
if (res.error) {
// 如果打开出错
message.error(res.error)
}
// 根据地图范围建立几何投影坐标系
let prj = new vjmap.GeoProjection(res.bounds);
// 地图对象
let map = new vjmap.Map({
container: 'map', // DIV容器ID
style: svc.rasterStyle(), //svc.rasterBlankStyle(0, 24), // 样式，这里是栅格样式
center: prj.toLngLat(prj.getMapExtent().center()), // 设置地图中心点
zoom: 2, // 设置地图缩放级别
renderWorldCopies: false // 不显示多屏地图
});
// 关联服务对象和投影对象
map.attach(svc, prj);
// 根据地图本身范围缩放地图至全图显示
map.fitMapBounds();
await map.onLoad();
const addStyle = cssStyle => {
let style = `<style>${cssStyle }</style>`;
let ele = document.createElement('div');
ele.innerHTML = style;
document.getElementsByTagName('head')[0].appendChild(ele.firstElementChild)
}
// 增加一个popup自定义的样式
addStyle(`
.custom-popup .vjmapgis-popup-content {
background-color: #A0FFA0;
}
.custom-popup .vjmapgis-popup-tip {
border-top-color: #A0FFA0;
}
`)
// 跟随鼠标动的弹框
const div = window.document.createElement('div');
div.innerHTML = '当前位置:';
const popup = new vjmap.Popup({
className: "custom-popup",
closeOnClick: false,
closeButton: false
})
//.setHTML("Hello VJMap!")
.setDOMContent(div)
.trackPointer()
.addTo(map);
map.on("mousemove", e => {
// 获取当前鼠标的渲染经纬度坐标
let lngLat = e.lngLat;
// 把渲染经纬度坐标坐标转成CAD几何坐标
let pt = map.fromLngLat(lngLat)
// 像素坐标
let pixel = map.project(lngLat);
div.innerHTML =`CAD坐标为 X:${pt.x.toFixed(4)}, Y:${pt.y.toFixed(4)}<br/> 经纬度:${lngLat.lng.toFixed(4)},${lngLat.lat.toFixed(4)}<br/>像素坐标: ${pixel.x.toFixed(0)},${pixel.y.toFixed(0)}`
})