基于Cesium开源框架的3D展示(包含加载三维以及地图的一些基本操作)_cesuim 加载面3d效果-程序员宅基地

技术标签: cesium  

加载3Dtile模型数据

                                       

3D展示效果
geojson格式数据展示

白驹过隙,时光如梭,又到一年年尾。回想一年的工作,感觉做了很多,又感觉什么都没做成。so,在此回顾一下今年经历过的那些个不一定有头,不一定有尾的项目经历。今天讲讲Cesium。

我是个随性的人,想到哪里讲到哪里,但是逻辑还是很清晰的,细节即是如此。

Cesium是一个很强大的3D框架,很多大公司的底层框架都基于此。so自己实践做了一些实验,对Cesium做了比较详细的了解,并简单实现了测面、测距、加载各种格式的数据(.geojson 3Dtile .kml .czml等格式)。废话不多说,具体了解一下。

首先是Cesium开发包的引入,直接在Cesium的官网上下载就好了,然后新建的项目在项目的Apps里面存放即可。

头部导入.js类

    <!-- script部分 -->
    <script src="../../../Build/Cesium/Cesium.js"></script>

初始化Cesium界面

var viewer = new Cesium.Viewer('map_container', {
        animation: false,
        baseLayerPicker: false,
        geocoder: true,
        timeline: false,
        sceneModePicker: true,
        navigationHelpButton: false,
        infoBox: true,
        fullscreenButton:false,
        vrButton:true,
        homeButton:false,
        selectionIndicator : false,//是否显示选取指示器组件
    });

    viewer._cesiumWidget._creditContainer.style.display = "none";		//去掉左下角那个不可爱的图标

    //    viewer.extend(Cesium.viewerCesiumInspectorMixin);         //那些个特效
    viewer.camera.setView({
        destination:Cesium.Cartesian3.fromDegrees(111.07, 39.05, 20000000),
        orientation:{
            heading : Cesium.Math.toRadians(0),
            pitch : Cesium.Math.toRadians(-90),
            roll : Cesium.Math.toRadians(0)         //heading、pitch和roll就是镜头相对于xyz轴的角度,比如pitch为-90°而另外两个为0时,就是90°向下俯视地球。
        }
    });

new操作的时候,后面{}里面的item都是可选的,改成true or false都可以,都是些特效类,玩腻了,除了必要的,都不要了,例如baselayerPicker底图选择器,里面包含多种数据源(google的啦,bingMap)

加载底图(天地图的,找了好久才找到)

    var layerone = viewer.scene.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
        url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles",
        layer: "tdtImgBasicLayer",
        style: "default",
        format: "image/jpeg",
        tileMatrixSetID: "GoogleMapsCompatible",
        show: false
    }));//卫星影像
//    layerone.alpha = 0.3;
//    layerone.brightness = 2.0;
   var layertwo =  viewer.scene.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
        url: "http://t0.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",
        layer: "tdtImgAnnoLayer",
        style: "default",
        format: "image/jpeg",
        tileMatrixSetID: "GoogleMapsCompatible",
        show: false
    }));//注记图层

加载数据,不具体去分开了,因为我自己代码就是写在一起的,来个大集合,.geojson、.KML、tileset.json(3Dtile数据)

3Dtile是什么格式?该知道的总会知道,Cesium加载3Dtile

