import * as mars3d from "mars3d"
|
|
export let map // mars3d.Map三维地图对象
|
export let graphicLayer // 矢量图层对象
|
export const eventTarget = new mars3d.BaseClass() // 事件对象，用于抛出事件到面板中
|
|
// 需要覆盖config.json中地图属性参数（当前示例框架中自动处理合并）
|
export const mapOptions = {
|
scene: {
|
center: { lat: 30.402686, lng: 116.303632, alt: 48692, heading: 3, pitch: -43 }
|
}
|
}
|
|
/**
|
* 初始化地图业务，生命周期钩子函数（必须）
|
* 框架在地图初始化完成后自动调用该函数
|
* @param {mars3d.Map} mapInstance 地图对象
|
* @returns {void} 无
|
*/
|
export function onMounted(mapInstance) {
|
map = mapInstance // 记录首次创建的map
|
|
showDraw()
|
}
|
|
/**
|
* 释放当前地图业务的生命周期函数
|
* @returns {void} 无
|
*/
|
export function onUnmounted() {
|
map = null
|
}
|
|
function removeLayer() {
|
if (graphicLayer) {
|
graphicLayer.clear()
|
map.removeLayer(graphicLayer, true)
|
graphicLayer = null
|
}
|
if (tilesetLayer) {
|
map.removeLayer(tilesetLayer, true)
|
tilesetLayer = null
|
}
|
}
|
|
/**
|
* 平台通过draw标绘后保存的geojosn数据（已经内置style了，无需配置symbol）
|
*
|
* @export showDraw
|
* @param {boolean} isFlyTo 布尔值
|
* @returns {void}
|
*/
|
export function showDraw(isFlyTo) {
|
removeLayer()
|
|
graphicLayer = new mars3d.layer.GeoJsonLayer({
|
name: "标绘示例数据",
|
url: "//data.mars3d.cn/file/geojson/mars3d-draw.json",
|
popup: "{type} {name}",
|
queryParameters: {
|
token: "mars3d" // 可以传自定义url参数，如token等
|
},
|
symbol: {
|
merge: true,
|
styleOptions: {
|
// 高亮时的样式
|
highlight: {
|
type: "click",
|
opacity: 0.9
|
}
|
}
|
},
|
flyTo: isFlyTo
|
})
|
map.addLayer(graphicLayer)
|
|
// load事件,必须在load完成前绑定才能监听
|
graphicLayer.on(mars3d.EventType.load, function (event) {
|
if (event.layer) {
|
console.log("数据加载完成", event)
|
}
|
})
|
|
setTimeout(() => {
|
// readyPromise是可以load加载数据完成后去获取
|
graphicLayer.readyPromise.then(function (layer) {
|
console.log("readyPromise:数据加载完成", layer)
|
})
|
}, 5000)
|
|
// 单击事件
|
graphicLayer.on(mars3d.EventType.click, function (event) {
|
console.log("单击了图层", event)
|
})
|
}
|
|
/**
|
* 点数据
|
*
|
* @export showPoint
|
* @returns {void}
|
*/
|
export function showPoint() {
|
removeLayer()
|
graphicLayer = new mars3d.layer.GeoJsonLayer({
|
name: "体育设施点",
|
url: "//data.mars3d.cn/file/geojson/hfty-point.json",
|
symbol: {
|
styleOptions: {
|
image: "img/marker/mark1.png",
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
scale: 1,
|
scaleByDistance: true,
|
scaleByDistance_far: 20000,
|
scaleByDistance_farValue: 0.5,
|
scaleByDistance_near: 1000,
|
scaleByDistance_nearValue: 1,
|
// setHeight: 5000, //指定高度
|
label: {
|
text: "{项目名称}",
|
font_size: 25,
|
color: "#ffffff",
|
outline: true,
|
outlineColor: "#000000",
|
pixelOffsetY: -25,
|
scaleByDistance: true,
|
scaleByDistance_far: 80000,
|
scaleByDistance_farValue: 0.5,
|
scaleByDistance_near: 1000,
|
scaleByDistance_nearValue: 1,
|
distanceDisplayCondition: true,
|
distanceDisplayCondition_far: 80000,
|
distanceDisplayCondition_near: 0
|
}
|
}
|
},
|
popup: [
|
{ field: "项目名称", name: "项目名称" },
|
{ field: "建设性质", name: "建设性质" },
|
{ field: "设施级别", name: "设施级别" },
|
{ field: "所属区县", name: "所属区县" },
|
{ field: "建筑内容及", name: "建筑内容" },
|
{ field: "新增用地（", name: "新增用地" },
|
{ field: "开工", name: "开工" },
|
{ field: "总投资（万", name: "总投资" },
|
{ field: "资金来源", name: "资金来源" },
|
{ field: "初步选址", name: "初步选址" },
|
{ field: "设施类型", name: "设施类型" },
|
{ field: "设施等级", name: "设施等级" },
|
{ field: "所在区县", name: "所在区县" },
|
{ field: "具体位置", name: "具体位置" },
|
{ field: "建设内容（", name: "建设内容" },
|
{ field: "用地面积（", name: "用地面积", format: "mars3d.MeasureUtil.formatArea" },
|
{ field: "设施规模（", name: "设施规模" },
|
{ field: "举办者类型", name: "举办者类型" },
|
{ field: "开工时间", name: "开工时间" },
|
{ field: "总投资额（", name: "总投资额", unit: "亿元" },
|
{ field: "项目推进主", name: "项目推进主体" },
|
{ field: "项目进度", name: "项目进度" },
|
{ field: "项目来源", name: "项目来源" },
|
{ field: "备注", name: "备注" }
|
],
|
flyTo: true
|
})
|
map.addLayer(graphicLayer)
|
|
// 绑定事件
|
graphicLayer.on(mars3d.EventType.load, function (event) {
|
console.log("数据加载完成", event)
|
})
|
graphicLayer.on(mars3d.EventType.click, function (event) {
|
console.log("单击了图层", event)
|
})
|
}
|
|
/**
|
* 显示线数据
|
*
|
* @export showChinaLine
|
* @returns {void}
|
*/
|
export function showChinaLine() {
|
removeLayer()
|
|
graphicLayer = new mars3d.layer.GeoJsonLayer({
|
name: "全国省界",
|
url: "//data.mars3d.cn/file/geojson/areas/100000_full.json",
|
symbol: {
|
type: "polylineP", // polylineCombine，material添加材质方法不同
|
styleOptions: {
|
width: 2,
|
material: mars3d.MaterialUtil.createMaterial(mars3d.MaterialType.LineFlow, {
|
color: "#00ffff",
|
image: "img/textures/fence-line.png",
|
speed: 10,
|
repeat_x: 10
|
}),
|
distanceDisplayCondition: true,
|
distanceDisplayCondition_far: 12000000,
|
distanceDisplayCondition_near: 100000,
|
label: {
|
text: "{name}",
|
position: "{center}", // 省会位置center
|
font_size: 30,
|
color: "#ffffff",
|
outline: true,
|
outlineColor: "#000000",
|
scaleByDistance: true,
|
scaleByDistance_far: 60000000,
|
scaleByDistance_farValue: 0.2,
|
scaleByDistance_near: 1000000,
|
scaleByDistance_nearValue: 1,
|
distanceDisplayCondition: true,
|
distanceDisplayCondition_far: 10000000,
|
distanceDisplayCondition_near: 100000,
|
setHeight: 10000
|
}
|
}
|
},
|
flyTo: true
|
})
|
map.addLayer(graphicLayer)
|
|
// 绑定事件
|
graphicLayer.on(mars3d.EventType.load, function (event) {
|
console.log("数据加载完成", event)
|
})
|
}
|
|
/**
|
* 显示合肥区域面
|
*
|
* @export showRegion
|
* @returns {void}
|
*/
|
export function showRegion() {
|
removeLayer()
|
|
graphicLayer = new mars3d.layer.GeoJsonLayer({
|
name: "合肥市",
|
url: "//data.mars3d.cn/file/geojson/areas/340100_full.json",
|
symbol: {
|
styleOptions: {
|
fill: true,
|
randomColor: true, // 随机色
|
opacity: 0.3,
|
outline: true,
|
outlineStyle: {
|
color: "#FED976",
|
width: 3,
|
opacity: 1
|
},
|
// 高亮时的样式
|
highlight: {
|
opacity: 0.9
|
},
|
label: {
|
// 面中心点，显示文字的配置
|
text: "{name}", // 对应的属性名称
|
opacity: 1,
|
font_size: 40,
|
color: "#ffffff",
|
|
font_family: "楷体",
|
outline: true,
|
outlineColor: "#000000",
|
outlineWidth: 3,
|
|
background: false,
|
backgroundColor: "#000000",
|
backgroundOpacity: 0.1,
|
|
font_weight: "normal",
|
font_style: "normal",
|
|
scaleByDistance: true,
|
scaleByDistance_far: 20000000,
|
scaleByDistance_farValue: 0.1,
|
scaleByDistance_near: 1000,
|
scaleByDistance_nearValue: 1,
|
|
distanceDisplayCondition: false,
|
distanceDisplayCondition_far: 10000,
|
distanceDisplayCondition_near: 0,
|
visibleDepth: false
|
}
|
}
|
},
|
popup: "{name}",
|
// "tooltip": "{name}",
|
flyTo: true
|
})
|
map.addLayer(graphicLayer)
|
|
// 绑定事件
|
graphicLayer.on(mars3d.EventType.load, function (event) {
|
console.log("数据加载完成", event)
|
})
|
graphicLayer.on(mars3d.EventType.click, function (event) {
|
console.log("单击了图层", event)
|
})
|
}
|
|
/**
|
* 立体建筑物
|
*
|
* @export showBuilding
|
* @returns {void}
|
*/
|
export function showBuilding() {
|
removeLayer()
|
|
graphicLayer = new mars3d.layer.GeoJsonLayer({
|
name: "建筑物面",
|
url: "//data.mars3d.cn/file/geojson/buildings-demo.json",
|
symbol: {
|
styleOptions: {
|
color: "#0d3685",
|
outlineColor: "#0d3685",
|
opacity: 0.8
|
},
|
callback: function (attr, styleOpt) {
|
const diffHeight = Number(attr.floors || 1) * Number(attr.flo_height)
|
return { height: 0, diffHeight: diffHeight }
|
}
|
},
|
center: { lat: 31.928659, lng: 120.420654, alt: 838, heading: 344, pitch: -42 },
|
popup: "all",
|
flyTo: true
|
})
|
map.addLayer(graphicLayer)
|
|
// 绑定事件
|
graphicLayer.on(mars3d.EventType.load, function (event) {
|
console.log("数据加载完成", event)
|
})
|
}
|
|
/**
|
* 分层分户立体建筑物
|
*
|
* @export showFloor
|
* @returns {void}
|
*/
|
export function showFloor() {
|
removeLayer()
|
|
graphicLayer = new mars3d.layer.GeoJsonLayer({
|
name: "分层分户建筑物面",
|
url: "//data.mars3d.cn/file/geojson/huxing.json",
|
symbol: {
|
styleOptions: {
|
color: "#ffffff",
|
opacity: 0.2,
|
outline: true,
|
outlineColor: "#63AEFF",
|
outlineOpacity: 0.3,
|
|
highlight: {
|
type: "click",
|
color: "#00ffff",
|
opacity: 0.6
|
}
|
},
|
callback: function (attr, styleOpt) {
|
const flrH = attr.floorh || 0 // 底面高度
|
const lyrH = attr.layerh || 0 // 楼层高度
|
|
return { height: flrH, diffHeight: lyrH }
|
}
|
},
|
// popup: "all",
|
center: { lat: 31.821524, lng: 117.179329, alt: 255, heading: 25, pitch: -48 },
|
flyTo: true
|
})
|
map.addLayer(graphicLayer)
|
|
// 绑定事件
|
graphicLayer.on(mars3d.EventType.load, function (event) {
|
console.log("数据加载完成", event)
|
})
|
}
|
|
/**
|
* 显示面数据（安徽行政区划），鼠标高亮处理
|
*
|
* @export showPlanningSurface
|
* @returns {void}
|
*/
|
export function showPlanningSurface() {
|
removeLayer()
|
|
map.setCameraView({ lat: 31.591382, lng: 120.718945, alt: 784, heading: 279, pitch: -67 })
|
|
graphicLayer = new mars3d.layer.GeoJsonLayer({
|
id: 1987,
|
name: "用地规划",
|
url: "//data.mars3d.cn/file/geojson/guihua.json",
|
symbol: {
|
type: "polygonCombine",
|
styleOptions: {
|
opacity: 0.6,
|
color: "#0000FF"
|
},
|
styleField: "类型",
|
styleFieldOptions: {
|
一类居住用地: { color: "#FFDF7F" },
|
二类居住用地: { color: "#FFFF00" },
|
社区服务用地: { color: "#FF6A38" },
|
幼托用地: { color: "#FF6A38" },
|
商住混合用地: { color: "#FF850A" },
|
行政办公用地: { color: "#FF00FF" },
|
文化设施用地: { color: "#FF00FF" },
|
小学用地: { color: "#FF7FFF" },
|
初中用地: { color: "#FF7FFF" },
|
体育场用地: { color: "#00A57C" },
|
医院用地: { color: "#A5527C" },
|
社会福利用地: { color: "#FF7F9F" },
|
商业用地: { color: "#FF0000" },
|
商务用地: { color: "#7F0000" },
|
营业网点用地: { color: "#FF7F7F" },
|
一类工业用地: { color: "#A57C52" },
|
社会停车场用地: { color: "#C0C0C0" },
|
通信用地: { color: "#007CA5" },
|
排水用地: { color: "#00BFFF" },
|
公园绿地: { color: "#00FF00" },
|
防护绿地: { color: "#007F00" },
|
河流水域: { color: "#7FFFFF" },
|
配建停车场: { color: "#ffffff" },
|
道路用地: { color: "#ffffff" }
|
}
|
},
|
popup: "类型:{类型}"
|
// flyTo: true,
|
})
|
map.addLayer(graphicLayer)
|
|
// 下面代码演示如果再config.json中配置的图层，如何绑定额外事件方法
|
// 绑定config.json中对应图层配置的"id"值图层的单击事件（比如下面是id:1987对应图层）
|
const layerTest = map.getLayer(1987, "id")
|
// 绑定事件
|
layerTest.on(mars3d.EventType.load, function (event) {
|
console.log("数据加载完成", event)
|
})
|
|
layerTest.on(mars3d.EventType.click, function (event) {
|
// 单击事件
|
console.log("单击了图层", event)
|
})
|
}
|
|
/**
|
* 行政区划 ，转为wall显示
|
*
|
* @export showBoundaryWall
|
* @returns {void}
|
*/
|
export function showBoundaryWall() {
|
removeLayer()
|
|
map.setCameraView({ lat: 30.561661, lng: 117.663884, alt: 113078, heading: 346, pitch: -43 })
|
|
graphicLayer = new mars3d.layer.GeoJsonLayer({
|
name: "合肥市",
|
url: "//data.mars3d.cn/file/geojson/areas/340100_full.json",
|
symbol: {
|
type: "wall",
|
styleOptions: {
|
diffHeight: 5000, // 墙高
|
materialType: mars3d.MaterialType.LineFlow,
|
speed: 10, // 速度
|
image: "img/textures/fence.png", // 图片
|
repeatX: 1, // 重复数量
|
axisY: true, // 竖直方向
|
color: "#00ffff", // 颜色
|
opacity: 0.6, // 透明度
|
// 高亮时的样式
|
highlight: {
|
type: "click",
|
color: "#ffff00"
|
}
|
}
|
},
|
popup: "{name}"
|
// "tooltip": "{name}",
|
// flyTo: true,
|
})
|
map.addLayer(graphicLayer)
|
|
// 绑定事件
|
graphicLayer.on(mars3d.EventType.load, function (event) {
|
console.log("数据加载完成", event)
|
})
|
graphicLayer.on(mars3d.EventType.click, function (event) {
|
console.log("单击了图层", event)
|
})
|
}
|
|
/**
|
* 显示特殊面数据（单体化）
|
*
|
* @export showMonomer
|
* @returns {void}
|
*/
|
let tilesetLayer
|
export function showMonomer() {
|
removeLayer()
|
|
// 三维模型
|
if (!tilesetLayer) {
|
tilesetLayer = new mars3d.layer.TilesetLayer({
|
name: "文庙",
|
type: "3dtiles",
|
url: "//data.mars3d.cn/3dtiles/qx-simiao/tileset.json",
|
position: { alt: 80.6 },
|
maximumScreenSpaceError: 1,
|
maximumMemoryUsage: 1024,
|
show: true
|
})
|
map.addLayer(tilesetLayer)
|
}
|
|
graphicLayer = new mars3d.layer.GeoJsonLayer({
|
name: "文庙-单体化",
|
url: " //data.mars3d.cn/file/geojson/dth-wm.json",
|
symbol: {
|
type: "polygonP",
|
styleOptions: {
|
// 单体化默认显示样式
|
color: "rgba(255, 255, 255, 0.01)",
|
clampToGround: true,
|
classification: true,
|
// 单体化鼠标移入或单击后高亮的样式
|
highlight: {
|
// type: mars3d.EventType.click,
|
color: "rgba(255,255,0,0.4)"
|
}
|
}
|
},
|
popup: [
|
{ field: "name", name: "房屋名称" },
|
{ field: "jznf", name: "建造年份" },
|
{ field: "ssdw", name: "所属单位" },
|
{ field: "remark", name: "备注信息" }
|
],
|
center: { lat: 33.589442, lng: 119.031613, alt: 254, heading: 5, pitch: -37 },
|
flyTo: true
|
})
|
map.addLayer(graphicLayer)
|
|
// 绑定事件
|
graphicLayer.on(mars3d.EventType.load, function (event) {
|
console.log("数据加载完成", event)
|
})
|
}
|
|
/**
|
* 显示世界各国
|
*
|
* @export showWorld
|
* @returns {void}
|
*/
|
export function showWorld() {
|
removeLayer()
|
|
map.setCameraView({ lat: 22.564341, lng: 89.44688, alt: 10817167, heading: 0, pitch: -87 })
|
|
graphicLayer = new mars3d.layer.GeoJsonLayer({
|
name: "国界线",
|
url: "//data.mars3d.cn/file/geojson/world.json",
|
symbol: {
|
type: "polygonP",
|
styleOptions: {
|
fill: true,
|
// color: '#ffffff',
|
// opacity: 0.01,
|
randomColor: true,
|
opacity: 0.5,
|
|
// 高亮时的样式
|
highlight: {
|
type: "click",
|
color: "#ffff00"
|
}
|
},
|
styleField: "name",
|
styleFieldOptions: {
|
Russia: { clampToGround: true }
|
}
|
},
|
popup: "{name} {name_cn}"
|
})
|
map.addLayer(graphicLayer)
|
|
// 绑定事件
|
graphicLayer.on(mars3d.EventType.load, function (event) {
|
console.log("数据加载完成", event)
|
})
|
graphicLayer.on(mars3d.EventType.click, function (event) {
|
console.log("单击了图层", event)
|
})
|
}
|
|
export function setDefuatData() {
|
const defuat = {
|
enabledShowHide: true,
|
enabledPopup: true,
|
enabledTooltip: false,
|
enabledRightMenu: false
|
}
|
|
eventTarget.fire("defuatData", defuat)
|
}
|
