new mars3d.layer.GeoJsonLayer({渲染后实现鼠标左键按住不释放拖动时，地图不跟着拖动效果
当前问题：
1.在map初始化，或者是加载效果的时候，整个地球的场景都是一样的。
如果鼠标左键按住不释放，在屏幕上拖动的时候，地图会跟着拖动。
2.想要的效果是，鼠标左键按住不释放，拖动的时候，地图不跟着跑
效果描述：
1.左键按住就会拖动地图跑
相关示例链接：
功能示例(Vue版) | Mars3D三维可视化平台 | 火星科技
这种时候，就需要对整个场景的相机进行相关设置：
可以直接通过原生cesium的api进行实现。
关键代码：
map.viewer.scene.screenSpaceCameraController.enableRotate = false限制相机的操作，平移，旋转，2、3D视角各不同
说明：Mars3d的api同样支持限制修改，相机操作相关参数
搜索api：Mars3D三维可视化平台 | 火星科技
效果实时体验：在以下代码全部复制到我们示例运行即可
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
// map.on(mars3d.EventType.removeLayer, function (event) {
// console.log("移除了图层", event)
// })
map.viewer.scene.screenSpaceCameraController.enableRotate = false
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 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 function showPoint() {
removeLayer()
window._test_button_click = function (attr) {
globalAlert(JSON.stringify(attr), "测试查看详情")
}
graphicLayer = new mars3d.layer.GeoJsonLayer({
name: "体育设施点",
url: "//data.mars3d.cn/file/geojson/hfty-point.json",
symbol: {
styleOptions: {
image: "img/marker/mark-red.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: "备注" },
{ name: "详情", type: "button", className: "mars3d-popup-btn-custom", callback: "_test_button_click" }
],
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 function showChinaLine() {
removeLayer()
graphicLayer = new mars3d.layer.GeoJsonLayer({
name: "全国省界",
url: "//data.mars3d.cn/file/geojson/areas/100000_full.json",
format: simplifyGeoJSON, // 用于自定义处理geojson
symbol: {
type: "polylineP",
styleOptions: {
width: 2,
materialType: mars3d.MaterialType.LineFlow,
materialOptions: {
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)
})
}
// 简化geojson的坐标
function simplifyGeoJSON(geojson) {
try {
geojson = turf.simplify(geojson, { tolerance: 0.0001, highQuality: true, mutate: true })
} catch (e) {
//
}
return geojson
}
/**
* 显示合肥区域面
*/
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,
outlineStyle: {
width: 6,
color: "#ff0000",
addHeight: 100
},
label: { show: true }
},
label: {
show: false,
// 面中心点，显示文字的配置
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 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: "用地规划",
// 1.支持URL
url: "//data.mars3d.cn/file/geojson/guihua.json",
// 2.也支持直接传入数据
// data: {
// type: "FeatureCollection",
// name: "用地规划",
// features: [] //数据已省略，可以从上面guihua.json中复制
// },
symbol: {
type: "polygonC",
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.getLayerById(1987)
// 绑定事件
layerTest.on(mars3d.EventType.load, function (event) {
console.log("数据加载完成", event)
})
layerTest.on(mars3d.EventType.click, function (event) {
// 单击事件
console.log("单击了图层", event)
})
}
/**
* 立体建筑物
*/
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 }
}
},
center: { lat: 31.928659, lng: 120.420654, alt: 838, heading: 344, pitch: -42 },
popup: "all",
popupOptions: {
showNull: true
},
flyTo: true
})
map.addLayer(graphicLayer)
// 绑定事件
graphicLayer.on(mars3d.EventType.load, function (event) {
console.log("数据加载完成", event)
})
}
/**
* 分层分户立体建筑物
*/
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)
})
}
/**
* 行政区划 ，转为wall显示
*/
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,
materialOptions: {
color: "#00ffff", // 颜色
opacity: 0.6, // 透明度
image: "img/textures/fence.png", // 图片
repeatX: 1, // 重复数量
axisY: true, // 竖直方向
speed: 10 // 速度
},
// 高亮时的样式
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)
})
}
/**
* 显示特殊面数据（单体化）
*/
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: 38.8 },
maximumScreenSpaceError: 1,
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 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)
})
}
// 加载GCJ数据进行纠偏
export function showGCJ02Data() {
removeLayer()
const gcjLayer = new mars3d.layer.GeoJsonLayer({
name: "纠偏前",
url: "//data.mars3d.cn/file/geojson/areas/340303.json",
symbol: {
styleOptions: {
fill: false,
outline: true,
outlineStyle: {
color: "#FF0000",
width: 3
}
}
},
popup: "纠偏前GCJ02坐标"
})
map.addLayer(gcjLayer)
graphicLayer = new mars3d.layer.GeoJsonLayer({
name: "纠偏后",
url: "//data.mars3d.cn/file/geojson/areas/340303.json",
chinaCRS: mars3d.ChinaCRS.GCJ02, // 标识数据坐标，内部会纠偏
symbol: {
styleOptions: {
fill: false,
outline: true,
outlineStyle: {
color: "#00ffff",
width: 3
}
}
},
popup: "纠偏后WGS坐标",
flyTo: true
})
map.addLayer(graphicLayer)
}