var URL_MODEL = "/officalCesium/Apps/baseData/";

    $('#upLoadFile').change(function () {
        var file =  $('#upLoadFile').get(0).files[0];
        var filename = file.name;
        var t = filename.lastIndexOf(".");
        var s = filename.substring(t+1,filename.length).toUpperCase();

        var dataType = document.getElementById("typeInput");
        var value = dataType.options[dataType.selectedIndex].value.toUpperCase();

        $('#addLayerModal').modal('hide');          //隐藏对话框

        if(s == value){

            if(value == "GEOJSON"){
                var filepath = URL_MODEL+filename;
                var geosonView = viewer.dataSources.add(Cesium.GeoJsonDataSource.load(filepath,{
                    stroke: Cesium.Color.YELLOW,       //设置为TRANSPARENT的时候,透明
                    fill: Cesium.Color.YELLOW,
                    strokeWidth: 5,
                    markerSymbol: '?',
                }));
                viewer.flyTo(geosonView);
//                alert(filepath+"");
            }

            else if (value == "JSON" && filename.toUpperCase() == "TILESET.JSON"){
                var filepath = URL_MODEL+filename;
                var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
                    url: filepath,  //数据路径
                    maximumScreenSpaceError: 2,//默认16,最大屏幕空间错误
                                                         //maximumNumberOfLoadedTiles: 1000,
                    maximumMemoryUsage:1024//默认512,内存MB的最大数量
                }));
                    viewer.flyTo(tileset);
//                alert(filepath+"");
            }
            else if(value == "KML"){
                var filepath = URL_MODEL+filename;
                var kml_view = Cesium.KmlDataSource.load(filepath);
                viewer.flyTo(kml_view);
//                alert(filepath+"");
            }else if(value == "CZML"){
                var filepath = URL_MODEL+filename;
              var dataRecourse = new Cesium.CzmlDataSource(filepath);
              dataRecourse.load();
              viewer.dataSources.add(dataRecourse);
              viewer.flyTo(data_resouce);
            }
        }else {
            alert("上传失败,不是."+value+"类型的文件");
        }
    });

飞行、复位等实用工具如下:

//飞行到某个点
    function dingwei(lon,lat,height){
        viewer.camera.flyTo({
            destination :  Cesium.Cartesian3.fromDegrees(lon,lat,height), // 设置位置
            orientation: {
                heading : Cesium.Math.toRadians(20.0), // 方向
                pitch : Cesium.Math.toRadians(-90.0),// 倾斜角度
                roll : 0
            },
            duration:5, // 设置飞行持续时间,默认会根据距离来计算
            complete: function () {
                // 到达位置后执行的回调函数
                console.log('到达目的地');
            },
            cancle: function () {
                // 如果取消飞行则会调用此函数
                console.log('飞行取消')
            },
            pitchAdjustHeight: -90, // 如果摄像机飞越高于该值,则调整俯仰俯仰的俯仰角度,并将地球保持在视口中。
            maximumHeight:500, // 相机最大飞行高度
            flyOverLongitude: 100, // 如果到达目的地有2种方式,设置具体值后会强制选择方向飞过这个经度
        });

    }
    //复位地图
    function clearMap(){
//    	 dingwei(115.446105254,22.771558650,2000);
        viewer.flyTo(tileset);
        clearAllPan();
    }
    //清空地图
    function clearAll(){
        clearAllPan();
    }

