基于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

智能推荐

艾美捷Epigentek DNA样品的超声能量处理方案-程序员宅基地

文章浏览阅读15次。空化气泡的大小和相应的空化能量可以通过调整完全标度的振幅水平来操纵和数字控制。通过强调超声技术中的更高通量处理和防止样品污染,Epigentek EpiSonic超声仪可以轻松集成到现有的实验室工作流程中,并且特别适合与表观遗传学和下一代应用的兼容性。Epigentek的EpiSonic已成为一种有效的剪切设备,用于在染色质免疫沉淀技术中制备染色质样品,以及用于下一代测序平台的DNA文库制备。该装置的经济性及其多重样品的能力使其成为每个实验室拥有的经济高效的工具,而不仅仅是核心设施。

11、合宙Air模块Luat开发:通过http协议获取天气信息_合宙获取天气-程序员宅基地

文章浏览阅读4.2k次,点赞3次,收藏14次。目录点击这里查看所有博文  本系列博客,理论上适用于合宙的Air202、Air268、Air720x、Air720S以及最近发布的Air720U(我还没拿到样机,应该也能支持)。  先不管支不支持,如果你用的是合宙的模块,那都不妨一试,也许会有意外收获。  我使用的是Air720SL模块,如果在其他模块上不能用,那就是底层core固件暂时还没有支持,这里的代码是没有问题的。例程仅供参考!..._合宙获取天气

EasyMesh和802.11s对比-程序员宅基地

文章浏览阅读7.7k次,点赞2次,收藏41次。1 关于meshMesh的意思是网状物,以前读书的时候,在自动化领域有传感器自组网,zigbee、蓝牙等无线方式实现各个网络节点消息通信,通过各种算法,保证整个网络中所有节点信息能经过多跳最终传递到目的地,用于数据采集。十多年过去了,在无线路由器领域又把这个mesh概念翻炒了一下,各大品牌都推出了mesh路由器,大多数是3个为一组,实现在面积较大的住宅里,增强wifi覆盖范围,智能在多热点之间切换,提升上网体验。因为节点基本上在3个以内,所以mesh的算法不必太复杂,组网形式比较简单。各厂家都自定义了组_802.11s

线程的几种状态_线程状态-程序员宅基地

文章浏览阅读5.2k次,点赞8次,收藏21次。线程的几种状态_线程状态

stack的常见用法详解_stack函数用法-程序员宅基地

文章浏览阅读4.2w次,点赞124次,收藏688次。stack翻译为栈,是STL中实现的一个后进先出的容器。要使用 stack,应先添加头文件include<stack>,并在头文件下面加上“ using namespacestd;"1. stack的定义其定义的写法和其他STL容器相同, typename可以任意基本数据类型或容器:stack<typename> name;2. stack容器内元素的访问..._stack函数用法

2018.11.16javascript课上随笔(DOM)-程序员宅基地

文章浏览阅读71次。<li> <a href = "“#”>-</a></li><li>子节点:文本节点(回车),元素节点,文本节点。不同节点树:  节点(各种类型节点)childNodes:返回子节点的所有子节点的集合,包含任何类型、元素节点(元素类型节点):child。node.getAttribute(at...

随便推点

layui.extend的一点知识 第三方模块base 路径_layui extend-程序员宅基地

文章浏览阅读3.4k次。//config的设置是全局的layui.config({ base: '/res/js/' //假设这是你存放拓展模块的根目录}).extend({ //设定模块别名 mymod: 'mymod' //如果 mymod.js 是在根目录,也可以不用设定别名 ,mod1: 'admin/mod1' //相对于上述 base 目录的子目录}); //你也可以忽略 base 设定的根目录,直接在 extend 指定路径(主要:该功能为 layui 2.2.0 新增)layui.exten_layui extend

5G云计算:5G网络的分层思想_5g分层结构-程序员宅基地

文章浏览阅读3.2k次,点赞6次,收藏13次。分层思想分层思想分层思想-1分层思想-2分层思想-2OSI七层参考模型物理层和数据链路层物理层数据链路层网络层传输层会话层表示层应用层OSI七层模型的分层结构TCP/IP协议族的组成数据封装过程数据解封装过程PDU设备与层的对应关系各层通信分层思想分层思想-1在现实生活种,我们在喝牛奶时,未必了解他的生产过程,我们所接触的或许只是从超时购买牛奶。分层思想-2平时我们在网络时也未必知道数据的传输过程我们的所考虑的就是可以传就可以,不用管他时怎么传输的分层思想-2将复杂的流程分解为几个功能_5g分层结构

基于二值化图像转GCode的单向扫描实现-程序员宅基地

文章浏览阅读191次。在激光雕刻中,单向扫描(Unidirectional Scanning)是一种雕刻技术,其中激光头只在一个方向上移动,而不是来回移动。这种移动方式主要应用于通过激光逐行扫描图像表面的过程。具体而言,单向扫描的过程通常包括以下步骤:横向移动(X轴): 激光头沿X轴方向移动到图像的一侧。纵向移动(Y轴): 激光头沿Y轴方向开始逐行移动,刻蚀图像表面。这一过程是单向的,即在每一行上激光头只在一个方向上移动。返回横向移动: 一旦一行完成,激光头返回到图像的一侧,准备进行下一行的刻蚀。

算法随笔:强连通分量-程序员宅基地

文章浏览阅读577次。强连通:在有向图G中,如果两个点u和v是互相可达的,即从u出发可以到达v,从v出发也可以到达u,则成u和v是强连通的。强连通分量:如果一个有向图G不是强连通图,那么可以把它分成躲个子图,其中每个子图的内部是强连通的,而且这些子图已经扩展到最大,不能与子图外的任一点强连通,成这样的一个“极大连通”子图是G的一个强连通分量(SCC)。强连通分量的一些性质:(1)一个点必须有出度和入度,才会与其他点强连通。(2)把一个SCC从图中挖掉,不影响其他点的强连通性。_强连通分量

Django(2)|templates模板+静态资源目录static_django templates-程序员宅基地

文章浏览阅读3.9k次,点赞5次,收藏18次。在做web开发,要给用户提供一个页面,页面包括静态页面+数据,两者结合起来就是完整的可视化的页面,django的模板系统支持这种功能,首先需要写一个静态页面,然后通过python的模板语法将数据渲染上去。1.创建一个templates目录2.配置。_django templates

linux下的GPU测试软件,Ubuntu等Linux系统显卡性能测试软件 Unigine 3D-程序员宅基地

文章浏览阅读1.7k次。Ubuntu等Linux系统显卡性能测试软件 Unigine 3DUbuntu Intel显卡驱动安装,请参考:ATI和NVIDIA显卡请在软件和更新中的附加驱动中安装。 这里推荐: 运行后,F9就可评分,已测试显卡有K2000 2GB 900+分,GT330m 1GB 340+ 分,GT620 1GB 340+ 分,四代i5核显340+ 分,还有写博客的小盒子100+ 分。relaybot@re...

推荐文章

热门文章

相关标签