vue3 给Cesium添加罗盘和标尺_cesium rectanglegraphics rotation 值设置-CSDN博客

本文链接：https://blog.csdn.net/weixin_41012767/article/details/127637323

项目地址

GitHub - cesium-plugin/cesium-navigation-es6

步骤

1.安装

npm install cesium-navigation-es6 --save

2.使用

修改使用代码

import CesiumNavigation from 'cesium-navigation-es6'
const options = {
          // 用于在使用重置导航重置地图视图时设置默认视图控制。接受的值是Cesium.Cartographic 和 Cesium.Rectangle.
        // options.defaultResetView = Rectangle.fromDegrees(80, 22, 130, 50)
          defaultResetView: Cesium.Cartesian3.fromDegrees(114.271187899, 30.628800672, 3000),

          // 相机方向
          // orientation: {
          //   heading: Cesium.Math.toRadians(350.94452087411315),
          //   pitch: Cesium.Math.toRadians(-66.6402342251215),
          //   roll: Cesium.Math.toRadians(360)
          // },
          // 相机延时
          duration: 4, // 默认为3s
          // 用于启用或禁用罗盘。true是启用罗盘，false是禁用罗盘。默认值为true。如果将选项设置为false，则罗盘将不会添加到地图中。
          enableCompass: true,
          // 用于启用或禁用缩放控件。true是启用，false是禁用。默认值为true。如果将选项设置为false，则缩放控件将不会添加到地图中。
          enableZoomControls: true,

          // 用于启用或禁用距离图例。true是启用，false是禁用。默认值为true。如果将选项设置为false，距离图例将不会添加到地图中。
          enableDistanceLegend: true,
          // 用于启用或禁用指南针外环。true是启用，false是禁用。默认值为true。如果将选项设置为false，则该环将可见但无效。
          enableCompassOuterRing: true,

          // 修改重置视图的tooltip
          resetTooltip: '重置视图',
          // 修改放大按钮的tooltip
          zoomInTooltip: '放大',
          // 修改缩小按钮的tooltip
          zoomOutTooltip: '缩小',

          compassOuterRingSvg: '<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><circle id="a" cx="30" cy="30" r="30"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use fill="#FFF" xlink:href="#a"/><path fill="#4E4E4E" fill-rule="nonzero" mask="url(#b)" d="M29.074 6.727V2.992l2.309 3.735h1.16V1h-1.074v3.824L29.125 1H28v5.727z"/><path d="M30.363 57.926c.498 0 .913-.07 1.246-.21a1.686 1.686 0 0 0 1.047-1.56c0-.362-.076-.666-.228-.912a1.608 1.608 0 0 0-.633-.582c-.27-.142-.686-.28-1.248-.412-.563-.133-.917-.26-1.063-.383a.44.44 0 0 1-.172-.347c0-.149.062-.267.184-.356.19-.138.453-.207.79-.207.325 0 .569.064.732.193.162.13.268.34.318.635l1.156-.05c-.018-.527-.209-.947-.572-1.262-.363-.315-.904-.473-1.623-.473-.44 0-.816.066-1.127.2-.311.132-.55.325-.715.58a1.472 1.472 0 0 0-.248.818c0 .453.176.837.527 1.152.25.224.685.413 1.305.566.482.12.79.204.926.25.198.07.336.153.416.248.08.096.119.21.119.346 0 .211-.094.395-.283.553-.189.157-.47.236-.842.236-.352 0-.63-.088-.838-.265-.207-.177-.344-.455-.412-.832L28 55.96c.076.64.307 1.128.695 1.463.388.334.944.502 1.668.502z" fill="#4E4E4E" fill-rule="nonzero" mask="url(#b)" transform="rotate(180 30.328 54.963)"/><path fill="#4E4E4E" fill-rule="nonzero" mask="url(#b)" transform="rotate(-90 5.758 29.863)" d="m4.621 32.727 1.137-4.282 1.14 4.282h1.227L9.515 27H8.353l-.88 4-1.003-4H5.094l-1.047 3.934L3.184 27H2l1.367 5.727z"/><path fill="#4E4E4E" fill-rule="nonzero" mask="url(#b)" transform="rotate(90 55.178 29.863)" d="M57.355 32.727v-.965h-3.199v-1.559h2.875v-.965h-2.875v-1.27h3.09V27H53v5.727z"/></g></svg>',
          compassRotationMarkerSvg: '<svg height="125" width="125" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><g id="#000000fe"><path  opacity="1.00" d=" M 493.42 0.00 L 528.50 0.00 C 529.86 0.78 531.41 1.07 532.98 1.02 C 558.91 1.32 584.63 5.22 610.11 9.75 C 686.00 24.72 758.57 56.91 819.99 104.02 C 838.75 118.42 857.23 133.51 873.12 151.06 C 852.34 172.59 830.81 193.46 809.75 214.75 C 790.09 234.12 770.97 254.08 751.00 273.10 C 711.38 234.16 662.29 204.75 608.90 189.13 C 545.25 170.28 476.14 171.23 412.73 190.59 C 360.53 206.58 313.00 236.14 274.02 274.19 C 251.77 252.75 230.24 230.49 208.25 208.75 C 188.88 189.09 168.91 169.97 149.90 150.00 C 159.46 138.85 171.04 129.70 182.05 120.05 C 263.97 50.32 368.79 8.45 476.01 1.15 C 481.81 0.78 487.70 1.39 493.42 0.00 Z" /></g></svg>',
          compassGyroSvg: '<svg  width="40" height="43" xmlns="http://www.w3.org/2000/svg"><g id="compass-inner" fill="none" fill-rule="evenodd"><circle stroke="#A2A2A2" stroke-width="1.5" fill="#FFF" cx="20" cy="23" r="19.25"/><path fill="#E02020" d="m20 0 13 8H7z"/><circle id="Oval-432-Copy" cx="1" cy="16" r="1"></circle></g></svg>'
          ,
          // // 自定义按钮
          // resetSvg: '<svg   viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"  width="20" height="20"><path d="M951.168 526.154a30 30 0 0 1-42.427 0c-0.044-0.045-0.081-0.1-0.125-0.14l-0.007 0.007-382.545-382.54a20 20 0 0 0-28.284 0l-382.545 382.54a30 30 0 1 1-42.426-42.426L476.567 79.837a50 50 0 0 1 70.71 0l403.758 403.758-0.006 0.006c0.045 0.045 0.094 0.082 0.139 0.126a30 30 0 0 1 0 42.427z m-770.246 15.877a29.992 29.992 0 0 1 29.987 29.75h0.013v307a20 20 0 0 0 20 20h137v-235a50 50 0 0 1 50-50h188a50 50 0 0 1 50 50v235h137a20 20 0 0 0 20-20V575.836a29.984 29.984 0 1 1 59.656-4.3c0 0.084-0.012 0.166-0.012 0.25h0.356v336.995a50 50 0 0 1-50 50h-227V693.365a20 20 0 0 0-20-20h-128a20 20 0 0 0-20 20v265.416h-227a50 50 0 0 1-50-50v-337h0.013a29.992 29.992 0 0 1 29.987-29.75z" p-id="2079"></path></svg>',
          // zoomInSvg: '<svg viewBox="64 64 896 896" focusable="false" data-icon="plus" width="20" height="20"  aria-hidden="true"><defs><style></style></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path></svg>',
          // zoomOutSvg: '<svg viewBox="64 64 896 896" focusable="false" data-icon="minus" width="20" height="20"  aria-hidden="true"><path d="M872 474H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"></path></svg>',
        }

        // 初始化指北针
        let thing = new (CesiumNavigation as any)(viewer, options)

