记得引用JS和样式文件
<!doctype html>
<html lang="en">
<head>
<link src="../plugin/v5.3.0-dist/ol.css">
<script src="../plugin/v5.3.0-dist/ol.js"></script>
<script src='../Build/Cesium/Cesium.js'></script>
<script src='../JavaScript/jquery-1.10.2.min.js'></script>
<style>
.inlinebutton{
display: inline-block;
position: absolute;
z-index: 9999999999999999;
}
</style>
</head>
<body onresize="showMsg()" style="overflow: hidden" >
<button class="inlinebutton" style="top: 20px;left:100px" onclick="changeViewState(2)">二维</button>
<button class="inlinebutton" style="top: 20px;left:180px" onclick="changeViewState(5)">二/三维</button>
<button class="inlinebutton" style="top: 20px;left:260px" onclick="changeViewState(3)">三维</button>
<button class="inlinebutton" style="top: 20px;left:340px" onclick="DrawPoint()">画点</button>
<button class="inlinebutton" style="top: 20px;left:420px" onclick="DrawPolyLine()">画线</button>
<button class="inlinebutton" style="top: 20px;left:500px" onclick="DrawPolygon()">画面</button>
<button class="inlinebutton" style="top: 20px;left:550px" onclick="ClearDraw(false)">停止绘制</button>
<button class="inlinebutton" style="top: 20px;left:640px" onclick="ClearDraw(true)">清除绘制</button>
<div style="display: flex;width: 100%;height: 100%;overflow: hidden">
<div id="map" onmouseover="changeMouseLocation('left')"style=" width: 100%;overflow: hidden;"></div>
<div id="map3d" onmouseover="changeMouseLocation('right')" style="width: 100%;overflow: hidden;" ></div>
</div>
<script type="text/javascript">
let winWidth = 0;
let winHeight = 0;
let viewState = "2dand3d";
function changeViewState(data){
if(data===2){
viewState="2d";
$('#map').css('display','block');
$('#map3d').css('display','none');
let d = document.getElementById("map").children[0].children[0];
d.width = winWidth;
d.height = winHeight;
map.updateSize();
}else if(data === 3){
viewState="3d";
$('#map3d').css('display','block');
$('#map').css('display','none');
let canvas = document.getElementById("map3d").children[0].children[0].children[0].children[0];
canvas.width = winWidth;
canvas.height = winHeight;
}else if(data===5){
viewState="2dand3d";
$('#map').css('display','block');
$('#map3d').css('display','block');
let d = document.getElementById("map");
d.width = winWidth/2;
d.height = winHeight;
let canvas = document.getElementById("map3d").children[0].children[0].children[0].children[0];
canvas.width = winWidth/2;
canvas.height = winHeight;
map.updateSize();
}
}
let mouseLocation = "left";
let DrawState = "none";
function changeMouseLocation(data) {
mouseLocation = data;
if(DrawState!=="none"){
if(DrawState==="drawpoint"){
if(data==="left"){
OpenLayerDrawPoint();
}else if(data==="right"){
CesiumDrawPoint();
}
}else if(DrawState==="drawpolyline"){
if(data==="left"){
OpenLayerDrawPolyline();
}else if(data==="right"){
CesiumDrawPolyLine();
}
}else if(DrawState==="drawpolygon"){
if(data==="left"){
OpenLayerDrawPolygon();
}else if(data==="right"){
CesiumDrawPolygon();
}
}
}
}
function showMsg(){
// 获取窗口宽度
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
// 获取窗口高度
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
// 通过深入 Document 内部对 body 进行检测，获取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
winHeight = winHeight-20;
let canvas = document.getElementById("map3d").children[0].children[0].children[0].children[0];
canvas.width = winWidth/2;
canvas.height = winHeight;
let d = document.getElementById("map");
d.width = winWidth/2;
d.height = 920;
map.updateSize();
// document.getElementById("canvas").height =100;
// $("#map3d .cesium-viewer .cesium-viewer-cesiumWidgetContainer .cesium-widget canvas").width = winWidth/2
}
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzNDhhYmQxOC1mYzMwLTRhYmEtOTI5Ny1iNGExNTQ3ZTZhODkiLCJpZCI6NTQ1NCwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU0MzM3Mzc0NH0.RU6ynAZcwQvdfygt_N_j2rb2lpsuyyROzdaLQg0emAg';
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiMGRjM2QxYi04ODM2LTQzMDEtOGJmOS1mNDlkY2Q2NjE4MjciLCJpZCI6MjU5LCJpYXQiOjE1MjU5NjYyMDd9.xW9loNLo68KE3ReAHd-Lp73M8qJKhI9vA0wYL-qJX_I';
var raster = new ol.layer.Tile({
source:new ol.source.OSM()
});
var source = new ol.source.Vector({wrapX:false});
var vectorLayer = new ol.layer.Vector({
source:source
});
var map = new ol.Map({
layers:[raster,vectorLayer],
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([103.73,36.03]),
zoom: 8,
minZoom:2,
maxZoom:21
}),
controls:ol.control.defaults({
attributionOptions:{
collapsible:false
}
})
});
map.on('pointerdrag',function(e){
if(viewState==="2dand3d"&&mouseLocation==="left") {
var mapExtent = map.getView().calculateExtent(map.getSize());
let first = ol.proj.transform([mapExtent[0], mapExtent[1]], 'EPSG:3857', 'EPSG:4326');
let second = ol.proj.transform([mapExtent[2], mapExtent[3]], 'EPSG:3857', 'EPSG:4326');
viewer.camera.setView({
destination: Cesium.Rectangle.fromDegrees(first[0], first[1], second[0], second[1])
});
}
});
map.getView().on('change:resolution', function(e){
if(viewState==="2dand3d"&&mouseLocation==="left") {
var mapExtent = map.getView().calculateExtent(map.getSize());
let first = ol.proj.transform([mapExtent[0], mapExtent[1]], 'EPSG:3857', 'EPSG:4326');
let second = ol.proj.transform([mapExtent[2], mapExtent[3]], 'EPSG:3857', 'EPSG:4326');
viewer.camera.setView({
destination: Cesium.Rectangle.fromDegrees(first[0],first[1],second[0],second[1])
});
}
});
var viewer = new Cesium.Viewer('map3d', {
animation: false, //是否显示动画控件
shouldAnimate: true,
homeButton: false, //是否显示Home按钮
fullscreenButton: false, //是否显示全屏按钮
baseLayerPicker: false, //是否显示图层选择控件
geocoder: false, //是否显示地名查找控件
timeline: false, //是否显示时间线控件
sceneModePicker: false, //是否显示投影方式控件
navigationHelpButton: false, //是否显示帮助信息控件
infoBox: false, //是否显示点击要素之后显示的信息
requestRenderMode: true, //启用请求渲染模式
scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存
sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式 Cesium.SceneMode
fullscreenElement: document.body, //全屏时渲染的HTML元素 暂时没发现用处
imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
url: "http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=4d6519bb758d9f96047d947d85c552c8",
layer: "tdtVecBasicLayer",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatible",
show: true
}),
selectionIndicator: false,
SceneModePicker:true
});
var layer2 = new Cesium.WebMapTileServiceImageryProvider({
url: "http://t0.tianditu.com/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=d382db32edadb2d02f137a669e8d1308",
layer: "tdtAnnoLayer",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatible"
});//矢量注记
viewer.imageryLayers.addImageryProvider(layer2);
// viewer.sceneModePicker.viewModel.duration = 0.0;
viewer.scene.globe.enableLighting = true;
var scene = viewer.scene;
viewer.scene.backgroundColor=new Cesium.Color(0, 0, 0, 1);
viewer.scene.globe.baseColor=Cesium.Color.fromCssColorString("#000000");//new Cesium.Color(255, 255, 0, 1);
scene.camera.constrainedAxis = undefined;
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
viewer.scene.postRender.addEventListener(function(){
if(viewState === "2dand3d"&& mouseLocation ==="right"){
var rectangle = viewer.camera.computeViewRectangle();
var west =rectangle.west / Math.PI * 180;
var north = rectangle.north / Math.PI * 180;
var east = rectangle.east / Math.PI * 180;
var south = rectangle.south / Math.PI * 180;
let bigger_box = {'lng_min':west,'lng_max':east,'lat_min':south,'lat_max':north};
var topLeft = [parseFloat(bigger_box['lng_min']), parseFloat(bigger_box['lat_max'])];
var topRight = [parseFloat(bigger_box['lng_max']), parseFloat(bigger_box['lat_max'])];
var bottomLeft = [parseFloat(bigger_box['lng_min']), parseFloat(bigger_box['lat_min'])];
var bottomRight = [parseFloat(bigger_box['lng_max']), parseFloat(bigger_box['lat_min'])];
var p1 = ol.proj.transform(topLeft,'EPSG:4326','EPSG:3857');
var p2 = ol.proj.transform(topRight,'EPSG:4326','EPSG:3857');
var p3 = ol.proj.transform(bottomLeft,'EPSG:4326','EPSG:3857');
var p4 = ol.proj.transform(bottomRight,'EPSG:4326','EPSG:3857');
var coor_bigger_box = [p1,p2,p4,p3];
// console.log(coor_bigger_box);
var shape_tmp = new ol.Feature({
geometry: new ol.geom.Polygon([coor_bigger_box])
});
let tmpLayer = new ol.layer.Vector({
source: new ol.source.Vector(),
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(0,0,0,0)',
width:2,
}),
fill: new ol.style.Fill({
color: 'rgba(0,0,0,0)',
})
}),
});
tmpLayer.getSource().addFeature(shape_tmp);
var feature = tmpLayer.getSource().getFeatures()[0];
var polygon = (feature.getGeometry());
var size = (map.getSize());
map.getView().fit(polygon,size,{padding:[0,0,0,0],constrainResolution: false});
let heading = Cesium.Math.toDegrees(viewer.camera.heading).toFixed(2);
map.getView().setRotation((360-heading)*0.01745);
}
});
window.onload = function () {
$(".cesium-viewer-bottom").hide();
$(".ol-overlaycontainer-stopevent").hide();
showMsg();
};
$(".cesium-viewer-bottom").hide();
$(".ol-overlaycontainer-stopevent").hide();
function DrawPoint(){
DrawState="drawpoint";
if(mouseLocation === "left"){
OpenLayerDrawPoint();
}else if(mouseLocation === "right"){
CesiumDrawPoint();
}
}
function DrawPolyLine(){
DrawState="drawpolyline";
if(mouseLocation === "left"){
OpenLayerDrawPolyline();
}else if(mouseLocation === "right"){
CesiumDrawPolyLine();
}
}
function DrawPolygon(){
DrawState="drawpolygon";
if(mouseLocation === "left"){
OpenLayerDrawPolygon();
}else if(mouseLocation === "right"){
CesiumDrawPolygon();
}
}
function ClearDraw(data){
DrawState = "none";
map.removeInteraction(OpenLayerDraw);
ClearHandler();
if(data){
vectorLayer.getSource().clear();
CesiumClearEntities();
}
}
let addPolyEntities = [];
let handler = null;
//清除handler
function ClearHandler() {
if(handler!==null){
handler.destroy();
}
}
//清除画的点线面
function CesiumClearEntities() {
let entities = viewer.entities;
for (i = 0; i < addPolyEntities.length; i++) {
entities.remove(addPolyEntities[i]);
}
}
//笛卡尔坐标系转WGS84坐标系
function Cartesian3ToWGS84(point) {
let cartesian33 = new Cesium.Cartesian3(point.x, point.y, point.z);
let cartographic = Cesium.Cartographic.fromCartesian(cartesian33);
let lat = Cesium.Math.toDegrees(cartographic.latitude);
let lng = Cesium.Math.toDegrees(cartographic.longitude);
let alt = cartographic.height;
return {lat: lat, lng: lng, alt: alt};
}
//WGS84坐标系转笛卡尔坐标系
function WGS84ToCartesian3(point) {
if(!point.alt){
point.alt = 0;
}
let car33 = Cesium.Cartesian3.fromDegrees(point.lng, point.lat, point.alt);
let x = car33.x;
let y = car33.y;
let z = car33.z;
return {x: x, y: y, z: z};
}
//画点
function CesiumDrawPoint(position){
if(position){
let p = viewer.entities.add({
position: WGS84ToCartesian3(position),
type:"CesiumPoint",
point: {
color: Cesium.Color.RED,
pixelSize: 20,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
}
});
addPolyEntities.push(p);
return ;
}
ClearHandler();
let _this = this;
let positions = [];
handler = new Cesium.ScreenSpaceEventHandler(_this.viewer.scene.canvas);
handler.setInputAction(function (movement) {
let cartesian = _this.viewer.scene.camera.pickEllipsoid(movement.position, _this.viewer.scene.globe.ellipsoid);
positions.push(cartesian);
let polyPoint=_this.viewer.entities.add({
position: cartesian,
type:"CesiumPoint",
point: {
color: Cesium.Color.RED,
pixelSize: 20,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
}
});
addPolyEntities.push(polyPoint);
OpenLayerAddPoint(Cartesian3ToWGS84(cartesian));
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
handler.setInputAction(function (movement) {
handler.destroy();
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
}
//画面
function CesiumDrawPolygon(ps){
if(ps){
let li = [];
for(let i in ps){
li.push(WGS84ToCartesian3(ps[i]))
}
let pg= viewer.entities.add({
type:"CesiumPolygon",
polygon: {
hierarchy: li,
height:1,
heightReference:Cesium.HeightReference.CLAMP_TO_GROUND,
material : Cesium.Color.CORNFLOWERBLUE ,
outline : true,
outlineColor : Cesium.Color.BLACK,
outlineWidth:5,
}
});
addPolyEntities.push(pg);
return ;
}
ClearHandler();
let _this = this;
let positions = [];
let poly = undefined;
let PolygonPrimitive = (function () {
function _(positions) {
this.options = {
type:"CesiumPolygon",
polygon: {
hierarchy: [],
//perPositionHeight: true,
//material: Cesium.Color.RED.withAlpha(0.4),
//extrudedHeightReference:Cesium.HeightReference.CLAMP_TO_GROUND,
height:1,
//extrudedHeight:Cesium.HeightReference.CLAMP_TO_GROUND,
heightReference:Cesium.HeightReference.CLAMP_TO_GROUND,
material : Cesium.Color.CORNFLOWERBLUE ,
outline : true,
outlineColor : Cesium.Color.BLACK,
outlineWidth:5,
}
};
this.hierarchy = positions;
this._init();
}
_.prototype._init = function () {
let _self = this;
let _update = function () {
return _self.hierarchy;
};
this.options.polygon.hierarchy = new Cesium.CallbackProperty(_update, false);
let polyGon=_this.viewer.entities.add(this.options);
addPolyEntities.push(polyGon);
};
return _;
})();
handler = new Cesium.ScreenSpaceEventHandler(_this.viewer.scene.canvas);
handler.setInputAction(function (movement) {
let cartesian = _this.viewer.scene.camera.pickEllipsoid(movement.position, _this.viewer.scene.globe.ellipsoid);
if (positions.length == 0) {
positions.push(cartesian.clone());
}
positions.push(cartesian);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
handler.setInputAction(function (movement) {
let cartesian = _this.viewer.scene.camera.pickEllipsoid(movement.endPosition, _this.viewer.scene.globe.ellipsoid);
if (positions.length >= 2) {
if (!Cesium.defined(poly)) {
poly = new PolygonPrimitive(positions);
} else {
if(cartesian != undefined){
positions.pop();
positions.push(cartesian);
}
}
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
/* handler.setInputAction(function (movement) {
handler.destroy();
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);*/
handler.setInputAction(function(movement){
positions.pop();positions.pop();
// console.log(positions);
let list = [];
for(let p in positions){
list.push(Cartesian3ToWGS84(positions[p]));
}
OpenLayerAddPolygon(list);
handler.destroy();
CesiumDrawPolygon();
},Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
}
//画线
function CesiumDrawPolyLine(ositions){
if(ositions){
let ps = [];
for(let i in ositions){
ps.push(WGS84ToCartesian3(ositions[i]))
}
let polyLine= viewer.entities.add({
type:"CesiumPolyLine",
polyline : {
show : true,
clampToGround: true, //开启贴地
positions : ps,
material :Cesium.Color.fromCssColorString('#CD5C5C'),
width : 5
}
});
addPolyEntities.push(polyLine);
return ;
}
ClearHandler();
handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
let positions = [];
let poly = undefined;
let PolyLinePrimitive = (function(){
function _(positions){
this.options = {
type:"CesiumPolyLine",
polyline : {
show : true,
clampToGround: true, //开启贴地
positions : [],
material :Cesium.Color.fromCssColorString('#CD5C5C'),
width : 5
}
};
this.positions = positions;
this._init();
}
_.prototype._init = function(){
let _self = this;
let _update = function(){
return _self.positions;
};
this.options.polyline.positions = new Cesium.CallbackProperty(_update,false);
let polyLine= viewer.entities.add(this.options);
addPolyEntities.push(polyLine);
};
return _;
})();
handler.setInputAction(function(movement){
let cartesian = scene.camera.pickEllipsoid(movement.position,scene.globe.ellipsoid);
if(positions.length == 0) {
positions.push(cartesian.clone());
}
positions.push(cartesian);
},Cesium.ScreenSpaceEventType.LEFT_CLICK);
handler.setInputAction(function(movement){
let cartesian = scene.camera.pickEllipsoid(movement.endPosition,scene.globe.ellipsoid);
if(positions.length >= 2){
if (!Cesium.defined(poly)) {
poly = new PolyLinePrimitive(positions);
}else{
positions.pop();
positions.push(cartesian);
}
}
},Cesium.ScreenSpaceEventType.MOUSE_MOVE);
/* handler.setInputAction(function(movement){
handler.destroy();
},Cesium.ScreenSpaceEventType.RIGHT_CLICK);*/
handler.setInputAction(function(movement){
positions.pop();
positions.pop();
// console.log(positions);
let list = [];
for(let p in positions){
list.push(Cartesian3ToWGS84(positions[p]));
}
OpenLayerAddPolyline(list);
handler.destroy();
CesiumDrawPolyLine();
},Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
}
let OpenLayerDraw;
function OpenLayerDrawPoint() {
map.removeInteraction(OpenLayerDraw);
OpenLayerDraw = new ol.interaction.Draw({
source: source,
type: "Point"
});
OpenLayerDraw.on('drawend',function(event){
let position = ol.proj.transform(event.feature.getGeometry().flatCoordinates,'EPSG:3857','EPSG:4326');
CesiumDrawPoint({lng:position[0],lat:position[1]});
});
map.addInteraction(OpenLayerDraw);
}
function OpenLayerDrawPolyline() {
map.removeInteraction(OpenLayerDraw);
OpenLayerDraw = new ol.interaction.Draw({
source: source,
type: "LineString"
});
OpenLayerDraw.on('drawend',function(event){
let positions = event.feature.getGeometry().flatCoordinates;
let list = [];
for(let i=0;i<positions.length; i+=2){
let p = ol.proj.transform([positions[i],positions[i+1]],'EPSG:3857','EPSG:4326');
list.push({lng:p[0],lat: p[1]});
}
// console.log(list);
CesiumDrawPolyLine(list);
});
map.addInteraction(OpenLayerDraw);
}
function OpenLayerDrawPolygon() {
map.removeInteraction(OpenLayerDraw);
OpenLayerDraw = new ol.interaction.Draw({
source: source,
type: "Polygon"
});
OpenLayerDraw.on('drawend',function(event){
let positions = event.feature.getGeometry().flatCoordinates;
let list = [];
for(let i=0;i<positions.length; i+=2){
let p = ol.proj.transform([positions[i],positions[i+1]],'EPSG:3857','EPSG:4326');
list.push({lng:p[0],lat: p[1]});
}
list.pop();
// console.log(list);
CesiumDrawPolygon(list);
});
map.addInteraction(OpenLayerDraw);
}
function OpenLayerAddPoint(position) {
let point = ol.proj.fromLonLat([position.lng, position.lat]);
let newFeature = new ol.Feature({
geometry: new ol.geom.Point(point),
});
vectorLayer.getSource().addFeature(newFeature);
}
function OpenLayerAddPolyline(positions) {
let points = [];
for(let i in positions){
points.push(ol.proj.transform([positions[i].lng,positions[i].lat],'EPSG:4326','EPSG:3857'));
}
let newFeature = new ol.Feature({
geometry: new ol.geom.LineString(points)
});
vectorLayer.getSource().addFeature(newFeature);
}
function OpenLayerAddPolygon(positions) {
let points = [];
for(let i in positions){
let temp = [];
temp.push(positions[i].lng);
temp.push(positions[i].lat);
points.push(temp);
// points.push(ol.proj.transform([positions[i].lng,positions[i].lat],'EPSG:4326','EPSG:3857'));
}
/*points.push(points[0]);
let newFeature = new ol.Feature({
geometry: new ol.geom.Polygon([[points]])
});
vectorLayer.getSource().addFeature(newFeature);*/
var polygon = new ol.geom.Polygon([points]);
polygon.applyTransform(ol.proj.getTransform('EPSG:4326', 'EPSG:3857'));
var feature = new ol.Feature(polygon);
vectorLayer.getSource().addFeature(feature);
}
</script>
</body>
</html>
