在学习cesium中,有这么一个需求,就是手动圈中一个面【多边形】,然后在地图上标注一些标实体,并判断这些实体哪些在面内加以区分。
- 利用Turf.js库里面的booleanPointInPolygon API方法 ,取一个点和手动圈中多边形或多边形集合,并判断该点是否位于该多边形内部(多边形可以是凸多边形或凹多边形),在内部是point的color变为红色加以区分 booleanPointInPolygon | Turf.js中文网 (fenxianglu.cn)
- 线和面是一样的道理,获取里面的positions位置与多边形进行判断,包含就让material变为红色加以区分。
import * as Cesium from 'cesium'; import { useEffect } from 'react'; import Header from '../../components/Header/index' import { Button } from 'antd'; import doesItIncludeEntities from '../../utils/measure' function App() { const style = { width: "100%", height: "100vh", } let viewer: Cesium.Viewer; let does: doesItIncludeEntities; useEffect(() => { Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0ZDJiYWZjNy01YWIzLTQ5MDQtOWRjMC1lNzRjMzZlNDkxZjgiLCJpZCI6MTYzNzI4LCJpYXQiOjE2OTM0NzM4NTZ9.TZLI1V4-2pYZoVSbt-zOkV7Yx7elhjAsqfFt5h4Nrlk"; viewer = new Cesium.Viewer('cesiumContainer', { shouldAnimate: true, //是否允许动画 selectionIndicator: false, baseLayerPicker: false, fullscreenButton: false, geocoder: false, homeButton: false, infoBox: false, sceneModePicker: false, timeline: false, navigationHelpButton: false, navigationInstructionsInitiallyVisible: false, showRenderLoopErrors: false, shadows: false, terrain: Cesium.Terrain.fromWorldTerrain(), }); viewer.scene.debugShowFramesPerSecond = true; viewer._cesiumWidget._creditContainer.style.display = "none"; //去除版权信息 viewer.camera.setView({ destination: new Cesium.Cartesian3( -2267365.9077936024, 5026893.279706578, 3202033.0742220455 ), orientation: { heading: 6.275940369857615, pitch: -0.7210338041102347, roll: 6.283157048530953, }, }); //加载实体 viewer.entities.add({ id: 'point', name: "点1", position: new Cesium.Cartesian3(-2265189.515941492, 5021589.076157024, 3204135.208763753), point: { color: Cesium.Color.PINK, pixelSize: 20, }, properties: { entityType: 'point' // 添加 entityType 属性 } }) viewer.entities.add({ id: 'point2', name: "点2", position: new Cesium.Cartesian3(-2266291.515941492, 5021589.076157024, 3204135.208763753), point: { color: Cesium.Color.WHITE,