import * as mars3d from "mars3d"
|
|
export let map // mars3d.Map三维地图对象
|
|
// 需要覆盖config.json中地图属性参数（当前示例框架中自动处理合并）
|
export const mapOptions = {
|
scene: {
|
center: { lat: 31.810597, lng: 117.220617, alt: 1038, heading: 13, pitch: -30 }
|
},
|
terrain: {
|
show: false
|
},
|
// 方式1：在创建地球前的参数中配置
|
layers: [
|
{
|
name: "兴趣点",
|
type: "arcgis_wfs",
|
url: "//server.mars3d.cn/arcgis/rest/services/mars/hefei/MapServer/1",
|
where: " 1=1 ",
|
minimumLevel: 16,
|
symbol: {
|
type: "billboardP",
|
styleOptions: {
|
image: "img/marker/mark3.png",
|
scale: 0.7,
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
clampToGround: true,
|
label: {
|
text: "{NAME}",
|
font_size: 15,
|
color: "#ffffff",
|
outline: true,
|
outlineColor: "#000000",
|
pixelOffsetY: -30,
|
distanceDisplayCondition: true,
|
distanceDisplayCondition_far: 1500,
|
distanceDisplayCondition_near: 0
|
}
|
}
|
},
|
popup: "名称：{NAME}<br />地址：{address}",
|
show: true
|
}
|
]
|
}
|
|
/**
|
* 初始化地图业务，生命周期钩子函数（必须）
|
* 框架在地图初始化完成后自动调用该函数
|
* @param {mars3d.Map} mapInstance 地图对象
|
* @returns {void} 无
|
*/
|
export function onMounted(mapInstance) {
|
map = mapInstance // 记录首次创建的map
|
|
map.basemap = 2017 // 蓝色底图
|
|
// 添加演示图层
|
addArcGisWFSLayer1()
|
addArcGisWFSLayer2()
|
}
|
|
/**
|
* 释放当前地图业务的生命周期函数
|
* @returns {void} 无
|
*/
|
export function onUnmounted() {
|
map = null
|
}
|
|
// 方式2：在创建地球后调用addLayer添加图层(直接new对应type类型的图层类)
|
function addArcGisWFSLayer1() {
|
const changeLevel = 15
|
|
// 瓦片图，对比参考用
|
const tileLayer = new mars3d.layer.ArcGisLayer({
|
name: "瓦片图层",
|
url: "//server.mars3d.cn/arcgis/rest/services/mars/hefei/MapServer",
|
layers: "37",
|
popup: "数据：瓦片图层<br />名称：{NAME}<br />层数：{floor}",
|
maximumLevel: changeLevel - 1,
|
maximumTerrainLevel: changeLevel - 1
|
})
|
map.addLayer(tileLayer)
|
|
// 动态矢量图
|
const wfsLayer = new mars3d.layer.ArcGisWfsLayer({
|
name: "建筑物面矢量图层",
|
url: "//server.mars3d.cn/arcgis/rest/services/mars/hefei/MapServer/37",
|
where: " NAME like '%合肥%' ",
|
minimumLevel: changeLevel,
|
symbol: {
|
type: "polygonP",
|
styleOptions: {
|
color: "#FED976",
|
outline: false,
|
opacity: 1
|
}
|
},
|
buildings: {
|
cloumn: "floor"
|
},
|
debuggerTileInfo: false,
|
popup: "数据：矢量图层<br />名称：{NAME}<br />层数：{floor}"
|
})
|
map.addLayer(wfsLayer)
|
|
// 绑定事件
|
wfsLayer.on(mars3d.EventType.loadConfig, function (event) {
|
console.log("加载完成服务信息", event)
|
})
|
|
wfsLayer.on(mars3d.EventType.click, function (event) {
|
console.log("单击了图层", event)
|
})
|
|
let timeTik
|
wfsLayer.on(mars3d.EventType.update, function (event) {
|
console.log(`图层内数据更新了`, event)
|
|
clearTimeout(timeTik)
|
timeTik = setTimeout(() => {
|
if (!wfsLayer.isLoading) {
|
console.log(`本批次数据加载完成`)
|
}
|
}, 1000)
|
})
|
|
setTimeout(function () {
|
// 测试更换条件
|
wfsLayer.setWhere(" 1=1 ")
|
}, 10000)
|
}
|
|
// 适合少于1000条的少量数据，一次性请求加载
|
function addArcGisWFSLayer2() {
|
// 一次性加载的wfs图层
|
const wfsLayer = new mars3d.layer.ArcGisWfsSingleLayer({
|
name: "合肥边界线",
|
url: "//server.mars3d.cn/arcgis/rest/services/mars/hefei/MapServer/41",
|
symbol: {
|
type: "polyline",
|
styleOptions: {
|
color: "#39E09B",
|
width: 8,
|
opacity: 0.8
|
}
|
},
|
popup: "all"
|
})
|
map.addLayer(wfsLayer)
|
}
|
|
// 图层状态 在组件中进行管理的图层
|
export function getManagerLayer() {
|
return map.getLayer("建筑物面矢量图层", "name")
|
}
|
