An error occurred while rendering. Rendering has stopped.
ReferenceError
: shouldShow is not defined
ReferenceError
: shouldShow is not defined
at http
://localhost
:8001/src/components/common-
map/live-
map.vue?t=1751774207331
:38
:23
at Proxy.forEach (<anonymous>)
at http
://localhost
:8001/src/components/common-
map/live-
map.vue?t=1751774207331
:37
:28
at invokeFunc (http
://localhost
:8001/node_modules/.vite/deps/lodash.js?v=6636ce6c
:3839
:28)
at leadingEdge (http
://localhost
:8001/node_modules/.vite/deps/lodash.js?v=6636ce6c
:3845
:30)
at debounced (http
://localhost
:8001/node_modules/.vite/deps/lodash.js?v=6636ce6c
:3887
:24)
at tD.raiseEvent (http
://localhost
:8001/libs/Cesium/Cesium.js
:96
:1282)
at Jt._updateCameraChanged (http
://localhost
:8001/libs/Cesium/Cesium.js
:11295
:124016)
at Xi.initializeFrame (http
://localhost
:8001/libs/Cesium/Cesium.js
:12477
:35438)
at uC.render (http
://localhost
:8001/libs/Cesium/Cesium.js
:12479
:1576)
如图所示报错为什么 修改以下代码：<template>
<div
id="cesiumContainer"></div>
<div ref="mini
MapContainer" class="mini-
map" @click="handleMini
MapClick">
<div class="location-indicator"
:style="indicatorStyle"></div>
<!-- 四个角折角 -->
<div class="corner corner-top-left"></div>
<div class="corner corner-top-right"></div>
<div class="corner corner-bottom-left"></div>
<div class="corner corner-bottom-right"></div>
<!-- <div class="camera-icon">📷</div> -->
<div class="focus-effect"></div>
<div class="pulse"></div>
</div>
<Search @location-selected="handleLocationSelected" />
<LocationBar
v-if="loaded"
:update-interval="100"
:use-dms-format="useDmsFormat"
/>
</template>
<style>
/* @import "/temp/css/divGraphic.css"; */
</style>
<script setup lang="ts">
import { computed, onUnmounted, onMounted, reactive } from "vue";
import LocationBar from "./location-bar.vue";
import Search from "./search.vue";
import init
Map from "./init";
import { ref } from "vue";
import { throttle } from 'lodash';
import { loadRipplePoints, createMultipleRippleCircles } from './circle.js';
import { $prototype } from "../../main.ts";
const mini
MapContainer = ref<HTMLElement>();
let viewIndicator
: Rectangle;
// 视图指示器样式
const currentPosition = reactive({
longitude
: 113.361538,
latitude
: 27.339318,
});
// 株洲市范围常量
const ZHUZHOU_EXTENT = {
west
: 112.5, // 株洲市西边界
east
: 114.5, // 株洲市东边界
south
: 26.0, // 株洲市南边界
north
: 28.0 // 株洲市北边界
};
const rippleEntities = ref<any[]>([]); // 存储波纹圆实体
const heightThreshold = 80000; // 高度阈值(米)，高于此值隐藏波纹圆
// 高度节流函数
const updateRippleVisibility = throttle(() => {
if (!$prototype.$
map || rippleEntities.value.length === 0) return;
rippleEntities.value.forEach(entity => {
entity.show =
shouldShow;
});
}, 200); // 每200毫秒最多执行一次
// 更新指示器位置
const updateIndicatorPosition = () => {
if (!$prototype.$
map) return;
const camera = $prototype.$
map.camera;
const rect = camera.computeViewRectangle();
if (!rect) return;
// 计算在株洲市范围内的相对位置
const center = Cesium.Rectangle.center(rect);
const lon = Cesium.Math.toDegrees(center.longitude);
const lat = Cesium.Math.toDegrees(center.latitude);
const lonPercent = ((lon - ZHUZHOU_EXTENT.west) /
(ZHUZHOU_EXTENT.east - ZHUZHOU_EXTENT.west)) * 100;
const latPercent = 100 - ((lat - ZHUZHOU_EXTENT.south) /
(ZHUZHOU_EXTENT.north - ZHUZHOU_EXTENT.south)) * 100;
// 更新CSS指示器
indicatorStyle.value = {
left
: `${lonPercent}%`,
top
: `${latPercent}%`,
display
: "block"
};
};
// 更新鹰眼地图 - 只更新指示器位置
const updateOverview = () => {
if (!$prototype.$
map || !overviewViewer.value) return;
// 获取主地图的当前视图中心
const rectangle = $prototype.$
map.camera.computeViewRectangle();
if (!rectangle) return;
const center = Cesium.Rectangle.center(rectangle);
currentPosition.longitude = Cesium.Math.toDegrees(center.longitude);
currentPosition.latitude = Cesium.Math.toDegrees(center.latitude);
// 更新指示器位置
updateIndicatorPosition();
};
const overviewViewer = ref(null);
// 初始化鹰眼地图 - 使用株洲市影像
const initMini
Map = () => {
Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIxMDhlNDdmYy03NzFhLTQ1ZTQtOWQ3NS1lZDAzNDc3YjE4NDYiLCJpZCI6MzAxNzQyLCJpYXQiOjE3NDcwNTMyMDN9.eaez8rQxVbPv2LKEU0sMDclPWyHKhh1tR27Vg-_rQSM";
if (!mini
MapContainer.value) return;
// 创建株洲市专用影像提供器
const zhuzhouProv
ider = new Cesium.UrlTemplateImageryProv
ider({
url
: "http
://124.232.190.30
:9000/proxy/pk1725866655224/
map/zzzsyx_18/{z}/{x}/{y}.png",
minimumLevel
: 1,
maximumLevel
: 17,
crs
: "EPSG
:3857",
});
// 鹰眼地图初始化 - 使用株洲市影像
overviewViewer.value = new Cesium.Viewer(mini
MapContainer.value, {
sceneMode
: Cesium.SceneMode.SCENE2D,
baseLayerPicker
: false,
homeButton
: false,
timeline
: false,
navigationHelpButton
: false,
animation
: false,
scene3DOnly
: true,
selectionIndicator
: false,
infoBox
: false,
imageryProv
ider
: zhuzhouProv
ider, // 使用株洲市影像
terrainProv
ider
: window.Cesium.createWorldTerrain(),
});
// 设置固定视野为株洲市范围
overviewViewer.value.camera.setView({
destination
: Cesium.Rectangle.fromDegrees(
ZHUZHOU_EXTENT.west,
ZHUZHOU_EXTENT.south,
ZHUZHOU_EXTENT.east,
ZHUZHOU_EXTENT.north
)
});
// 隐藏控件
var toolbar = overviewViewer.value.container.getElementsByClassName("cesium-viewer-toolbar")[0];
if (toolbar) toolbar.style.display = "none";
overviewViewer.value.cesiumW
idget.creditContainer.style.display = "none";
};
// 初始化视图指示器
function initRectangle() {
// 创建视图指示器（株洲市范围框）
viewIndicator = overviewViewer.value.entities.add({
rectangle
: {
coordinates
: new Cesium.CallbackProperty(() => {
return Cesium.Rectangle.fromDegrees(
ZHUZHOU_EXTENT.west,
ZHUZHOU_EXTENT.south,
ZHUZHOU_EXTENT.east,
ZHUZHOU_EXTENT.north
);
}, false),
material
: Cesium.Color.RED.withAlpha(0.3),
outline
: true,
outlineColor
: Cesium.Color.RED,
outlineW
idth
: 2,
},
});
}
// 指示器样式计算
const indicatorStyle = computed(() => {
return {}; // 由updateIndicatorPosition直接设置
});
const loaded = ref(false);
const useDmsFormat = ref(false);
function addDemoGraphics() {
const chinaBoundary = $prototype.$
map.dataSources.add(
Cesium.GeoJsonDataSource.load("/shp_zz.geojson", {
stroke
: Cesium.Color.WHITE,
fill
: false,
clampToGround
: true,
descri
be: null,
})
);
chinaBoundary.then((dataSource) => {
const entities = dataSource.entities.values;
for (let entity of entities) {
if (entity.polyline) {
entity.polyline.fill = false;
}
}
});
}
function flyToDes() {
const center = Cesium.Cartesian3.fromDegrees(-98.0, 40.0);
$prototype.$
map.camera.flyTo({
destination
: new Cesium.Cartesian3(
-2432812.6687511606,
5559483.804371395,
2832009.419525571
),
orientation
: {
heading
: 6.283185307179421,
pitch
: -1.0472145569408116,
roll
: 6.2831853071795205,
},
complete
: function () {},
});
}
// 监听主地图相机变化
const setupCameraListener = () => {
$prototype.$
map.camera.changed.addEventListener(updateOverview);
};
// 鹰眼地图点击处理
const handleMini
MapClick = (event
: MouseEvent) => {
if (!mini
MapContainer.value || !overviewViewer.value) return;
const rect = mini
MapContainer.value.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
// 计算在固定范围内的相对位置
const xPercent = (x / rect.w
idth) * 100;
const yPercent = (y / rect.height) * 100;
// 转换为株洲市范围内的经纬度
const lon = ZHUZHOU_EXTENT.west +
(xPercent / 100) * (ZHUZHOU_EXTENT.east - ZHUZHOU_EXTENT.west);
const lat = ZHUZHOU_EXTENT.north -
(yPercent / 100) * (ZHUZHOU_EXTENT.north - ZHUZHOU_EXTENT.south);
// 主地图飞向点击位置
$prototype.$
map.camera.flyTo({
destination
: Cesium.Cartesian3.fromDegrees(lon, lat, 1000000),
});
};
function addImage() {
var rightImageProv
ider = new Cesium.UrlTemplateImageryProv
ider({
name
: "影像图",
type
: "xyz",
layer
: "vec_d",
url
: "http
://124.232.190.30
:9000/proxy/pk1725866655224/
map/zzzsyx_18/{z}/{x}/{y}.png",
minimumLevel
: 1,
maximumLevel
: 17,
crs
: "EPSG
:3857",
});
$prototype.$
map.imageryLayers.addImageryProv
ider(rightImageProv
ider);
rightImageProv
ider.splitDirection = Cesium.SplitDirection.right;
}
onMounted(() => {
init
Map();
addImage();
loaded.value = true;
addDemoGraphics();
flyToDes();
initMini
Map();
setupCameraListener();
setTimeout(function () {
initRectangle();
}, 2000);
(async () => {
try {
const ripplePoints = await loadRipplePoints();
rippleEntities.value = createMultipleRippleCircles(
$prototype.$
map,
ripplePoints
);
$prototype.$
map.camera.changed.addEventListener(updateRippleVisibility);
updateRippleVisibility();
} catch (error) {
console.error('加载波纹圆失败
:', error);
}
})();
});
let current
Marker: any = null;
const create
Marker = (location
: { lng
: number; lat
: number; name
: string }) => {
if (current
Marker) {
$prototype.$
map.entities.remove(current
Marker);
}
current
Marker = $prototype.$
map.entities.add({
position
: Cesium.Cartesian3.fromDegrees(
location.lng,
location.lat,
50
),
point
: {
pixelSize
: 200,
color
: Cesium.Color.RED,
outlineColor
: Cesium.Color.WHITE,
outlineW
idth
: 2,
heightReference
: Cesium.HeightReference.RELATIVE_TO_GROUND,
},
la
bel
: {
text
: location.name,
font
: "40px sans-serif",
fillColor
: Cesium.Color.WHITE,
outlineColor
: Cesium.Color.BLACK,
outlineW
idth
: 1,
verticalOrigin
: Cesium.VerticalOrigin.BOTTOM,
pixelOffset
: new Cesium.Cartesian2(0, -20),
heightReference
: Cesium.HeightReference.RELATIVE_TO_GROUND,
distanceDisplayCondition
: new Cesium.DistanceDisplayCondition(0, 10000),
},
description
: `<div style="padding
: 10px;">
<h3 style="margin
: 0 0 5px 0;">${location.name}</h3>
<p>经度：${location.lng.toFixed(6)}</p>
<p>纬度：${location.lat.toFixed(6)}</p>
</div>`,
});
return current
Marker;
};
const handleLocationSelected = (location
: { lng
: number; lat
: number; name
: string; }) => {
if (!$prototype.$
map) return;
const destination = Cesium.Cartesian3.fromDegrees(
location.lng,
location.lat,
200
);
$prototype.$
map.camera.flyTo({
destination,
orientation
: {
heading
: Cesium.Math.toRadians(0),
pitch
: Cesium.Math.toRadians(-45),
roll
: 0,
},
duration
: 2,
complete
: () => {
create
Marker(location);
},
});
};
onUnmounted(() => {
if ($prototype.$
map) {
$prototype.$
map.destroy();
$prototype.$
map = null;
}
if ($prototype.$
map) {
$prototype.$
map.camera.changed.removeEventListener(updateRippleVisibility);
}
console.log("组件销毁");
});
const emit = defineEmits(["onload", "onclick"]);
const initMars3d = async (option
: any) => {
emit("onclick", true);
emit("onload", $prototype.$
map);
};
</script>
<style lang="less">
/**cesium 工具按钮栏*/
.cesium-viewer-toolbar {
top
: auto !important;
bottom
: 35px !important;
left
: 12px !important;
right
: auto !important;
}
.cesium-toolbar-button img {
height
: 100%;
}
.cesium-viewer-toolbar > .cesium-toolbar-button,
.cesium-navigationHelpButton-wrapper,
.cesium-viewer-geocoderContainer {
margin-bottom
: 5px;
float
: left;
clear
: both;
text-align
: center;
}
.cesium-button {
background-color
: rgba(23, 49, 71, 0.8);
color
: #e6e6e6;
fill
: #e6e6e6;
box-shadow
: 0 1px 4px rgba(0, 0, 0, 0.3);
line-height
: 32px;
}
.cesium-button
:hover {
background
: #3ea6ff;
}
/**cesium 底图切换面板*/
.cesium-baseLayerPicker-dropDown {
bottom
: 0;
left
: 40px;
max-height
: 700px;
margin-bottom
: 5px;
background-color
: rgba(23, 49, 71, 0.8);
}
/**cesium 帮助面板*/
.cesium-navigation-help {
top
: auto;
bottom
: 0;
left
: 40px;
transform-origin
: left bottom;
background
: none;
background-color
: rgba(23, 49, 71, 0.8);
.cesium-navigation-help-instructions {
background
: none;
}
.cesium-navigation-button {
background
: none;
}
.cesium-navigation-button-selected,
.cesium-navigation-button-unselected
:hover {
background
: rgba(0, 138, 255, 0.2);
}
}
/**cesium 二维三维切换*/
.cesium-sceneModePicker-wrapper {
w
idth
: auto;
}
.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-dropDown-icon {
float
: right;
margin
: 0 3px;
}
/**cesium POI查询输入框*/
.cesium-viewer-geocoderContainer .search-results {
left
: 0;
right
: 40px;
w
idth
: auto;
z-index
: 9999;
}
.cesium-geocoder-searchButton {
background-color
: rgba(23, 49, 71, 0.8);
}
.cesium-viewer-geocoderContainer .cesium-geocoder-input {
background-color
: rgba(63, 72, 84, 0.7);
}
.cesium-viewer-geocoderContainer .cesium-geocoder-input
:focus {
background-color
: rgba(63, 72, 84, 0.9);
}
.cesium-viewer-geocoderContainer .search-results {
background-color
: rgba(23, 49, 71, 0.8);
}
/**cesium info信息框*/
.cesium-infoBox {
top
: 50px;
background-color
: rgba(23, 49, 71, 0.8);
}
.cesium-infoBox-title {
background-color
: rgba(23, 49, 71, 0.8);
}
/**cesium 任务栏的FPS信息*/
.cesium-performanceDisplay-defaultContainer {
top
: auto;
bottom
: 35px;
right
: 50px;
}
.cesium-performanceDisplay-ms,
.cesium-performanceDisplay-fps {
color
: #fff;
}
/**cesium tileset调试信息面板*/
.cesium-viewer-cesiumInspectorContainer {
top
: 10px;
left
: 10px;
right
: auto;
}
.cesium-cesiumInspector {
background-color
: rgba(23, 49, 71, 0.8);
}
/**覆盖mars3d内部控件的颜色等样式*/
.mars3d-compass .mars3d-compass-outer {
fill
: rgba(23, 49, 71, 0.8);
}
.mars3d-contextmenu-ul,
.mars3d-sub-menu {
background-color
: rgba(23, 49, 71, 0.8);
> li > a
:hover,
> li > a
:focus,
> li > .active {
background-color
: #3ea6ff;
}
> .active > a,
> .active > a
:hover,
> .active > a
:focus {
background-color
: #3ea6ff;
}
}
/* Popup样式*/
.mars3d-popup-color {
color
: #ffffff;
}
.mars3d-popup-background {
background
: rgba(23, 49, 71, 0.8);
}
.mars3d-popup-content {
margin
: 15px;
}
.mars3d-template-content la
bel {
padding-right
: 6px;
}
.mars3d-template-titile {
border-bottom
: 1px sol
id #3ea6ff;
}
.mars3d-template-titile a {
font-size
: 16px;
}
.mars3d-tooltip {
background
: rgba(23, 49, 71, 0.8);
border
: 1px sol
id rgba(23, 49, 71, 0.8);
}
.mars3d-popup-btn-custom {
padding
: 3px 10px;
border
: 1px sol
id #209ffd;
background
: #209ffd1c;
}
.mars-dialog .mars-dialog__content {
height
: 100%;
w
idth
: 100%;
overflow
: auto;
padding
: 5px;
}
.image {
border
: sol
id 2px #fff;
}
.content {
height
: 90%;
padding-top
: 10px;
overflow-x
: auto;
overflow-y
: auto;
}
.content-text {
padding
: 0 10px;
text-indent
: 30px;
font-size
: 17px;
}
.details-v
ideo {
w
idth
: 100%;
height
: 760px;
background-color
: #000;
}
:where(.css-lt97qq9).ant-space {
display
: inline-flex;
}
:where(.css-lt97qq9).ant-space-align-center {
align-items
: center;
}
:where(.css-lt97qq9).ant-image .ant-image-mask {
position
: absolute;
inset
: 0;
display
: flex;
align-items
: center;
justify-content
: center;
color
: #fff;
background
: rgba(0, 0, 0, 0.5);
cursor
: pointer;
opacity
: 0;
transition
: opacity 0.3s;
}
:where(.css-lt97qq9).ant-image .ant-image-mask .ant-image-mask-info {
overflow
: h
idden;
white-space
: nowrap;
text-overflow
: ellipsis;
padding
: 0 4px;
}
:where(.css-1t97qq9)[class^="ant-image"] [class^="ant-image"],
:where(.css-1t97qq9)[class*=" ant-image"] [class^="ant-image"],
:where(.css-1t97qq9)[class^="ant-image"] [class*=" ant-image"],
:where(.css-1t97qq9)[class*=" ant-image"] [class*=" ant-image"] {
box-sizing
: border-box;
}
:where(.css-lt97qq9).ant-image .ant-image-img {
w
idth
: 100%;
height
: auto;
vertical-align
: m
iddle;
}
</style>
<style scoped>
.mini-
map-container {
position
: relative;
w
idth
: 100%;
height
: 100%;
}
.main-viewer {
w
idth
: 100%;
height
: 100%;
}
.mini-
map {
position
: absolute;
right
: 3vw;
bottom
: 6vh;
w
idth
: 12vw;
height
: 17vh;
border
: 2px sol
id #fff;
box-shadow
: 0 0 10px rgba(0, 0, 0, 0.5);
z-index
: 999;
cursor
: pointer;
overflow
: h
idden;
}
.location-indicator {
position
: absolute;
w
idth
: 14px;
height
: 14px;
background
: #ff3e3e;
border
: 2px sol
id white;
border-radius
: 50%;
transform
: translate(-50%, -50%);
box-shadow
: 0 0 15px rgba(255, 62, 62, 1);
z-index
: 100;
}
.view-rectangle {
position
: absolute;
border
: 2px sol
id #00f2fe;
z-index
: 99;
pointer-events
: none;
box-shadow
: 0 0 20px rgba(0, 242, 254, 0.7);
}
/* 相机聚焦样式 - 四个角折角 */
.corner {
position
: absolute;
w
idth
: 25px;
height
: 25px;
z-index
: 100;
pointer-events
: none;
}
.corner
::before,
.corner
::after {
content
: "";
position
: absolute;
background
: #00f2fe;
box-shadow
: 0 0 10px rgba(0, 242, 254, 0.8);
}
.corner-top-left {
top
: -2px;
left
: -2px;
}
.corner-top-left
::before {
top
: 0;
left
: 0;
w
idth
: 15px;
height
: 3px;
}
.corner-top-left
::after {
top
: 0;
left
: 0;
w
idth
: 3px;
height
: 15px;
}
.corner-top-right {
top
: -2px;
right
: -2px;
}
.corner-top-right
::before {
top
: 0;
right
: 0;
w
idth
: 15px;
height
: 3px;
}
.corner-top-right
::after {
top
: 0;
right
: 0;
w
idth
: 3px;
height
: 15px;
}
.corner-bottom-left {
bottom
: -2px;
left
: -2px;
}
.corner-bottom-left
::before {
bottom
: 0;
left
: 0;
w
idth
: 15px;
height
: 3px;
}
.corner-bottom-left
::after {
bottom
: 0;
left
: 0;
w
idth
: 3px;
height
: 15px;
}
.corner-bottom-right {
bottom
: -2px;
right
: -2px;
}
.corner-bottom-right
::before {
bottom
: 0;
right
: 0;
w
idth
: 15px;
height
: 3px;
}
.corner-bottom-right
::after {
bottom
: 0;
right
: 0;
w
idth
: 3px;
height
: 15px;
}
.camera-icon {
position
: absolute;
top
: 10px;
right
: 10px;
color
: #00f2fe;
font-size
: 24px;
z-index
: 100;
text-shadow
: 0 0 10px rgba(0, 242, 254, 0.8);
}
.focus-effect {
position
: absolute;
top
: 0;
left
: 0;
w
idth
: 100%;
height
: 100%;
pointer-events
: none;
z-index
: 98;
border
: 2px sol
id rgba(0, 242, 254, 0.2);
border-radius
: 5px;
box-shadow
: inset 0 0 30px rgba(0, 242, 254, 0.1);
}
.pulse {
position
: absolute;
top
: 50%;
left
: 50%;
transform
: translate(-50%, -50%);
w
idth
: 10px;
height
: 10px;
border-radius
: 50%;
background
: rgba(0, 242, 254, 0.7);
box-shadow
: 0 0 0 0 rgba(0, 242, 254, 0.7);
animation
: pulse 2s infinite;
}
::v-deep.cesium-viewer-toolbar {
display
: none;
}
</style>
本文针对微信小程序地图组件中出现的“markeridshouldbeanumber”错误进行了详细解析，并提供了快速有效的解决方案。通过查阅官方文档，发现markerid虽非必填项，但确保其为数字类型即可避免该错误。
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-daYCYpSJ-1648644725150)(uniapp基础知识.assets/image-20220324184757526.png)]](https://i-blog.csdnimg.cn/blog_migrate/68563c1d29ab0e9d1a25a9d8b654965d.png)
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EVtendHA-1648644725151)(uniapp基础知识.assets/image-20220324184815897.png)]](https://i-blog.csdnimg.cn/blog_migrate/ca345e43026f8a55932e7f3d4239cdb2.png)
扫一扫
664
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