修改cesium-navigation-es6 css代码

cesium-navigation-es6 css

.distance-legend {
  pointer-events: auto;
  position: absolute;
  border-radius: 15px;
  padding-left: 5px;
  padding-right: 5px;
  right: 10px;
  bottom: 10px;
  height: 30px;
  width: 125px;
  box-sizing: content-box;
  background-color: rgb(39, 39, 39);

}

.distance-legend-label {
  display: inline-block;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: bold;
  line-height: 30px;
  color: #FFFFFF;
  width: 125px;
  text-align: center;
}

.distance-legend-scale-bar {
  border-left: 2px solid #FFFFFF;
  border-right: 2px solid #FFFFFF;
  border-bottom: 2px solid #FFFFFF;
  position: absolute;
  height: 10px;
  top: 15px;
}

@media print {
  .distance-legend {
    display: none;
  }
}

@media screen and (max-width: 700px),
screen and (max-height: 420px) {
  .distance-legend {
    display: none;
  }
}

.navigation-controls {
  position: absolute;
  right: 20px;
  bottom: 60px;
  top: auto;
  width: 40px;
  border: 1px solid rgba(0, 0, 0, 0.9);
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 4px;
  font-weight: 300;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

}

.navigation-control {
  cursor: pointer;
  /* border-bottom: 1px solid #555555; */
}