然后就是测距测面,测量分两种吧,一直贴地的,一种是3D的那种,贴地量算没问题,3D的我写的代码还是有问题。

    //* 测距测面  */

    var scene = viewer.scene;
    var canvas = viewer.canvas;
    var clock = viewer.clock;
    var camera = viewer.scene.camera;

    //布尔型变量
    var isPoint = false;
    var isPolyline = false;
    var isPolygon_line = false;

    //是否开始绘制标识
    var isStartDraw = false;
    var isclear = false;
    var points = viewer.entities.add(new Cesium.Entity());
    var polylines = viewer.entities.add(new Cesium.Entity());
    var Polygons_Line = viewer.entities.add(new Cesium.Entity());

    //画多边形过程中展示的线最后要移除或者不显示
    var Polygon_Lines_remove = viewer.entities.add(new Cesium.Entity());

    var ellipsoid = scene.globe.ellipsoid;
    canvas.onclick = function () {
        canvas.focus();
    };
    var handler = new Cesium.ScreenSpaceEventHandler(canvas);
    viewer.zoomTo(viewer.entities);

    defaultZoomAmount_ = 3000000.0;
    var lastPointLon = -999.0;
    var lastPointLat = -999.0;


    var firstPointLon = -999.0;
    var firstPointLat = -999.0;


    var measurePointsArray=new Array();
    measurePointsArray.splice(0,measurePointsArray.length);
    var endCartographic = new Cesium.Cartographic();
    var geodesic = new Cesium.EllipsoidGeodesic();
    var PolygonPointArray_line = null;
    var PolygonPointArray_fill = null;
    //鼠标移动时的那条线
    var moveLine_first = viewer.entities.add({
        id: "moveLine_first",
        name: 'line on the surface',
        polyline: {
            show: false,
            width: 2,
            material: Cesium.Color.WHITE
        }
    });

    var moveLine_second = viewer.entities.add({
        id: "moveLine_second",
        name: 'line on the surface',
        polyline: {
            show: false,
            width: 2,
            material: Cesium.Color.WHITE
        }
    });


    /*    handler.setInputAction(function(){},
            Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);*/
    //鼠标移动时做的操作
    handler.setInputAction(function (movement) {
      

        //捕获椭球体,将笛卡尔二维平面坐标转为椭球体的笛卡尔三维坐标,返回球体表面的点
        var cartesian=viewer.camera.pickEllipsoid(movement.endPosition, ellipsoid);
        if(cartesian) {
            //将笛卡尔三维坐标转为地图坐标(弧度)
            var cartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
            //将地图坐标(弧度)转为十进制的度数
            var lat_String = Cesium.Math.toDegrees(cartographic.latitude).toFixed(4);
            var log_String = Cesium.Math.toDegrees(cartographic.longitude).toFixed(4);
            var alti_String = (viewer.camera.positionCartographic.height / 1000).toFixed(2);
            longitude_show.innerHTML = log_String;
            latitude_show.innerHTML = lat_String;
            altitude_show.innerHTML = alti_String;
        }
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);



    function clearAllPan() {
        viewer.entities.removeAll();
        isStartDraw = false;
        isclear = true;
        document.body.style.cursor = "pointer";
        document.getElementById("map_container").style.cursor = "pointer";
        handler.setInputAction(function(){
        },Cesium.ScreenSpaceEventType.LEFT_CLICK);
    }

    var QQ=0;

    function clearAllPan1(id) {
        if(id!=undefined){
            var tempmark = viewer.entities.getById(id);
            viewer.entities.remove(tempmark);
        }
        QQ=1;
    }

    //双击停止加线面
    function shuangji(){
        isPolyline = false;
        isPolygon_line = false;
        isPolygon_fill = false;
        isStartDraw = false;

    }

    //加点
    function addPoint() {
        isPoint = true;
        isPolyline = false;
        isPolygon_line = false;
        isPolygon_fill = false;
        isStartDraw = false;
        QQ=0;
    }

    //加线
    function measureLength() {
        var select_measure = document.getElementById("selOpt");
        var value_measure = select_measure.options[select_measure.selectedIndex].value;
        if(value_measure == 2){
            isPoint = false;
            isPolyline = true;
            isPolygon_line = false;
            isPolygon_fill = false;
            isStartDraw = false;
            QQ=0;
            document.body.style.cursor = "url(resource/pic/icons/magnifier3.cur) 12 12,crosshair";
            document.getElementById("map_container").style.cursor = "url(resource/pic/icons/magnifier3.cur) 12 12,crosshair";
            addOnClickListener();
        }

    }

    function addOnClickListener(){

        handler.setInputAction(function(){},
            Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
        //鼠标移动时做的操作
        handler.setInputAction(function (movement) {
            if (isPolyline || isPolygon_line ) {
                var cartesian = viewer.camera.pickEllipsoid(movement.endPosition, scene.globe.ellipsoid);
                if (cartesian && isStartDraw) {
                    //做清除工作把全局变量moveLine清除掉了 ,需要重新加到entities上 否则显示不正常
                    if (isclear) {
                        viewer.entities.add(moveLine_first);
                        viewer.entities.add(moveLine_second);
                        isclear = false;
                    }
                    var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
                    var curMovementLon = Cesium.Math.toDegrees(cartographic.longitude).toFixed(12);
                    var curMovementLat = Cesium.Math.toDegrees(cartographic.latitude).toFixed(12);

                    viewer.entities.getById("moveLine_first").polyline.positions = Cesium.Cartesian3.fromDegreesArray([lastPointLon, lastPointLat ,curMovementLon,
                        curMovementLat]);//修改属性
                    viewer.entities.getById("moveLine_first").polyline.show = true;
                    if (PolygonPointArray_line != null) {
                        if (PolygonPointArray_line.length >= 3) {
                            viewer.entities.getById("moveLine_second").polyline.positions = Cesium.Cartesian3.fromDegreesArray([curMovementLon, curMovementLat, firstPointLon, firstPointLat]);//修改属性
                            viewer.entities.getById("moveLine_second").polyline.show = true;
                        }
                    }
                }
            }
            //捕获椭球体,将笛卡尔二维平面坐标转为椭球体的笛卡尔三维坐标,返回球体表面的点
            var cartesian=viewer.camera.pickEllipsoid(movement.endPosition, ellipsoid);
            if(cartesian){
                //将笛卡尔三维坐标转为地图坐标(弧度)
                var cartographic=viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
                //将地图坐标(弧度)转为十进制的度数
                var lat_String=Cesium.Math.toDegrees(cartographic.latitude).toFixed(4);
                var log_String=Cesium.Math.toDegrees(cartographic.longitude).toFixed(4);
                var alti_String=(viewer.camera.positionCartographic.height/1000).toFixed(2);
                longitude_show.innerHTML=log_String;
                latitude_show.innerHTML=lat_String;
                altitude_show.innerHTML=alti_String;
            }
        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);


        //鼠标左击做的操作
        handler.setInputAction(function (click) {
            if(QQ==1){
                var pickedObject = viewer.scene.pick(click.position);

                if (Cesium.defined(pickedObject) && (pickedObject.id != undefined)) {
                    actEntity = pickedObject.id;
                    clearAllPan1(actEntity._id);
                }

            }

            if (isPoint || isPolyline || isPolygon_line ) {
                var cartesian = viewer.camera.pickEllipsoid(click.position, scene.globe.ellipsoid);
                if (cartesian) {
                    var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
                    var currentClickLon = Cesium.Math.toDegrees(cartographic.longitude).toFixed(12);
                    var currentClickLat = Cesium.Math.toDegrees(cartographic.latitude).toFixed(12);


                    /*   var currentClickHeight = cartographic.height;
                      console.log(currentClickHeight); */

                    if (!isStartDraw) {
                        viewer.entities.add({
                            position: cartesian,
                            point: {
                                parent: points,
                                pixelSize: 5,
                                color: Cesium.Color.YELLOW
                            }
                        });
                        firstPointLon = currentClickLon;
                        firstPointLat = currentClickLat;

                        PolygonPointArray_line = null;
                        PolygonPointArray_fill = null;
                        measurePointsArray.splice(0,measurePointsArray.length);
//                        var startCartographic = Cesium.Cartographic.fromDegrees(firstPointLon, firstPointLat);
                        measurePointsArray.push(cartographic);
                        isStartDraw = true;
                    } else {
                        if (isPoint) {
                            viewer.entities.add({
                                position: cartesian,
                                point: {
                                    parent: points,
                                    pixelSize: 5,
                                    color: Cesium.Color.YELLOW
                                }
                            });
                        }
                        if (isPolyline || isPolygon_line )
                        {
                            //                       endCartographic = Cesium.Cartographic.fromDegrees(currentClickLon, currentClickLat,currentClickHigh);
                            endCartographic = Cesium.Cartographic.fromDegrees(currentClickLon, currentClickLat);
                            console.log(endCartographic);
                            measurePointsArray.push(endCartographic);
                            var arrLength=measurePointsArray.length;
                            var tmpDis=0;
                            var sumDis=0;
                            for(var i=1;i<arrLength;i++)
                            {
                                geodesic.setEndPoints(measurePointsArray[i-1], measurePointsArray[i]);
                                tmpDis=Math.round(geodesic.surfaceDistance);
                                sumDis=sumDis+tmpDis;
                            }
                            if(sumDis>1000)
                            {
                                var polylineDis= (sumDis / 1000).toFixed(1) + " km";
                            }
                            else{
                                var polylineDis= sumDis + " m";
                            }
                            //  console.log(dis);
                            viewer.entities.add({
                                parent: polylines,
                                polyline: {
                                    //                               positions: Cesium.Cartesian3.fromDegreesArray([lastPointLon, lastPointLat,lastPointHigh, currentClickLon, currentClickLat,currentClickHigh]),
                                    positions: Cesium.Cartesian3.fromDegreesArray([lastPointLon, lastPointLat, currentClickLon, currentClickLat]),
                                    width: 2,
                                    material: Cesium.Color.RED
                                },
                                label: {
                                    text: polylineDis.toString(),
                                    font: '20px SimHei ',
                                    Width: 10,
                                    style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                                    fillColor: Cesium.Color.YELLOW,
                                    outlineColor : Cesium.Color.GRAY,
                                    outlineWidth :5,
                                    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM
                                },
                                /*  label : {
                                      // This callback updates the length to print each frame.
                                      text: polylineDis.toString(),
                                      font : '25px',
                                      pixelOffset : new Cesium.Cartesian2(1, 20)
                                  },*/
//                            position: Cesium.Cartesian3.fromDegrees(currentClickLon, currentClickLat,currentClickHigh)
                                position: Cesium.Cartesian3.fromDegrees(currentClickLon, currentClickLat)
                            });
                            viewer.entities.getById("moveLine_first").polyline.show = false;
                            viewer.entities.getById("moveLine_second").polyline.show = false;
                        }
                    }
                    //记录鼠标点击的当前位置 作为下一次画线的起始点位置
                    lastPointLon = currentClickLon;
                    lastPointLat = currentClickLat;
//				lastPointHigh = currentClickHigh;

                    if (isPolygon_line) {
                        if (PolygonPointArray_line == null)
                            PolygonPointArray_line = new Array();
                        PolygonPointArray_line.push(currentClickLon);
                        PolygonPointArray_line.push(currentClickLat);
//                    PolygonPointArray_line.push(currentClickHigh);
                    }
                }
            }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

        //鼠标双击时做的操作
        handler.setInputAction(function (click)
        {

            if (isPolyline || isPolygon_line )
            {
                var cartesian = viewer.camera.pickEllipsoid(click.position, scene.globe.ellipsoid);
                if (cartesian && isStartDraw)
                {
                    var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
                    var endPointLon = Cesium.Math.toDegrees(cartographic.longitude).toFixed(12);
                    var endPointLat = Cesium.Math.toDegrees(cartographic.latitude).toFixed(12);
                    var endPointHigh = Cesium.Math.toDegrees(cartographic.height).toFixed(12);

                    measurePointsArray.push(cartographic);
                    var arrLength=measurePointsArray.length;
                    var tmpDis=0;
                    var sumDis=0;
                    for(var i=1;i<arrLength;i++)
                    {
                        geodesic.setEndPoints(measurePointsArray[i-1], measurePointsArray[i]);
                        tmpDis=Math.round(geodesic.surfaceDistance);
                        sumDis=sumDis+tmpDis;
                    }
                    //考虑多边形最后显示距离
                    geodesic.setEndPoints(measurePointsArray[0], measurePointsArray[arrLength-1]);
                    tmpDis=Math.round(geodesic.surfaceDistance);
                    sumDis1=sumDis+tmpDis;

                    if(sumDis>1000)
                    {
                        var polylineDis= (sumDis / 1000).toFixed(1) + " km";
                        var polygonDis = (sumDis1 / 1000).toFixed(1) + " km";
                    }
                    else{
                        var polylineDis= (sumDis) + " m";
                        var polygonDis = (sumDis1) + " m";
                    }


                    if (isPolyline || isPolygon_line )
                    {
                        //画末线段
                        viewer.entities.add({
                            name: 'line on the surface',
                            parent: polylines,
                            polyline: {
                                positions: Cesium.Cartesian3.fromDegreesArray([lastPointLon, lastPointLat, endPointLon, endPointLat]),
                                width: 5,
                                material: Cesium.Color.RED
                            },
                            label: {
                                text: polylineDis.toString(),
                                font: '20px SimHei ',
                                Width: 10,
                                style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                                fillColor: Cesium.Color.YELLOW,
                                outlineColor : Cesium.Color.GRAY,
                                outlineWidth :5,
                                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                                verticalOrigin: Cesium.VerticalOrigin.BOTTOM
                            },
                            /*label : {
                                // This callback updates the length to print each frame.
                                text: polylineDis.toString(),
                                font : '25px',
                                pixelOffset : new Cesium.Cartesian2(1, 20)
                            },*/
                            position: Cesium.Cartesian3.fromDegrees(endPointLon, endPointLat)
                        });
                        if ( isPolygon_line )
                        {
                            viewer.entities.add({
                                name: 'line on the surface',
                                parent: polylines,
                                polyline: {
                                    positions: Cesium.Cartesian3.fromDegreesArray([endPointLon, endPointLat, firstPointLon, firstPointLat]),
                                    width: 5,

                                    material: Cesium.Color.RED
                                }
                            });
                            viewer.entities.getById("moveLine_second").polyline.show = false;
                        }
                        viewer.entities.getById("moveLine_first").polyline.show = false;
                    }
                    //画多边形 不带填充
                    if (isPolygon_line)
                    {
                        if (PolygonPointArray_line != null) {
                            PolygonPointArray_line.push(endPointLon);
                            PolygonPointArray_line.push(endPointLat);
                        }
                        //当多边形数组中点的个数大于等于3时添加多边形
                        if (PolygonPointArray_line.length >= 3) {
                            viewer.entities.add({
                                name: 'polygon on surface',
                                polygon: {
                                    hierarchy: Cesium.Cartesian3.fromDegreesArray(PolygonPointArray_line),
                                    material: Cesium.Color.RED,
                                    fill: false,  //不显示填充
                                    outline: true,
                                    outlineWidth: 5.0,
                                    outlineColor: Cesium.Color.RED
                                },
                                label: {
                                    text: polygonDis.toString(),
                                    font: '20px SimHei ',
                                    Width: 10,
                                    style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                                    fillColor: Cesium.Color.YELLOW,
                                    outlineColor : Cesium.Color.GRAY,
                                    outlineWidth :5,
                                    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM
                                },
                                /*  label : {
                                      // This callback updates the length to print each frame.
                                      text: polygonDis.toString(),
                                      font : '25px',
                                      pixelOffset : new Cesium.Cartesian2(1, 1)
                                  },*/
                                position: Cesium.Cartesian3.fromDegrees(firstPointLon, firstPointLat)
                            });
                        }
                        PolygonPointArray_line = null;
                        viewer.entities.getById("moveLine_first").polyline.show = false;
                        viewer.entities.getById("moveLine_second").polyline.show = false;
                    }
                    isStartDraw = false;
                }
            }
        }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
    }


    //加多边形不带填充
    function measureArea() {
        var select_measure = document.getElementById("selOpt");
        var value_measure = select_measure.options[select_measure.selectedIndex].value;
        if(value_measure == 2){
            isPoint = false;
            isPolyline = false;
            isPolygon_line = true;
            isPolygon_fill = false;
            isStartDraw = false;
            QQ=0;
            document.body.style.cursor = "url(resource/pic/icons/magnifier3.cur) 12 12,crosshair";
            document.getElementById("map_container").style.cursor = "url(resource/pic/icons/magnifier3.cur) 12 12,crosshair";
            addOnClickListener();
        }

    }

唔,大概主要功能就是这些了。给自己备忘,代码包我就不传了,如果有问题或者想了解更多的童鞋可以私信或者微我 ^V^

GeoJson格式的国界线数据展示

 

测量

Life is like a box of chocolate,you never know what you're gonna get next.

 

 

 

 

 

 

 

 

 

 

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Enbir/article/details/85088647

智能推荐

JWT(Json Web Token)实现无状态登录_无状态token登录-程序员宅基地

文章浏览阅读685次。1.1.什么是有状态?有状态服务,即服务端需要记录每次会话的客户端信息,从而识别客户端身份,根据用户身份进行请求的处理,典型的设计如tomcat中的session。例如登录:用户登录后,我们把登录者的信息保存在服务端session中,并且给用户一个cookie值,记录对应的session。然后下次请求,用户携带cookie值来,我们就能识别到对应session,从而找到用户的信息。缺点是什么?服务端保存大量数据,增加服务端压力 服务端保存用户状态,无法进行水平扩展 客户端请求依赖服务.._无状态token登录

SDUT OJ逆置正整数-程序员宅基地

文章浏览阅读293次。SDUT OnlineJudge#include<iostream>using namespace std;int main(){int a,b,c,d;cin>>a;b=a%10;c=a/10%10;d=a/100%10;int key[3];key[0]=b;key[1]=c;key[2]=d;for(int i = 0;i<3;i++){ if(key[i]!=0) { cout<<key[i.

年终奖盲区_年终奖盲区表-程序员宅基地

文章浏览阅读2.2k次。年终奖采用的平均每月的收入来评定缴税级数的,速算扣除数也按照月份计算出来,但是最终减去的也是一个月的速算扣除数。为什么这么做呢,这样的收的税更多啊,年终也是一个月的收入,凭什么减去12*速算扣除数了?这个霸道(不要脸)的说法,我们只能合理避免的这些跨级的区域了,那具体是那些区域呢?可以参考下面的表格:年终奖一列标红的一对便是盲区的上下线,发放年终奖的数额一定一定要避免这个区域,不然公司多花了钱..._年终奖盲区表

matlab 提取struct结构体中某个字段所有变量的值_matlab读取struct类型数据中的值-程序员宅基地

文章浏览阅读7.5k次,点赞5次,收藏19次。matlab结构体struct字段变量值提取_matlab读取struct类型数据中的值

Android fragment的用法_android reader fragment-程序员宅基地

文章浏览阅读4.8k次。1,什么情况下使用fragment通常用来作为一个activity的用户界面的一部分例如, 一个新闻应用可以在屏幕左侧使用一个fragment来展示一个文章的列表,然后在屏幕右侧使用另一个fragment来展示一篇文章 – 2个fragment并排显示在相同的一个activity中,并且每一个fragment拥有它自己的一套生命周期回调方法,并且处理它们自己的用户输_android reader fragment

FFT of waveIn audio signals-程序员宅基地

文章浏览阅读2.8k次。FFT of waveIn audio signalsBy Aqiruse An article on using the Fast Fourier Transform on audio signals. IntroductionThe Fast Fourier Transform (FFT) allows users to view the spectrum content of _fft of wavein audio signals

随便推点

Awesome Mac:收集的非常全面好用的Mac应用程序、软件以及工具_awesomemac-程序员宅基地

文章浏览阅读5.9k次。https://jaywcjlove.github.io/awesome-mac/ 这个仓库主要是收集非常好用的Mac应用程序、软件以及工具,主要面向开发者和设计师。有这个想法是因为我最近发了一篇较为火爆的涨粉儿微信公众号文章《工具武装的前端开发工程师》,于是建了这么一个仓库,持续更新作为补充,搜集更多好用的软件工具。请Star、Pull Request或者使劲搓它 issu_awesomemac

java前端技术---jquery基础详解_简介java中jquery技术-程序员宅基地

文章浏览阅读616次。一.jquery简介 jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互 jQuery 的功能概括1、html 的元素选取2、html的元素操作3、html dom遍历和修改4、js特效和动画效果5、css操作6、html事件操作7、ajax_简介java中jquery技术

Ant Design Table换滚动条的样式_ant design ::-webkit-scrollbar-corner-程序员宅基地

文章浏览阅读1.6w次,点赞5次,收藏19次。我修改的是表格的固定列滚动而产生的滚动条引用Table的组件的css文件中加入下面的样式:.ant-table-body{ &amp;amp;::-webkit-scrollbar { height: 5px; } &amp;amp;::-webkit-scrollbar-thumb { border-radius: 5px; -webkit-box..._ant design ::-webkit-scrollbar-corner

javaWeb毕设分享 健身俱乐部会员管理系统【源码+论文】-程序员宅基地

文章浏览阅读269次。基于JSP的健身俱乐部会员管理系统项目分享:见文末!

论文开题报告怎么写?_开题报告研究难点-程序员宅基地

文章浏览阅读1.8k次,点赞2次,收藏15次。同学们,是不是又到了一年一度写开题报告的时候呀?是不是还在为不知道论文的开题报告怎么写而苦恼?Take it easy!我带着倾尽我所有开题报告写作经验总结出来的最强保姆级开题报告解说来啦,一定让你脱胎换骨,顺利拿下开题报告这个高塔,你确定还不赶快点赞收藏学起来吗?_开题报告研究难点

原生JS 与 VUE获取父级、子级、兄弟节点的方法 及一些DOM对象的获取_获取子节点的路径 vue-程序员宅基地

文章浏览阅读6k次,点赞4次,收藏17次。原生先获取对象var a = document.getElementById("dom");vue先添加ref <div class="" ref="divBox">获取对象let a = this.$refs.divBox获取父、子、兄弟节点方法var b = a.childNodes; 获取a的全部子节点 var c = a.parentNode; 获取a的父节点var d = a.nextSbiling; 获取a的下一个兄弟节点 var e = a.previ_获取子节点的路径 vue