（五）关于cesium地图的使用：实现添加区域，编辑区域并保存

1、html部分

<template><div id="playArea" class="container"><div id="mapContainer"></div><div class="mapBtn"><el-buttonv-if="isEditStatus"class="custom green button map-btn"@click="editPoint">编辑范围</el-button><el-buttonv-elseclass="custom green button map-btn"@click="addPoint">添加范围</el-button><el-buttonclass="custom green button map-btn"@click="savePoint">保存范围</el-button></div></div>
</template>

2、js部分：实现对某一个街道进行手动勾画区域并保存，保存结束后并支持修改区域。

export default {data() {return {polygonPointsEntities: [],             // 区域的点位集合polygonPointsEntitiesLine: [],         // 连线的多点polygonPointsEntitiesEntity: [],       // 区域查询所画线实体pointPositionList: [],                 // 画点的经纬度集合editPoints: [],                        // 编辑时编辑点集合,删除点用isAddStatus:false,                     // 是否是添加区域isEditStatus:false,                    // 是否是编辑区域spaceArea:"",                          // 区域范围坐标polygonEntity:null,                    // 区域面实体isSaved:false,                         // 保存状态viewer: null,                          // 地图实例化curBillboard: null,                    // 当前高亮的广告牌entityMarkerList: [],                  // 地图上点的资源实体对象集合    companyPoint:[],                       // 企业上点数据 // 标注图层tdtImgAnnoLayerProvider: new Cesium.WebMapTileServiceImageryProvider({url:"http://t6.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=b6b320a7ccfabfdc30536330efc07f3e",layer: "tdtImgAnnoLayer",style: "default",format: "image/jpeg",tileMatrixSetID: "GoogleMapsCompatible",}),}},props: ["parentRow"],mounted() {this.initMap(119.666612,34.249119,40000);if(this.parentRow.id){this.getGridDetail();}},methods: {// 获取网格信息getGridDetail(){this.axios.get(`${gridSettingManagement.detail}/${this.parentRow.id}`).then(res =>{if(res.data.returnCode === "0000000" && res.data.data.coordinate){let path = [];this.pointPositionList = res.data.data.coordinate.split(',');this.pointPositionList.map((item) => {path.push(Number(item));});this.polygonEntity = this.viewer.entities.add({name: 'polygon',polygon: {hierarchy: Cesium.Cartesian3.fromDegreesArray(path),material: new Cesium.Color.fromCssColorString("#4296FF").withAlpha(0.4),},range: path,});this.isEditStatus = true;}});},// 保存范围savePoint(){let poinstArrString = this.pointPositionList.join(",");let query = {streetId:this.parentRow.id,coordinate:poinstArrString};this.axios.post(gridSettingManagement.saveSpace,query).then(res =>{if(res.data.returnCode === "0000000"){this.$message({ type: "success", message: "保存成功！" });this.$emit("hideDialog");}});},// 编辑范围editPoint(){this.polygonEntity.polygon.hierarchy._value.positions.forEach((item) => {let cartesian = new Cesium.Cartesian3(item.x,item.y,item.z,item.z);let point = this.viewer.entities.add({name: 'gon_point',position: cartesian,point: {color: Cesium.Color.WHITE,pixelSize: 10,outlineColor: Cesium.Color.BLACK,outlineWidth: 1,},});this.editPoints.push(point);this.polygonPointsEntities.push(cartesian);this.viewer.scene.screenSpaceCameraController.enableRotate = false;this.viewer.scene.screenSpaceCameraController.enableZoom = false;});},// 添加范围addPoint(){if (this.polygonEntity && !this.isSaved) {this.$message({type: 'warning',message: '请先保存勾画的范围!',});return;}this.isSaved = false;this.isAddStatus = true;},// 初始化地图（根据当前企业所在位置初始化中心位置）initMap(longitude,latitude,height){Cesium.Ion.defaultAccessToken ="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmNjJkN2ZjNC04OTYxLTQyZmItYmM5Mi0yOTgyMzQxMjEzZGQiLCJpZCI6MTg5NTIsInNjb3BlcyI6WyJhc2wiLCJhc3IiLCJhc3ciLCJnYyIsInByIl0sImlhdCI6MTU4OTYyODkwMn0.ibuCu13_8ksLkyimUHR4e1LrWRb-_sfZrPMhSWSzJBg";let viewer = new Cesium.Viewer("mapContainer", {baseLayerPicker: false,geocoder: false,                // 是否显示地名查找控件homeButton: false,sceneModePicker: false,         // 是否显示投影方式控件selectionIndicator: false,baseLayerPicker: false,         // 是否显示图层选择控件navigationHelpButton: false,    // 是否显示帮助信息控件animation: false,               // 是否显示动画控件// creditContainer: "credit",timeline: false,                // 是否显示时间线控件fullscreenButton: false,vrButton: false,infoBox: false,                 // 是否显示点击要素之后显示的信息// requestRenderMode: true,     // 启用请求渲染模式scene3DOnly: true,              // 每个几何实例将只能以3D渲染以节省GPU内存sceneMode: 3,                   // 初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneModeimageryProvider: new Cesium.WebMapTileServiceImageryProvider({url:"http://t0.tianditu.gov.cn/img_w/wmts?tk=b6b320a7ccfabfdc30536330efc07f3e",layer: "img",style: "default",tileMatrixSetID: "w",format: "tiles",maximumLevel: 18,}),});this.viewer = viewer;this.viewer._cesiumWidget._creditContainer.style.display ="none";this.viewer.scene.globe.depthTestAgainstTerrain = false;                      // 图标被遮挡this.viewer.scene.fxaa = false;// 设置后当相机高度达到设置的最大和最小高度时将不再放大和缩小this.viewer.scene.screenSpaceCameraController.minimumZoomDistance = 0;        // 相机的高度的最小值this.viewer.scene.screenSpaceCameraController.maximumZoomDistance = 20000000; // 相机高度的最大值// 天地图矢量标注图层this.tdtImgAnnoLayer = this.viewer.imageryLayers.addImageryProvider(this.tdtImgAnnoLayerProvider);this.viewer.imageryLayers.raiseToTop(this.tdtImgAnnoLayer);// 定位到中心点// this.flyTo([Number(longitude), Number(latitude)], height,0);this.setQiantang();// 关闭双击事件this.viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);this.addMouseListener();        // 地图鼠标移动事件this.addMouseClick();           // 地图鼠标左键单击事件this.addMouseRightClick();      // 地图鼠标右键点击事件this.addMouseLeftDown();      // 地图鼠标左键压下事件},// 设置区域范围setQiantang(){let xiangshuiJson = require('../../../../assets/geoJson/xiangshui.json');let pointArr = xiangshuiJson.features[0].geometry.coordinates[0][0]let polygonArr = [];for (let i = 0;i < pointArr.length;i++) {polygonArr.push(pointArr[i][0]);polygonArr.push(pointArr[i][1]);}let materialPoline = colorRgba('#6495ED', 0.6);// 创建线实例let polyline = {type: 'quyuPolyline',polyline: {positions: Cesium.Cartesian3.fromDegreesArray(polygonArr),width: 6,material: new Cesium.Color(Number(materialPoline[0] / 255),Number(materialPoline[1] / 255),Number(materialPoline[2] / 255),Number(materialPoline[3])),},};this.viewer.entities.add(polyline);       this.flyTo([Number(119.666612), Number(34.249119)], 100000,0);},// 类数组转化listToArray(likeArray) {var ary = [];try {ary = Array.prototype.slice.call(likeArray);} catch (e) {for (var i = 0; i < likeArray.length; i++) {ary[ary.length] = likeArray[i];}}return ary;},// 鼠标左键压下事件addMouseLeftDown(){let that = this;let currentPoint = null;const handler = new Cesium.ScreenSpaceEventHandler(that.viewer.scene.canvas);handler.setInputAction((event) => {let windowPosition = event.position;let pickedObject = that.viewer.scene.pick(windowPosition);if (Cesium.defined(pickedObject)) {let entity = pickedObject.id;if (entity.name === 'gon_point') {currentPoint = entity;}}}, Cesium.ScreenSpaceEventType.LEFT_DOWN);// 对鼠标移动事件的监听handler.setInputAction((event) => {if (currentPoint) {let cartesian = that.viewer.camera.pickEllipsoid(event.startPosition,that.viewer.scene.globe.ellipsoid);let points = [],gon = null;if (!cartesian) {return;}currentPoint.position = cartesian;for (let point of that.editPoints) {points.push(point.position._value);}that.polygonPointsEntities = points;that.polygonEntity.polygon.hierarchy = new Cesium.CallbackProperty(() => {return new Cesium.PolygonHierarchy(points);},false);that.pointPositionList = that.getLolat(points);}}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);// 对鼠标抬起事件的监听handler.setInputAction((event) => {currentPoint = null;}, Cesium.ScreenSpaceEventType.LEFT_UP);},// cesium 笛卡尔坐标系转WGS84坐标系getLolat(position) {if (position) {let gonPoints = [];position.forEach((point, index) => {var cartesian = new Cesium.Cartesian3(point.x,point.y,point.z);var cartographic = Cesium.Cartographic.fromCartesian(cartesian);var lat = Cesium.Math.toDegrees(cartographic.latitude).toFixed(6);var lng = Cesium.Math.toDegrees(cartographic.longitude).toFixed(6);var alt = cartographic.height;gonPoints.push(lng);gonPoints.push(lat);});return gonPoints;} else {return [];}},// 鼠标右键点击事件addMouseRightClick() {let that = this;that.viewer.screenSpaceEventHandler.setInputAction(function (movement) {// 结束区域查询that.isAddStatus = false;for (let point of that.editPoints) {// 去除白点that.viewer.entities.remove(point);}let newpolygonPointsEntitiesLine = [];// 闭合newpolygonPointsEntitiesLine = that.polygonPointsEntitiesLine.push(that.polygonPointsEntitiesLine[0]);newpolygonPointsEntitiesLine = that.listToArray(that.polygonPointsEntitiesLine);let polylineLast = that.viewer.entities.add({name: "线几何对象",polyline: {positions: newpolygonPointsEntitiesLine,width: 3,material: new Cesium.PolylineGlowMaterialProperty({color: Cesium.Color.GOLD,}),depthFailMaterial: new Cesium.PolylineGlowMaterialProperty({color: Cesium.Color.GOLD,}),},});that.polygonPointsEntitiesEntity.push(polylineLast);},Cesium.ScreenSpaceEventType.RIGHT_CLICK);},// 鼠标左键点击事件addMouseClick(){let that = this;that.viewer.screenSpaceEventHandler.setInputAction(function (movement) {// 添加区域情况if(that.isAddStatus){// 平面坐标(x,y)let windowPosition = movement.position;// 三维坐标（x,y,z）let ellipsoid = that.viewer.scene.globe.ellipsoid;let cartesian = that.viewer.camera.pickEllipsoid(windowPosition,that.viewer.scene.globe.ellipsoid);// 坐标转换:世界坐标转换为经纬度let cartographic = Cesium.Cartographic.fromCartesian(cartesian);let lng = Cesium.Math.toDegrees(cartographic.longitude); // 经度let lat = Cesium.Math.toDegrees(cartographic.latitude); // 纬度// 经度在前纬度在后that.pointPositionList.push(lng.toFixed(6));that.pointPositionList.push(lat.toFixed(6));if (!cartesian) {return;}// 实例化点实体let point = that.viewer.entities.add({name: "gon_point",position: cartesian,point: {color: Cesium.Color.WHITE,pixelSize: 10,outlineColor: Cesium.Color.BLACK,outlineWidth: 1,},});// 存储点的实体，用于下图that.editPoints.push(point);that.polygonPointsEntities.push(cartesian);that.polygonPointsEntitiesLine = that.listToArray(that.polygonPointsEntities);if (that.editPoints.length > 0) {if (that.polygonPointsEntitiesLine.length < 1) return;let polyline = that.viewer.entities.add({name: "线几何对象",polyline: {positions: that.polygonPointsEntitiesLine,width: 3,material: new Cesium.PolylineGlowMaterialProperty({color: Cesium.Color.GOLD,}),depthFailMaterial: new Cesium.PolylineGlowMaterialProperty({color: Cesium.Color.GOLD,}),},});// 存储线的实体，用于下图that.polygonPointsEntitiesEntity.push(polyline);}// 大于三个点开始画面if (that.polygonPointsEntities.length >= 3) {if (!that.polygonEntity) {that.polygonEntity = that.viewer.entities.add({name: "polygon",polygon: {hierarchy: new Cesium.CallbackProperty(() => {return new Cesium.PolygonHierarchy(that.polygonPointsEntities);},false),material: new Cesium.Color.fromCssColorString("#4296FF").withAlpha(0.4),},});} else {that.polygonEntity.polygon.hierarchy = new Cesium.CallbackProperty(() => {return new Cesium.PolygonHierarchy(that.polygonPointsEntities);},false);}}}},Cesium.ScreenSpaceEventType.LEFT_CLICK);},// 鼠标移入事件addMouseListener(){let that = this;const handler = new Cesium.ScreenSpaceEventHandler(that.viewer.scene.canvas);handler.setInputAction(function (movement) {if (that.isEditStatus || that.isAddStatus) {document.getElementsByTagName("body").item(0).style.cursor ="pointer";} else {document.getElementsByTagName("body").item(0).style.cursor ="default";}}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);},// 地图移动flyTo(coord = [116.405285, 40.123456], height = 450000,time = 0) {this.viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(coord[0],coord[1],height),orientation: {heading: Cesium.Math.toRadians(0.0),roll: 0.0,},duration: time,});},}
};

3、实现效果图：

（五）关于cesium地图的使用：实现添加区域，编辑区域并保存相关推荐

WebGIS第五课：地图控件的添加
首先来看高德官网的UI界面: 他和我们现在的WebGIS工程最大的不同就是上面有很多控件,用户可以操作的.比如右下角有加号和减号按钮,这叫做控件.如何在我们的工程中引入这些呢,下面来看. 这是我们上一 ...
WPS添加黑色编辑区域及段落
使用文档中编辑命令,希望与步骤说明分开,增加稳定的可读性,在命令段落进行背景设定,如下效果: 达到上述效果,操作如下: 1)添加命令: #./mysql.server start -user=root ...
多传感器融合定位五-点云地图构建及定位
多传感器融合定位五-点云地图构建及定位 1. 回环检测 1.1 基于Scan Context 1.2 基于直方图 2. 后端优化 2.1 后端优化基本原理 2.2 李群.李代数基本知识 2.3 李群. ...
学习【Cesium】第六篇，Cesium地图点云与地形的加载（学不会揍我）
Cesium地图点云与地形的加载话不多说,看步骤 ↓ ↓ ↓ 第一步: 登陆[cesium icon] 网站: Cesium ion 第二步: 在[资产仓库]选择要添加的资产,我这边添加了夜色地图和 ...
Cesium地图地形加载与建筑体的使用
一.地图与地形加载 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
Android 集成高德地图——当前定位，添加图标，画路线，设置显示中心位置，比例，地图刷新位置监听，判断GPS开启，去打开GPS
/*** 判断定位服务是否开启** @param* @return true 表示开启*/ public static boolean isLocationEnabled(Context contex ...
cesium 使用entities、primitives添加的模型并且改变模型颜色
entities方式绘制模型:[线条] var gltf = viewer.entities.add({guid: crossguid,name: 'gltf',polyline: {width: 1 ...
百度地图自定义图标icon 添加本地图片无法显示问题解决
百度地图自定义图标icon 添加本地图片无法显示问题解决我们在阿里巴巴矢量库找的icon 保存到本地结论我们在阿里巴巴矢量库找的icon 保存到本地链接: 阿里巴巴矢量库. 图片: 随便找一个 ...
cesium 地图无法加载报错401 缺少token
cesium 地图无法加载报错401 缺少token 首先,报错401 说明用户没有访问权限,需要进行身份认证,也就是cesium需要密钥,也是最近实行的吧,因为之前不用也能加载出地图. token ...

（五）关于cesium地图的使用：实现添加区域，编辑区域并保存

（五）关于cesium地图的使用：实现添加区域，编辑区域并保存相关推荐

最新文章

热门文章