let svc = new vjmap3d.Service(env.serviceUrl, env.accessToken);
let app = new vjmap3d.App(svc, {
container: "map", // 容器id
stat: { show: true, left: "0" },
scene: {
gridHelper: { visible: true } // 是否显示坐标网格
},
camera: { // 相机设置
viewHelper: { enable: true, position: "leftBottom" } // 是否显示视角指示器
},
control: { leftButtonPan: true } // 设置为左键用于平移 (同时右键将用于旋转) 和地图2d使用习惯一样
})
let res = await app.svc.openMap({
mapid: env.exampleMapId, // 地图ID,(请确保此ID已存在，可上传新图形新建ID)
mapopenway: vjmap3d.MapOpenWay.GeomRender, // 以几何数据渲染方式打开
style: vjmap3d.openMapDarkStyle()
});
if (res.error) {
showError(res.error);
return;
}
let provider = new vjmap3d.MapProvider(
[
{
url: app.svc.rasterTileUrl()
}
],
{
transparent: true
}
);
let mapBounds = vjmap3d.GeoBounds.fromString(res.bounds)
let scale = 100;
let mapviewEnt = new vjmap3d.MapViewEntity({
provider,
baseScale: scale,
mapBounds: mapBounds.toArray()
});
mapviewEnt.addTo(app);
## CAD图层切换
let svc = new vjmap3d.Service(env.serviceUrl, env.accessToken);
let app = new vjmap3d.App(svc, {
container: "map", // 容器id
stat: { show: true, left: "0" },
scene: {
gridHelper: { visible: true } // 是否显示坐标网格
},
camera: { // 相机设置
viewHelper: { enable: true, position: "leftBottom" } // 是否显示视角指示器
},
control: { leftButtonPan: true } // 设置为左键用于平移 (同时右键将用于旋转) 和地图2d使用习惯一样
})
let res = await app.svc.openMap({
mapid: env.exampleMapId, // 地图ID,(请确保此ID已存在，可上传新图形新建ID)
mapopenway: vjmap3d.MapOpenWay.GeomRender, // 以几何数据渲染方式打开
style: vjmap3d.openMapDarkStyle()
});
if (res.error) {
showError(res.error);
return;
}
let provider = new vjmap3d.MapProvider(
[
{
url: app.svc.rasterTileUrl()
}
],
{
transparent: true
}
);
let mapBounds = vjmap3d.GeoBounds.fromString(res.bounds)
let scale = 100;
let mapviewEnt = new vjmap3d.MapViewEntity({
provider,
baseScale: scale,
mapBounds: mapBounds.toArray()
});
mapviewEnt.addTo(app);
// 获取cad图层
let layers = svc.getMapLayers();
const ui = await app.getConfigPane({ title: "关闭图层", style: { width: "250px"}});
let gui = new vjmap3d.UiPanelJsonConfig();
for(let n = 0; n < layers.length; n++) {
gui.add(layers[n], "isOff").label(layers[n].name).onChange(async () => {
await svc.cmdSwitchLayers(layers.reduce((sum, val) => {
if (!val.isOff) {
sum.push(val.name);
}
return sum;
}, []))
let newProvider = new vjmap3d.MapProvider(
[
{
url: app.svc.rasterTileUrl()
}
],
{
transparent: true
}
);
mapviewEnt.setProvider(newProvider)
})
}
gui.toJson().forEach(c => ui.appendChild(c));
## CAD数据查询矢量绘制
let svc = new vjmap3d.Service(env.serviceUrl, env.accessToken);
let app = new vjmap3d.App(svc, {
container: "map", // 容器id
stat: { show: true, left: "0" },
scene: {
gridHelper: { visible: true } // 是否显示坐标网格
},
camera: { // 相机设置
viewHelper: { enable: true, position: "leftBottom" } // 是否显示视角指示器
},
control: { leftButtonPan: true } // 设置为左键用于平移 (同时右键将用于旋转) 和地图2d使用习惯一样
})
const MAP_DEFAULT_SIZE = 200;
let res = await svc.openMap({
mapid: env.exampleMapId, // 地图ID,(请确保此ID已存在，可上传新图形新建ID)
mapopenway: vjmap3d.MapOpenWay.GeomRender, // 以几何数据渲染方式打开
style: vjmap3d.openMapDarkStyle() // div为深色背景颜色时，这里也传深色背景样式
});
if (res.error) {
showError(res.error);
return;
}
let mapBounds = vjmap3d.GeoBounds.fromString(res.bounds);
app.centerOrigin = new THREE.Vector3(mapBounds.center().x, 0, mapBounds.center().y);
app.scaleOrigin = MAP_DEFAULT_SIZE / mapBounds.width();
const queryMapData = async () => {
let cadPrj = new vjmap3d.GeoProjection(mapBounds);
res = await svc.conditionQueryFeature({
condition: `1 == 1`, // 只需要写sql语句where后面的条件内容,字段内容请参考文档"服务端条件查询和表达式查询"
fields: "",
includegeom: true, // 是否返回几何数据,为了性能问题，realgeom为false时，如果返回条数大于1.只会返回每个实体的外包矩形，如果条数为1的话，会返回此实体的真实geojson；realgeom为true时每条都会返回实体的geojson
realgeom: true,
limit: 1000000 //设置很大,不传的话，默认只能取100条
}, pt => {
// 查询到的每个点进行坐标处理回调
return cadPrj.fromMercator(pt);// 转成cad的坐标
})
if (res.error) {
showError(res.error)
return
} else {
if (res && res.result && res.result.length > 0) {
let idx = 0;
let features = [];
for (let row of res.result) { // row：查询返回的数据行，非 Entity
if (row.geom && row.geom.geometries) {
// 实体颜色为 0xAABBGGRR 整数(BGR序)，转成 #RRGGBB
let hex = (row.color >>> 0).toString(16).padStart(8, "0");
let clr = "#" + hex.substring(6, 8) + hex.substring(4, 6) + hex.substring(2, 4);
for (let g = 0; g < row.geom.geometries.length; g++) {
features.push({
id: idx++,
type: "Feature",
properties: {
objectid: row.objectid,
color: clr,
alpha: row.alpha / 255,
lineWidth: 1,
name: row.name,
isline: row.isline,
layerindex: row.layerindex
},
geometry: row.geom.geometries[g]
})
}
}
}
let geom = {
type: "FeatureCollection",
features: features
};
return geom;
}
}
}
let geojson = await queryMapData();
let dataPolyline = [];
let dataPolygon = [];
for (let i = 0; i < geojson?.features.length; i++) {
let feature = geojson?.features[i];
if ((feature.geometry.type == "LineString")) {
dataPolyline.push({
coordinates: feature.geometry.coordinates.map(c => vjmap3d.toWorld([c[0], c[1]]).toArray()),
color: feature.properties.color,
id: feature.id,
lineWidth: 1,
opacity: feature.properties.alpha,
dashSize: 0.2,
gapSize: 0.2,
dashed: false,
objectid: feature.properties.objectid
})
} else if ((feature.geometry.type == "Polygon")) {
dataPolygon.push({
coordinates: feature.geometry.coordinates.map(c => c.map(s => {
let vec3 = vjmap3d.toWorld([s[0], s[1]]).toArray();
return [vec3[0], vec3[2]]
})),
color: feature.properties.color,
id: feature.id,
opacity: feature.properties.alpha,
objectid: feature.properties.objectid,
extrude: {
depth: 2
}
})
}
}
let polylines = new vjmap3d.PolylinesEntity({
data: dataPolyline,
highlightStyle: {
vertexColors: false,
color: 0xFFFF00
},
})
polylines.addTo(app);
polylines.pointerEvents = true;
//
let hoverVertexPointData = [];
let hoverVertexSymbol = new vjmap3d.SymbolEntity({
data: hoverVertexPointData,
style: {
size: 13,
shape: "circle",
color: "#0f0",
borderColor: "#f00",
transparent: true,
opacity: 1,
borderWidth: 3,
sizeAttenuation: false,
vertexBorderColor: false,
vertexColors: false,
vertexSize: false
}
});
hoverVertexSymbol.addTo(app);
//
polylines.on("mouseover", e => {
if (e?.intersection?.faceIndex !== undefined) {
let itemData = polylines.getItemDataByFaceIndex(e?.intersection?.faceIndex);
if (itemData) {
// objectid相同的都选上
let entities = polylines.getData().filter(item => item.objectid == itemData.objectid)
entities.forEach(e => e.id !==undefined && polylines.setItemHighlight(e.id, true))
}
} else if (e?.intersection?.index !== undefined) {
let itemData = polylines.getVertexSymbol().getItemDataByPointIndex(e?.intersection?.index);
if (!itemData) return;
let pointData = {...itemData};
pointData.size = (pointData.size ?? 10) + 3;
// 顶点
hoverVertexSymbol.setData([
pointData
])
}
})
polylines.on("mouseout", e => {
polylines.clearHighlight()
hoverVertexSymbol.setData([])
})
//
let polygons = new vjmap3d.FillExtrusionsEntity({ // PolygonsEntity
data: dataPolygon ,
showVertex: false,
})
polygons.addTo(app)
//
polygons.pointerEvents = true;
polygons.on("mouseover", e => {
console.log(e)
if (e?.intersection?.faceIndex !== undefined) {
let itemData = polygons.getItemDataByFaceIndex(e?.intersection?.faceIndex);
if (itemData) {
// objectid相同的都选上
let entities = polygons.getData().filter(item => item.objectid == itemData.objectid)
entities.forEach(e => e.id !==undefined && polygons.setItemHighlight(e.id, true))
}
}
})
polygons.on("mouseout", e => {
polygons.clearHighlight()
})