cesium地图，通过多点成面，显示框出来的面，计算面积

原创

已于 2023-02-20 10:36:23 修改 · 996 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2023-02-20 10:12:10 首次发布

该代码示例展示了如何在Cesium地图中使用Vue组件进行交互，包括选择地图样式、绘制点、线和面，以及测量距离和面积。通过监听鼠标点击事件，动态添加和更新地图上的点和几何形状，并提供清除所有绘制的功能。

<template>
    <div>
        <CesiumSelect @select="handleSelect" :modelValue="value" />
        <div id="cesiumContainer"></div>
        <button @click="draw('Polyline')">标点测距</button>
        <button @click="draw('Polygon')">标点测面</button>
        <button @click="clearAllDrawn()">清空数据</button>

    </div>
</template>
  
<script setup>
import { ref, onMounted } from "vue";
import * as Cesium from "cesium";
import { useRouter } from "vue-router";
import CesiumSelect from "../../components/cesium-select.vue";
const router = useRouter();
const value = ref('cesium-gird');
const handleSelect = (value) => {
    router.push({ name: value });
};

var tempEntities = []
var pointNum = 0
var floatingPoint = null
var activeShape = null
var viewer = null

onMounted(() => {
    // var viewer = new Cesium.Viewer("cesiumContainer", {
    //     //imageryProvider:使用的图像提供程序
    //     imageryProvider: new Cesium.UrlTemplateImageryProvider({
    //         url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
    //     }),
    // });
    // //通过imageryLayers获取图层列表集合
    // var layers = viewer.scene.imageryLayers;
    // //图层列表集合的addImageryProvider方法:
    // //两个参数，第一参数是一个ImageryProvider函数，这个函数的作用是新建一个图层;第二个参数是index，Number类型，作用是指定新插入图层在图层列表集合中的索引(位置)，若不指定，默认新图层添加在最上层
    // //返回值是新添加到图层列表集合中的图层
    // var blackMarble = layers.addImageryProvider(
    //     new Cesium.UrlTemplateImageryProvider({
    //         url: "http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8",
    //     })
    // );
    // //get或set图层透明度，范围是0-1
    // blackMarble.alpha = 1.0;

    // //get或set图层亮度，小于1图层更暗，大于1更亮
    // blackMarble.brightness = 1.0;

    // ==============================================
    viewer = new Cesium.Viewer("cesiumContainer", {
        //imageryProvider:使用的图像提供程序
        imageryProvider: new Cesium.UrlTemplateImageryProvider({
            url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
            subdomains: ['0', '1', '2', '3'],
            tilingScheme: new Cesium.WebMercatorTilingScheme()
        })
    });
    viewer.camera.lookAt(
        Cesium.Cartesian3.fromDegrees(116.41667, 39.91667, 1000.0),
        new Cesium.Cartesian3(0.0, 0.0, 5000.0)
    )
    viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY)
    // //通过imageryLayers获取图层列表集合
    // var layers = viewer.scene.imageryLayers;
    // //图层列表集合的addImageryProvider方法:
    // //两个参数，第一参数是一个ImageryProvider函数，这个函数的作用是新建一个图层;第二个参数是index，Number类型，作用是指定新插入图层在图层列表集合中的索引(位置)，若不指定，默认新图层添加在最上层
    // //返回值是新添加到图层列表集合中的图层
    // var blackMarble = layers.addImageryProvider(
    //     new Cesium.UrlTemplateImageryProvider({
    //         url: "http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8",
    //     })
    // );
    // //get或set图层透明度，范围是0-1
    // blackMarble.alpha = 1.0;

    // //get或set图层亮度，小于1图层更暗，大于1更亮
    // // blackMarble.brightness = 1.0;
    //     return


});
const getLength = (start, end) => {
    // 将起点与终点位置信息从笛卡尔坐标形式转换为Cartographic形式
    let startCartographic = Cesium.Cartographic.fromCartesian(start)
    let endCartograph

最低0.47元/天解锁文章