.naviagation-control:active {
  color: #FFF;
}

.navigation-control-last {
  cursor: pointer;
  border-bottom: 1px solid #555555;
  border-bottom: 0;
}

.navigation-control-icon-zoom-in {
  position: relative;
  text-align: center;
  font-size: 22px;
  height: 40px;
  color: #000000;

  border-bottom: 1px solid rgba(0, 0, 0, 0.9);

}

.navigation-control-icon-zoom-out {
  position: relative;
  text-align: center;
  font-size: 22px;
  height: 40px;
  color: #000000;


}

.navigation-control-icon-reset {
  position: relative;
  height: 0px;
  fill: rgba(234, 0, 0, 0.8);

}

.compass {
  pointer-events: auto;
  position: absolute;
  right: 10px;

  bottom: 150px;
  width: 80px;
  height: 80px;
  overflow: hidden;

}

.compass-outer-ring {
  position: absolute;
  top: 0;
  width: 95px;
  height: 95px;
  fill: rgba(255, 255, 255, 0.5);
}

.compass-outer-ring-background {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 44px;
  height: 44px;
  border-radius: 44px;
  border: 12px solid rgba(47, 53, 60, 0.8);
  box-sizing: content-box;
}

.compass-gyro {
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 95px;
  height: 95px;
  fill: #CCC;
}

.compass-gyro-active {
  fill: #68ADFE;
}

.compass-gyro-background {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 0px;
  height: 0px;
  border-radius: 33px;
  background-color: rgba(47, 53, 60, 0.458);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-sizing: content-box;
}

.compass-gyro-background:hover+.compass-gyro {
  fill: #68ADFE;
}

.compass-rotation-marker {
  position: absolute;
  top: 0;
  width: 95px;
  height: 95px;
  fill: #68ADFE;
}

@media screen and (max-width: 700px),
screen and (max-height: 420px) {
  .navigation-controls {
    display: none;
  }

  .compass {
    display: none;
  }
}

@media print {
  .navigation-controls {
    display: none;
  }

  .compass {
    display: none;
  }
}

/* / */




.compass {
  bottom: 160px;
  right: 12px;
  top: auto;
  width: 60px;
  height: 60px;
}

.compass-outer-ring-background {

  width: 0;
  height: 0;
  border-radius: 50%;
  border: 20px solid #000306;
}

.compass-outer-ring {
  width: 100%;
  height: 100%;
  fill: rgb(63, 72, 84, 0.5);
}

.compass-gyro {
  width: 40px;
  height: 43px;
  top: 8px;
  left: 10px;
  fill: rgb(63, 72, 84);
}

.compass-rotation-marker {
  width: 60px;
  height: 60px;
  fill: #1890ff;
  z-index: 100;
}

/* .compass-gyro-background {
  width: 42px;
  height: 42px;
  top: 6px;
  left: 7px;
  background-color: #fff;
} */

.compass-gyro-background:hover+.compass-gyro {
  fill: #1890ff;
}

问题 compassRotationMarkerSvg这个没用上