zoukankan      html  css  js  c++  java
  • cesium1.65api版本贴地贴模型标绘工具效果(附源码下载)

    前言

    cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材。

    内容概览

    1.cesium1.65api版本贴地贴模型标绘工具效果
    2.源代码demo下载

    效果图如下:

    实现思路:

    • 鼠标左键Cesium.ScreenSpaceEventType.LEFT_CLICK
    • 鼠标移动Cesium.ScreenSpaceEventType.MOUSE_MOVE
    • 鼠标右键Cesium.ScreenSpaceEventType.RIGHT_CLICK
      鼠标左键事件,获取点击地图的每个坐标点;鼠标移动事件,动态扑捉鼠标移动状态,下一个坐标点位置;鼠标右键意味着标绘结束状态。
    • 定义封装DrawTool标绘工具:
    var DrawTool = function (obj) {
    if (!obj.viewer || !obj) {
    console.warn("缺少必要参数!--viewer");
    return;
    }
    this.viewer = obj.viewer;
    this.hasEdit = obj.hasEdit;
    this.toolArr = [];
    this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
    this.show = obj.drawEndShow;
    }
    DrawTool.prototype = {
    startDraw: function (opt) {
    var that = this;
    // if (this.hasEdit) {
    // this.bindEdit();
    // }
    if (opt.type == "polyline") {
    var polyline = new CreatePolyline(this.viewer, opt.style);
    polyline.start(function (evt) {
    if (that.hasEdit) {
    that.unbindEdit();
    polyline.startModify(opt.modifySuccess);
    that.lastSelectEntity = polyline;
    }
    if (opt.success) opt.success(evt);
    if (that.show == false) polyline.setVisible(false);
    });
    this.toolArr.push(polyline);
    }
    if (opt.type == "polygon") {
    var polygon = new CreatePolygon(this.viewer, opt.style);
    polygon.start(function () {
    if (that.hasEdit) {
    that.unbindEdit();
    polygon.startModify();
    that.lastSelectEntity = polygon;
    }
    if (opt.success) opt.success(polygon);
    if (that.show == false) polygon.setVisible(false);
    });
    this.toolArr.push(polygon);
    }
    if (opt.type == "billboard") {
    var billboard = new CreateBillboard(this.viewer, opt.style);
    billboard.start(function () {
    if (that.hasEdit) {
    that.unbindEdit();
    billboard.startModify();
    that.lastSelectEntity = billboard;
    }
    if (opt.success) opt.success(billboard);
    if (that.show == false) billboard.setVisible(false);
    });
    this.toolArr.push(billboard);
    }
    if (opt.type == "circle") {
    var circle = new CreateCircle(this.viewer, opt.style);
    circle.start(function () {
    if (that.hasEdit) {
    that.unbindEdit();
    circle.startModify();
    that.lastSelectEntity = circle;
    }
    if (opt.success) opt.success(circle);
    if (that.show == false) circle.setVisible(false);
    });
    this.toolArr.push(circle);
    }
    if (opt.type == "rectangle") {
    var rectangle = new CreateRectangle(this.viewer, opt.style);
    rectangle.start(function () {
    if (that.hasEdit) {
    that.unbindEdit();
    rectangle.startModify();
    that.lastSelectEntity = rectangle;
    }
    if (opt.success) opt.success(rectangle);
    if (that.show == false) rectangle.setVisible(false);
    });
    this.toolArr.push(rectangle);
    }
    //重写材质
    if (opt.type == "flowPolyline") {
    var polyline = new CreatePolyline(this.viewer, opt.style);
    polyline.start(function () {
    if (that.hasEdit) {
    that.unbindEdit();
    polyline.startModify();
    }
    if (opt.success) opt.success(polyline);
    });
    this.toolArr.push(polyline);
    }
     
    },
    createByPositions: function (opt) {
    if (this.hasEdit) {
    this.bindEdit();
    }
    if (!opt) opt = {};
    if (opt.type == "polyline") {
    var polyline = new CreatePolyline(this.viewer, opt.style);
    polyline.createByPositions(opt.positions, opt.success);
    this.toolArr.push(polyline);
    }
    if (opt.type == "polygon") {
    var polygon = new CreatePolygon(this.viewer, opt.style);
    polygon.createByPositions(opt.positions, opt.success);
    this.toolArr.push(polygon);
    }
    if (opt.type == "billboard") {
    var billboard = new CreateBillboard(this.viewer, opt.style);
    billboard.createByPositions(opt.positions, function(){
    if(opt.success) opt.success(billboard)
    });
    this.toolArr.push(billboard);
    }
    },
    destroy: function () {
    for (var i = 0; i < this.toolArr.length; i++) {
    var obj = this.toolArr[i];
    obj.destroy();
    }
    },
    lastSelectEntity: null,
    bindEdit: function () {
    var that = this;
    this.handler.setInputAction(function (evt) { //单机开始绘制
    var pick = that.viewer.scene.pick(evt.position);
    if (Cesium.defined(pick) && pick.id) {
    for (var i = 0; i < that.toolArr.length; i++) {
    if (pick.id.objId == that.toolArr[i].objId && (that.toolArr[i].state == 1||that.toolArr[i].state == 2)) {
    if (that.lastSelectEntity) {
    that.lastSelectEntity.endModify();
    }
    that.toolArr[i].startModify();
    that.lastSelectEntity = that.toolArr[i];
    break;
    }
    }
    }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    },
    unbindEdit: function () {
    for (var i = 0; i < this.toolArr.length; i++) {
    this.toolArr[i].endModify();
    }
    }
    }
    • 封装定义标绘点、线、面、矩形js类,里面涉及到细节函数,自行看对应的源码demo:

    • DrawTool标绘工具初始化以及调用:

    • 更多详情见下面链接文章

      小专栏此文章

      文章提供源码,对本专栏感兴趣的话,可以关注一波

  • 相关阅读:
    Life -1b The secrets of long life? Teacher: GABRIELE
    Life -1a How well do you sleep? Teacher: GABRIELE
    Kubernetes(K8s) 学习笔记 updating...
    English trip EM3-PE1B Teacher:Taylor
    V3 -A Hard Bargain Teacher: GABRIELE
    802.11k/v/r WiFi无缝漫游
    V3 -Who Am I? Teacher: GABRIELE
    Dell OMSA(updating...)
    (转)红蓝对抗之Windows内网渗透
    WiFi6(整理网上资料进行汇总查看,相关内容摘取与互联网)
  • 原文地址:https://www.cnblogs.com/giserhome/p/12272837.html
Copyright © 2011-2022 走看看