Skip to content

C
cesium-frame
Commit e94683c5 by jlc
Options

update：经纬网络2D代码结构的修改

parent 5df687dd
Showing with 94 additions and 89 deletions
src/examples/sceneSet/jingweiNetwork2D/jingweiNetwork2D-function.js
export function addJingweiNetwork2D() { export function addJingweiNetwork2D(viewer) {
const script = document.createElement('script'); if(Cesium.FeatureDetection.supportsImageRenderingPixelated()){ // 判断是否支持图像渲染像素化处理
script.src = 'https://cesium.com/downloads/cesiumjs/releases/1.99/Build/Cesium/Cesium.js'; viewer.resolutionScale = window.devicePixelRatio;
script.onload = () => { }
window.Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3Njg4ZWU5Yi1iZDhiLTRhYmUtOTRiYS04YjM5NmUwNjVmMDMiLCJpZCI6MjI3MzQ3LCJpYXQiOjE3MjA1MjA4Mjh9.E5XW4LnwgfVAaBC-znaYr61m4yK0-j2qEQhi9qwFFPE' // 开启抗锯齿(在折线进行放大的时候会出现锯齿状的形态，开启抗锯齿可以避免这种情况)
viewer.scene.fxaa = true;
viewer.scene.postProcessStages.fxaa.enabled = true;
const viewer = new window.Cesium.Viewer('cesiumContainer', { const entities = viewer.entities;
infoBox: false, for (let lang = -180; lang <= 180; lang += 20) {
sceneMode: window.Cesium.SceneMode.SCENE2D let text = "";
}); if (lang === 0) {
text = "0";
if(Cesium.FeatureDetection.supportsImageRenderingPixelated()){ // 判断是否支持图像渲染像素化处理
viewer.resolutionScale = window.devicePixelRatio;
} }
// 开启抗锯齿(在折线进行放大的时候会出现锯齿状的形态，开启抗锯齿可以避免这种情况) text += lang === 0 ? "" : "" + lang + "°";
viewer.scene.fxaa = true; if (lang === -180) {
viewer.scene.postProcessStages.fxaa.enabled = true; text = "";
const entities = viewer.entities;
for (let lang = -180; lang <= 180; lang += 20) {
let text = "";
if (lang === 0) {
text = "0";
}
text += lang === 0 ? "" : "" + lang + "°";
if (lang === -180) {
text = "";
}
entities.add({
position: Cesium.Cartesian3.fromDegrees(lang, 0),
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray([
lang,
-90,
lang,
0,
lang,
90,
]),
width: 1.0,
material: Cesium.Color.WHITE,
},
label: {
text: text,
verticalOrigin: Cesium.VerticalOrigin.TOP,
font: "12px sans-serif",
fillColor: Cesium.Color.WHITE,
},
});
} }
//纬度 entities.add({
let langS = []; position: Cesium.Cartesian3.fromDegrees(lang, 0),
for (let lang = -180; lang <= 180; lang += 5) { polyline: {
langS.push(lang); positions: Cesium.Cartesian3.fromDegreesArray([
} lang,
// 每隔10读绘制一条纬度线和纬度标注 -90,
for (let lat = -80; lat <= 80; lat += 10) { lang,
let text = ""; 0,
text += "" + lat + "°"; lang,
if (lat === 0) { 90,
text = ""; ]),
}
entities.add({
position: Cesium.Cartesian3.fromDegrees(0, lat),
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray(
langS
.map((long) => {
return [long, lat].join(",");
})
.join(",")
.split(",")
.map((item) => Number(item))
),
width: 1.0, width: 1.0,
material: Cesium.Color.WHITE, material: Cesium.Color.WHITE,
}, },
label: { label: {
text: text, text: text,
font: "12px sans-serif", verticalOrigin: Cesium.VerticalOrigin.TOP,
fillColor: Cesium.Color.WHITE, font: "12px sans-serif",
}, fillColor: Cesium.Color.WHITE,
}); },
} });
}; }
document.head.appendChild(script);
const link = document.createElement('link'); //纬度
link.rel = 'stylesheet'; let langS = [];
link.href = 'https://cesium.com/downloads/cesiumjs/releases/1.119/Build/Cesium/Widgets/widgets.css'; for (let lang = -180; lang <= 180; lang += 5) {
document.head.appendChild(link); langS.push(lang);
}
// 每隔10读绘制一条纬度线和纬度标注
for (let lat = -80; lat <= 80; lat += 10) {
let text = "";
text += "" + lat + "°";
if (lat === 0) {
text = "";
}
entities.add({
position: Cesium.Cartesian3.fromDegrees(0, lat),
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray(
langS
.map((long) => {
return [long, lat].join(",");
})
.join(",")
.split(",")
.map((item) => Number(item))
),
width: 1.0,
material: Cesium.Color.WHITE,
},
label: {
text: text,
font: "12px sans-serif",
fillColor: Cesium.Color.WHITE,
},
});
}
} }
src/examples/sceneSet/jingweiNetwork2D/jingweiNetwork2D.vue
<template> <template>
<div id="cesiumContainer" class="cesium-container"></div> <div id="cesiumContainer" class="cesium-container"></div>
</template> </template>
<script setup> <script setup>
import { onMounted } from 'vue'; import { onMounted } from 'vue';
import { addJingweiNetwork2D } from './function'; import { addJingweiNetwork2D } from './function';
let viewer;
onMounted(() => { onMounted(() => {
addJingweiNetwork2D() const script = document.createElement('script');
script.src = 'https://cesium.com/downloads/cesiumjs/releases/1.99/Build/Cesium/Cesium.js';
script.onload = () => {
window.Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3Njg4ZWU5Yi1iZDhiLTRhYmUtOTRiYS04YjM5NmUwNjVmMDMiLCJpZCI6MjI3MzQ3LCJpYXQiOjE3MjA1MjA4Mjh9.E5XW4LnwgfVAaBC-znaYr61m4yK0-j2qEQhi9qwFFPE'
viewer = new window.Cesium.Viewer('cesiumContainer', {
infoBox: false,
sceneMode: window.Cesium.SceneMode.SCENE2D
});
addJingweiNetwork2D(viewer)
};
document.head.appendChild(script);
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'https://cesium.com/downloads/cesiumjs/releases/1.119/Build/Cesium/Widgets/widgets.css';
document.head.appendChild(link);
}); });
</script> </script>
<style> <style>
.cesium-container { .cesium-container {
width: 100%; width: 100%;
height: 100vh; height: 100vh;
} }
</style> </style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment