精华内容
下载资源
问答
  • 在配置新地图时,如果需要用到工作空间中的其他地图,则可以将需要的多幅地图合并为一幅地图。本范例示范如何将同一工作空间的多幅地图进行合并。
  • echarts地图合并(省和省合并,市和市合并,省和市合并) //获取要合并地图的数据 $scope.getMergeMapData = function () { // var areaArr = [{pro:'湖北',city:[]}] // var areaArr = [{pro:'广东',city:['潮州...

    echarts地图合并(省和省合并,市和市合并,省和市合并)

      //获取要合并地图的数据
      $scope.getMergeMapData = function () {
          // var areaArr = [{pro:'湖北',city:[]}]
          // var areaArr = [{pro:'广东',city:['潮州市','揭阳市','汕头市','汕尾市']}]
          // var areaArr = [{pro:'中国',city:['黑龙江','吉林']}]
          var areaArr = [{pro:'中国',city:['内蒙古']},{pro:'吉林',city:['白城市','松原市']}]
          // var areaArr = [{pro:'江苏',city:['常州市']}]
          // var areaArr = [{pro:'湖北',city:['十堰市','襄阳市']}]
          $scope.mergeMap(areaArr).then(res=>{
              $scope.areaMap = res;
              $scope.showMap($scope.areaMap);
          });
      }
    
       //地图合并的方法
       $scope.mergeMap = function (areaArr){
           return new Promise((ok,no)=>{
               let result = [];
               let successNum = 0;
               areaArr.forEach(areaItem=>{
                   $.get(`./geo/${areaItem.pro}.json`, geoJson => { //请求本地的地图json文件
                       if(areaArr.length == 1 && areaItem.city.length == 0){
                           geoJson = decode(geoJson)
                           result = geoJson.features;
                       }else{
                           geoJson.features.forEach(featuresItem=>{
                               areaArr.forEach(areaItem2=>{
                                   areaItem2.city.some(cityItem=>{
                                       if(featuresItem.properties.name == cityItem){
                                           if(areaItem2.pro !== "中国"){
                                               geoJson = decode(geoJson)
                                           }
                                           result.push(featuresItem);
                                           return true;
                                       }
                                   })
                               });
                           });
                       }
                       successNum++;
                       if(successNum == areaArr.length){
                           ok({
                               type:"FeatureCollection",
                               features:result
                           });
                       }
                   });
               })
           } )
       }
       $scope.getMergeMapData();
    
        //解码 
        function decode(json) {
            if (!json.UTF8Encoding) {
                return json;
            }
            var encodeScale = json.UTF8Scale;
            if (encodeScale == null) {
                encodeScale = 1024;
            }
    
            var features = json.features;
    
            for (var f = 0; f < features.length; f++) {
                var feature = features[f];
                var geometry = feature.geometry;
                var coordinates = geometry.coordinates;
                var encodeOffsets = geometry.encodeOffsets;
    
                for (var c = 0; c < coordinates.length; c++) {
                    var coordinate = coordinates[c];
    
                    if (geometry.type === 'Polygon') {
                        coordinates[c] = decodePolygon(
                            coordinate,
                            encodeOffsets[c],
                            encodeScale
                        );
                    }
                    else if (geometry.type === 'MultiPolygon') {
                        for (var c2 = 0; c2 < coordinate.length; c2++) {
                            var polygon = coordinate[c2];
                            coordinate[c2] = decodePolygon(
                                polygon,
                                encodeOffsets[c][c2],
                                encodeScale
                            );
                        }
                    }
                }
            }
            // Has been decoded
            json.UTF8Encoding = false;
            return json;
        }
        function decodePolygon(coordinate, encodeOffsets, encodeScale) {
            var result = [];
            var prevX = encodeOffsets[0];
            var prevY = encodeOffsets[1];
    
            for (var i = 0; i < coordinate.length; i += 2) {
                var x = coordinate.charCodeAt(i) - 64;
                var y = coordinate.charCodeAt(i + 1) - 64;
                // ZigZag decoding
                x = (x >> 1) ^ (-(x & 1));
                y = (y >> 1) ^ (-(y & 1));
                // Delta deocding
                x += prevX;
                y += prevY;
    
                prevX = x;
                prevY = y;
                // Dequantize
                result.push([x / encodeScale, y / encodeScale]);
            }
    
            return result;
        }
    
    
        //展示地图 
        $scope.showMap = function(geoJson){
            var areaMap = echarts.init(document.getElementById('areaMap'));
            echarts.registerMap('HK', geoJson);
            var areaOption = {
                series: [
                    {
                        type: 'map',
                        roam: true,
                        zoom: 1.0,
                        // layoutCenter: ['65%', '30%'],
                        // 如果宽高比大于 1 则宽度为 100,如果小于 1 则高度为 100,保证了不超过 100x100 的区域
                        // layoutSize: '250',
                        mapType: 'HK', // 自定义扩展图表类型
                        itemStyle:{
                            normal:{
                                areaColor:'#f2f2f2',
                                borderWidth:'0.7'//,
                            }
                        },
                        data:[
                            {name:"内蒙古",value:"20"},
                            {name:"白城市",value:"80"},
                            {name:"松原市",value:"60"}
                        ]
                    }
                ]
            };
            if (areaOption && typeof areaOption === "object") {
                areaMap.setOption(areaOption, true);
                var width = $("#areaMap").width();
                var height = $("#areaMap").height();
                areaMap.resize(width, height);
                /*窗口自适应,关键代码*/
                $(window).resize(function () {
                    areaMap.resize();
                });
            }
        }
    
    <div id="areaMap" class="areaMap" style="width: 500px; height: 500px;"></div>
    

    注: 1,本地的地图json文件要中文的命名(eg:中国.json 广东.json);
    2,为什么要解码? 因为中国地图json文件里的坐标点是已经解码的,而省份地图的json文件里的点是编 码的;

    展开全文
  • echarts各省份地图合并成一个JS文件,只需引入一个就可以用所有省份的地图,文件还兼容了echarts4.0
  • Echarts地图合并提取

    千次阅读 热门讨论 2016-07-19 17:15:18
    合适人群:相对Echarts有所了解、以及对地图数据合并有所疑惑的朋友。 1.Echarts基础地图实现 //参数配置 - 如果不熟悉请参考官网 - 此处以重庆地图为例 var options = { "title" : { "text": "重庆地图", ...

    Echarts简述 :一个纯 Javascript 的图表库。

    讲解使用版本:2.x。

    合适人群:相对Echarts有所了解、以及对地图数据合并有所疑惑的朋友。

    1.Echarts基础地图实现

    //参数配置 - 如果不熟悉请参考官网 - 此处以重庆地图为例
    var options = {
      "title" : {
        "text": "重庆地图",
        "x":"center"
      },
      "tooltip" : {
        "trigger": "item",
        "enterable":true
      },
      "dataRange": {
        "min": 0,
        "max" : 50,
        "precision":0,
        "text":["高","低"],           // 文本,默认为数值文本
        "calculable" : false,
        "x": "left",
        "color":["#FFA500","#93AE46","#27B78C","#93DBC5","#CCCCCC"]
      },
      "toolbox": {
        "show" : true,
        "orient" : "vertical",
        "x": "right",
        "y": "center",
        "feature" : {
          "mark" : {"show": true},
          "dataView" : {"show": true, "readOnly": false},
          "restore" : {"show": true},
          "saveAsImage" : {"show": true}
        }
      },
      "series" : [
        {
          "name": "重庆",
          "type": "map",
          "mapType": "重庆",
          "roam": false,
          "itemStyle":{
            "normal":{
              "label":{"show":true},
              "areaStyle":{
                  "color":"#CCCCCC"
              },
              "borderColor":"#FFF"
            },
            "emphasis":{
              "label":{"show":true},
              "areaStyle":{
                "color":"#2D8CD1"
              }
            }
          },
          "data":[]
        }]
    }


    这里大家不难发现,中间几个区域文字重合,不够理想化.

    2.解决方式-合并区域

    由于重合显示不友好,建议吧重合区域合并提出。根据源码可以看出只要将其他区域的coordinateencodeOffsets合并到一个即可

    //将巴南区、江北区、渝北区、璧山区、北碚区、九龙坡区、沙坪坝区、大渡口区、南岸区、渝中区
    //等区域的coordinates和encodeOffsets放在统一的模块就能被当作是一个区域,然后删除原模块数据
    {
        'type': 'Feature',
        'id': '500103',
        'properties': {
            'name': '主城区',//自定义名称 
            'cp': [
                106.574269,29.571625
            ],
            'childNum': 10
        },
        'geometry': {
            'type': 'Polygon',
            'coordinates': [
                '@@nxnVlJlUXLu0083¦@x@Vl@nKVVX@V_V@@KlVXUu0084@lKlxXIl@ÈĊ@Vl@n_VJlu008Enu0090Vlnbu0084²VVVJVu0081VmUUkĕUamçUu008F@»W@@ĉnu0099V@XwVU@UUJWUXUW@UKm@UVUIVaUu0099UVmLUVu0083UUu0084UWWXUakVmUkbW@UVku0083UL@VW@kUWu0083u0081@mJUXVVUu0084@lmV@zklVVkLUl@¦u009BI',
                '@@nLVU@wV@lVu0084@Xllu0084ÈKlU@Lu0084@@bVKnx@I@JVaV@u0084x@Il@@Un@laVVn@mu008Fku008DUIm`k@WXu0081Jmk¯mkxWIkxWJk_UmVUUKu0083@UUu0099@u0083u0084@l',
                '@@@bVVXLu0082a@lnbWn@Lu0084@XVlK@VVLUVlbkLUKVVVL@Vu009AnXu0082VL@VV@UbVb@x@¦UxVb@bUJu0083L@Lu0084VVxlK@u0099nk@U@Wu0084UVLlKXVu0084@VblU@UUKVU@wn@VJVanLlkX@VaVKu0099¯@a@U@U@u0083VaUKu0084kUUu0083±maUkm@UUkbm@@Vk@@Ju0083wU@Ub@I@JmwUL@au0083@@KkVÇLku0083Wku0083@kUU@@xUVmKUnllUb',
                '@@XzVlVVkbVL@JVĀXu008Eu0082¼Vu0084u0084u0084XbW`Xu009CWVÈu008Eu0084u0084VVu009Au008EVkV@@UXa@alK@Iu0083u0083U@UKWu0081UyUI@wVUUWVak@VUku0083W¹@WXI@yVIUK@kWwkѯ±W@u0099kUb@KkVVVmXu0083J',
                '@@Xu0082VLV@u0084u0084@JkL@bWb@VU@UlÆu009CVyu0084a@nV@nn@KUu008F@IVJU_lJXu0090V@VlVIV`nIn°@bu0082lUbu009Au0084u0084KVI@aUaVw@¥@wUaVaU@@UUKWu0081u0099m@UUKUUVLlKkaVUUK@UkLWUu0083@@KXmma@ku0081bWKUU@aUamLnÞ@VWLk@@Wm@ULU@@Uu0099KUVWI',
                '@@XKu0082L@Vu009A@XbV@lW@UV@@VXIV@Uu0099VKlL@Knu0090nJ@VV@VU@Iu0084@@mVUVWUUmL@V¯LUK@UV@UU@a@U@yU@WLUK@X@KUVmL@u0083@aXI@w@ammVk@WÛwm@UxVu0090u0081VVbVLUJVxVUu0084V@V@X@JUIVbm@@Vk@@VkL@lVLUJ@zWJ@X',
                '@@Xºlu0084UVl@UbVXUV@xVJVzXJVUu009AL@VV@VKn@@Xl@XK@UmÝnKVbVakkVm@ku0084u0083UK@UmImu008F@LkKULVu009AU@WJ@UU@@VkXU@Wau0099@@Uu0081KWL',
                '@@VVu0084JVL@bUVVnl`XIlwXJlw°nnlu0082IXW@UÇĉk@WJkwkLu0083@WVkU@LU@U`W@UXUV@n',
                '@@k@@U@wu0084¥WKkVkImUmwu0081a@b@xWJ@b@u0084nKVU@L@WVLXKV@@z@V@bVVU@@VVL°K@U',
                '@@VLu009A@VVu0084@VL@aUKu0083IUUu0083@@JUVU@'
            ],
            'encodeOffsets': [
                [108990,30061],
                [109013,30319],
                [109013,30381],
                [108585,30032],
                [108855,30449],
                [108799,30241],
                [108799,30241],
                [109092,30241],
                [109080,30190],
                [109036,30257]
            ]
        }
    }


    合并后的图形

    3.显示被合并区域

    区域合并后,如果想要显示被合并区域则需要将其提出来这位单独模块。

    //提取成单独的区域
    {
        'type': 'Feature',
        'id': 'chong_qing_zcq_geo',
        'properties': {
            'name': '重庆主城区',
            'cp': [
                107.7539,
                30.1904
            ],
            'childNum': 40
        },
        'geometry': {
            'type': 'Polygon',
            'coordinates': ['@@əȂòɜƨu0098ѺɛƦȁ̐@ƪu0097õŏφƥòȃƥ̍Ƨôυ̏ƧôñóóôɛŏƩôƧƥôƧóυƨu009C̒ѹôu009CƦȃ@փƥɛ̑@@ɜƧó@ɚƧ@ñφσõ@ŎɝôƧu0097@ʵѷóƧʵóu0098@ŎóŐó@ôȁƥu009Bó̒υôóʶəu0098ƧȄς̎ƧȂôƨƨƨφɛ̎Őƨʷɞ@ςu052EóŌôôφ@ɜu0588̎ƨ'],
            'encodeOffsets': [[
                111150,
                32446
            ]]
        }
    }
    //为提取的区域添加数据链接指向
    '重庆主城区': {
        getGeoJson: function (callback) {
            require(['./geoJson/chong_qing_zcq_geo'], function (md) {
                callback(decode(md));
            });
        }
    }
    //为提取的区域添加地图数据
    define('echarts/util/mapData/geoJson/chong_qing_zcq_geo', [], function () {
        return {
            'type': 'FeatureCollection',
            'features': [
                {
                    'type': 'Feature',
                    'id': '500113',
                    'properties': {
                        'name': '巴南区',
                        'cp': [
                            106.7322,
                            29.4214
                        ],
                        'childNum': 1
                    },
                    'geometry': {
                        'type': 'Polygon',
                        'coordinates': [
                            '@@nxnVlJlUXLu0083¦@x@Vl@nKVVX@V_V@@KlVXUu0084@lKlxXIl@ÈĊ@Vl@n_VJlu008Enu0090Vlnbu0084²VVVJVu0081VmUUkĕUamçUu008F@»W@@ĉnu0099V@XwVU@UUJWUXUW@UKm@UVUIVaUu0099UVmLUVu0083UUu0084UWWXUakVmUkbW@UVku0083UL@VW@kUWu0083u0081@mJUXVVUu0084@lmV@zklVVkLUl@¦u009BI'
                        ],
                        'encodeOffsets': [[
                            108990,
                            30061
                        ]]
                    }
                },
                {
                    'type': 'Feature',
                    'id': '500105',
                    'properties': {
                        'name': '江北区',
                        'cp': [
                            106.8311,
                            29.6191
                        ],
                        'childNum': 1
                    },
                    'geometry': {
                        'type': 'Polygon',
                        'coordinates': ['@@nLVU@wV@lVu0084@Xllu0084ÈKlU@Lu0084@@bVKnx@I@JVaV@u0084x@Il@@Un@laVVn@mu008Fku008DUIm`k@WXu0081Jmk¯mkxWIkxWJk_UmVUUKu0083@UUu0099@u0083u0084@l'],
                        'encodeOffsets': [[
                            109013,
                            30319
                        ]]
                    }
                },
                {
                    'type': 'Feature',
                    'id': '500112',
                    'properties': {
                        'name': '渝北区',
                        'cp': [
                            106.7212,
                            29.8499
                        ],
                        'childNum': 1
                    },
                    'geometry': {
                        'type': 'Polygon',
                        'coordinates': ['@@@bVVXLu0082a@lnbWn@Lu0084@XVlK@VVLUVlbkLUKVVVL@Vu009AnXu0082VL@VV@UbVb@x@¦UxVb@bUJu0083L@Lu0084VVxlK@u0099nk@U@Wu0084UVLlKXVu0084@VblU@UUKVU@wn@VJVanLlkX@VaVKu0099¯@a@U@U@u0083VaUKu0084kUUu0083±maUkm@UUkbm@@Vk@@Ju0083wU@Ub@I@JmwUL@au0083@@KkVÇLku0083Wku0083@kUU@@xUVmKUnllUb'],
                        'encodeOffsets': [[
                            109013,
                            30381
                        ]]
                    }
                },{
                    'type': 'Feature',
                    'id': '500227',
                    'properties': {
                        'name': '璧山区',
                        'cp': [
                            106.2048,
                            29.5807
                        ],
                        'childNum': 1
                    },
                    'geometry': {
                        'type': 'Polygon',
                        'coordinates': ['@@XzVlVVkbVL@JVĀXu008Eu0082¼Vu0084u0084u0084XbW`Xu009CWVÈu008Eu0084u0084VVu009Au008EVkV@@UXa@alK@Iu0083u0083U@UKWu0081UyUI@wVUUWVak@VUku0083W¹@WXI@yVIUK@kWwkѯ±W@u0099kUb@KkVVVmXu0083J'],
                        'encodeOffsets': [[
                            108585,
                            30032
                        ]]
                    }
                },{
                    'type': 'Feature',
                    'id': '500109',
                    'properties': {
                        'name': '北碚区',
                        'cp': [
                            106.5674,
                            29.8883
                        ],
                        'childNum': 1
                    },
                    'geometry': {
                        'type': 'Polygon',
                        'coordinates': ['@@Xu0082VLV@u0084u0084@JkL@bWb@VU@UlÆu009CVyu0084a@nV@nn@KUu008F@IVJU_lJXu0090V@VlVIV`nIn°@bu0082lUbu009Au0084u0084KVI@aUaVw@¥@wUaVaU@@UUKWu0081u0099m@UUKUUVLlKkaVUUK@UkLWUu0083@@KXmma@ku0081bWKUU@aUamLnÞ@VWLk@@Wm@ULU@@Uu0099KUVWI'],
                        'encodeOffsets': [[
                            108855,
                            30449
                        ]]
                    }
                },{
                    'type': 'Feature',
                    'id': '500107',
                    'properties': {
                        'name': '九龙坡区',
                        'cp': [
                            106.3586,
                            29.4049
                        ],
                        'childNum': 1
                    },
                    'geometry': {
                        'type': 'Polygon',
                        'coordinates': ['@@XKu0082L@Vu009A@XbV@lW@UV@@VXIV@Uu0099VKlL@Knu0090nJ@VV@VU@Iu0084@@mVUVWUUmL@V¯LUK@UV@UU@a@U@yU@WLUK@X@KUVmL@u0083@aXI@w@ammVk@WÛwm@UxVu0090u0081VVbVLUJVxVUu0084V@V@X@JUIVbm@@Vk@@VkL@lVLUJ@zWJ@X'],
                        'encodeOffsets': [[
                            108799,
                            30241
                        ]]
                    }
                },{
                    'type': 'Feature',
                    'id': '500106',
                    'properties': {
                        'name': '沙坪坝区',
                        'cp': [
                            106.3696,
                            29.6191
                        ],
                        'childNum': 1
                    },
                    'geometry': {
                        'type': 'Polygon',
                        'coordinates': ['@@Xºlu0084UVl@UbVXUV@xVJVzXJVUu009AL@VV@VKn@@Xl@XK@UmÝnKVbVakkVm@ku0084u0083UK@UmImu008F@LkKULVu009AU@WJ@UU@@VkXU@Wau0099@@Uu0081KWL'],
                        'encodeOffsets': [[
                            108799,
                            30241
                        ]]
                    }
                },
                {
                    'type': 'Feature',
                    'id': '500108',
                    'properties': {
                        'name': '南岸区',
                        'cp': [
                            106.6663,
                            29.5367
                        ],
                        'childNum': 1
                    },
                    'geometry': {
                        'type': 'Polygon',
                        'coordinates': ['@@VVu0084JVL@bUVVnl`XIlwXJlw°nnlu0082IXW@UÇĉk@WJkwkLu0083@WVkU@LU@U`W@UXUV@n'],
                        'encodeOffsets': [[
                            109092,
                            30241
                        ]]
                    }
                },{
                    'type': 'Feature',
                    'id': '500104',
                    'properties': {
                        'name': '大渡口区',
                        'cp': [
                            106.4905,
                            29.4214
                        ],
                        'childNum': 1
                    },
                    'geometry': {
                        'type': 'Polygon',
                        'coordinates': ['@@k@@U@wu0084¥WKkVkImUmwu0081a@b@xWJ@b@u0084nKVU@L@WVLXKV@@z@V@bVVU@@VVL°K@U'],
                        'encodeOffsets': [[
                            109080,
                            30190
                        ]]
                    }
                },{
                    'type': 'Feature',
                    'id': '500103',
                    'properties': {
                        'name': '渝中区',
                        'cp': [
                            106.5344,
                            29.5477
                        ],
                        'childNum': 1
                    },
                    'geometry': {
                        'type': 'Polygon',
                        'coordinates': ['@@VLu009A@VVu0084@VL@aUKu0083IUUu0083@@JUVU@'],
                        'encodeOffsets': [[
                            109036,
                            30257
                        ]]
                    }
                }
            ],
            'UTF8Encoding': true
        }
    });

    通过上面方式后,你只需要修改series.mapType = '重庆主城区'(你自定义名称),就能显示提取的区域了,此时就完成了。

    4.关于其他问题

        有些朋友可能对上面的地理位置编码很好奇,其实解码出来就是Array[{x,y},{x,y},...],下面是我根据源码查找的编码解码方法。

    //从Echarts提取的编码解码方法
    function decodePolygon(coordinate, encodeOffsets) {
        var result = [];
        var prevX = encodeOffsets[0];
        var prevY = encodeOffsets[1];
    
        for (var i = 0; i < coordinate.length; i+=2) {
            var x = coordinate.charCodeAt(i) - 64;
            var y = coordinate.charCodeAt(i+1) - 64;
            // ZigZag decoding
            x = (x >> 1) ^ (-(x & 1));
            y = (y >> 1) ^ (-(y & 1));
            // Delta deocding
            x += prevX;
            y += prevY;
    
            prevX = x;
            prevY = y;
            // Dequantize
            result.push([x / 1024, y / 1024]);
        }
    
        return result;
    }
    
    function encodePolygon(coordinate, encodeOffsets) {
        var result = '';
    
        var prevX = quantize(coordinate[0][0]);
        var prevY = quantize(coordinate[0][1]);
        encodeOffsets[0] = prevX;
        encodeOffsets[1] = prevY;
    
        for (var i = 0; i < coordinate.length; i++) {
            var point = coordinate[i];
            result+=encode(point[0], prevX);
            result+=encode(point[1], prevY);
    
            prevX = quantize(point[0]);
            prevY = quantize(point[1]);
        }
    
        return result;
    }
    
    function encode(val, prev){
        val = quantize(val);
        val = val - prev;
    
        if (((val << 1) ^ (val >> 15)) + 64 === 8232) {
            val--;
        }
        val = (val << 1) ^ (val >> 15);
        return String.fromCharCode(val+64);
    }
    
    function quantize(val) {
        return Math.ceil(val * 1024);
    }
    //测试写的编码方法
    function testEncode(json){
        var feature = json;
        var coordinates = feature.geometry.coordinates;
        var encodeOffsets = feature.geometry.encodeOffsets;
    
        for (var c = 0; c < coordinates.length; c++) {
            var coordinate = coordinates[c];
    
            if (feature.geometry.type === 'Polygon') {
                coordinates[c] = encodePolygon(
                        coordinate,
                        encodeOffsets[c]
                );
            } else if (feature.geometry.type === 'MultiPolygon') {
                for (var c2 = 0; c2 < coordinate.length; c2++) {
                    var polygon = coordinate[c2];
                    coordinate[c2] = encodePolygon(
                            polygon,
                            encodeOffsets[c][c2]
                    );
                }
            }
        }
        return json;
    }


    本次内容完结!希望大家有所收获,如果有问题可以留言,如果讲的不好希望大家提出,我会努力改进,谢谢!



    展开全文
  • vue中使用OpenLayers(五):两层地图合并 html中需要用两个id接收jpg和png。png在jpg上面。地址和区域描边都在png上 <div id="themap" style="width: 100%;height: 100%;"></div> <div style=...

    vue中使用OpenLayers(五):两层地图合并

    html中需要用两个id接收jpg和png。png在jpg上面。地址和区域描边都在png上

       <div id="themap" style="width: 100%;height: 100%;"></div>
       <div style="width: 100%;height: 100%;position: absolute;width: 100%;height: 100%;top: 0;left: 0;" id="themap2"></div>
    

    在js中

      let view=new View({
              center: fromLonLat([119.60753817138888, 30.49043631527778]),
              projection: "EPSG:3857",
              zoom: 8,
              minZoom: 8,
            })
            this.map = new Map({
              target: "themap",
              view:view ,
              layers: [
                new TileLayer({
                  source: new XYZ({
                    url: "http://61.164.49.122:8092/googlemaps/satellite/{z}/{x}/{y}.jpg",
                    //url:'http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i345013117!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0',
                    wrapX: true
                  })
                })
              ]
            });
    
            this.map2=new Map({
              target: "themap2",
              view:view ,
              layers: [
                new TileLayer({
                  source: new XYZ({
                    url: "http://61.164.49.122:8092/googlemaps/overlay/{z}/{x}/{y}.png",
                    //url:'http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i345013117!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0',
                    wrapX: true
                  })
                })
              ]
            });
    

    提示一定要注意view要另外弄出来。其中两个地图的结合靠的就是使用同一个view。

    展开全文
  • echart地图区域合并,并不出现边框 按照之前的经验,每个区域都有自己的json数组,如果要调整区域划分,比如把A拆成AB或者把AB合并,只需要调整该区域的经纬度数组即可,但是会有个问题,合并之后会有边框,比如 想...

    原文地址:https://blog.csdn.net/qq_19816325/article/details/108520451
    问题
    echart地图区域合并,并不出现边框
    按照之前的经验,每个区域都有自己的json数组,如果要调整区域划分,比如把A拆成AB或者把AB合并,只需要调整该区域的经纬度数组即可,但是会有个问题,合并之后会有边框,比如
    在这里插入图片描述
    想要解决这种问题,参考了大神帖子,现在记录下。
    需要两个网站
    1、获取地图json数据,阿里地图选择器http://datav.aliyun.com/tools/atlas/#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5
    2、地图文件编辑mapshaper https://mapshaper.org/

    1. 修改要处理的文件

    首先将你要合并的地图文件,添加字段标识,name同级添加,名字自定义比如“area”。
    举个栗子,我要将崇明区长兴区合并成一个新区域叫新区,那么就在两个区域下面添加 "area": "新区",
    在这里插入图片描述

    2.将要处理的json上传到mapshaper
    在这里插入图片描述
    点击console打开控制台
    在这里插入图片描述
    输入执行命令生成新json文件并输出

    dissolve 'area' -o result.json
    

    dissolve:合并命令
    ‘area’:步骤一取得别名
    -o:固定
    result.json生成的文件,可自定义命名

    3.修改最终json
    生成完的json文件只有area,并没有name,但是地图里面是根据name展示的
    在这里插入图片描述
    用编辑器将所有的area替换成name
    然后将新的json文件引入即可
    在这里插入图片描述

    展开全文
  • 但使用后,地图背景就变灰色了,但是我要效果要如第一张图的样子 我想要合并两个数据,背景如图1,又有蓝色的经纬座标 请各位大神帮助!谢谢 图一的代码 <!DOCTYPE html> ...
  • 世界地图: library(maps) data("world.cities") bigcities <- subset(world.cities, pop > 5000000) qplot(long, lat, data = bigcities,colour=country.etc,size=pop)+ borders("world", size= 0.5) ...
  • ArcGIS合并和拆分地图

    千次阅读 2019-02-27 15:45:14
    现在我们想要把这几个村庄的地图合并到同一张地图上,具体操作如下: 选择Geoprocessing菜单中的Merge方法,然后操作如下: 最后直接点击Ok即可。 2、地图拆分 现在我们在一张地图上有十个村的地图, 我们...
  • 地图区域合并

    2021-01-27 15:10:11
    想要实现地图区域合并,重点在于地图Json合并。 需求描述: 我想要A市和B市合并成一个区域, A的坐标点为[apt1,apt2,apt3,apt4,...,apt1]; B的坐标点为[bpt1,bpt2,bpt3, ..., bpt1]; 有什么好的方案让AB合并成一个...
  • echarts 地图 区域合并

    千次阅读 2020-09-10 18:50:55
    想要实现地图区域合并,重点在于地图Json合并。 需求描述: 我想要A市和B市合并成一个区域, A的坐标点为[apt1,apt2,apt3,apt4,...,apt1]; B的坐标点为[bpt1,bpt2,bpt3, ..., bpt1]; 有什么好的方案让AB合并成一个...
  • Echarts地图详解(地图样式、合并地图、增加地图

    万次阅读 多人点赞 2018-04-20 00:58:21
     地图在我们日常的数据可视化分析中是很常见的一种展示手段,不仅美观而且很大气。尤其是在大屏展示中更是扮演着必不可缺的角色。 地图实现 下面我们就来实现一个基本的地图,并为之添加一些好看的样式。 &...
  • 使用 Python 合并地图瓦片

    千次阅读 2019-03-25 23:23:21
    地图本就感兴趣的我,也想试试合并互联网地图的某个范围内的地图图层。 随着技术的发展,国内的地图服务商相继将地图瓦片更新为矢量瓦片[1],这下想取到相应的瓦片图,我感觉没那么简单。那还是找个相对简单的,还...
  • ECharts合并地图上的区域

    千次阅读 2019-02-18 11:18:42
    例如,要求显示中国地图,但需要将山东江苏和浙江这3个省合并起来,显示“东部区域”。其他省份不变。 于是就需要对官方提供的地图数据进行修改。 一个思路是借助第三方工具,生成新区域的轮廓点,然后删除原来的3个...
  • 合并指定工作空间,同时合并指定的地图,从而将所有的数据和地图显示整合在一个工作空间中。
  • 新规划了区县后原Echarts地图不支持新的区域,可以参照此文档修改地图区域信息增加或合并区域
  • 其中包含echarts全国地图JS文件以及各省份地图JS文件、最新版山东地图合并莱芜后的)json文件
  • 方便大家下载,特意上传到CSDN,只是json文件,有需要可以下载。echarts山东地图最新json文件 合并莱芜后的
  • 这里写自定义目录标题ECharts合并地图上的区域(济南市合并莱芜市)新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个...
  • Echarts最新山东地图(济南莱芜合并后的)js和json文件,包括例子
  • 应客户需求,必须用2D地图做出3D效果样式(地图色块渐变色后续维护)。本菜翻遍echarts官方文档以及网上的各种资料,做出了自己的整合。为了防止下次踩坑,故整理此篇文章与各位看客老爷共勉。废话不多说,实现的两...
  • 济南合并莱芜以后的地图,如果打不开放到项目里,因为有JQuery,乱码的话自己转个码,这个默认是UTF-8.
  • 最近公司有个需求是按照大区,即把中国分成... echarts地图合并关键点是把coordinates和encodeOffsets合并,而且这两个必须都合并,且最多只能合并到二维数组,合并到三维数组就不行了。  实例结果截图   ...
  • 百度地图SDK 模拟器包or真机包 合并

    千次阅读 2015-06-03 14:52:06
    百度地图SDK提供了模拟器和真机两种环境所使用的libbaidumapapi.a,分别存放在libs/Release-iphonesimulator和libs/Release-iphoneos文件夹下,开发者可根据需要使用真机或模拟器的包,如果需同时使用真机和模拟器的...
  • 高德地图两个不同的的功能合并

    千次阅读 2017-09-24 16:23:52
    接高德地图的时候 分别用到了 实时定位 搜索 行政区域 标注 一开始把demo上的例子拷贝过来的时候没看js 以为拿过来就可以用 但事实不是这样的  高德的只能引入一个js 但js后面可以跟方法 逗号分割 &plugin=AMap...
  • *Echarts获取多省市地图JSON文件方法 最近在学习用echarts插件进行地图显示,当我想要获取两个或者以上省的一块大地图的时候,发现好像没有可以直接生成的,最后摸索出来了一个比较实用的方法,仅供参考。(以苏皖两...
  • 开发一个新的地图API,目前一个难题。 需要将多条不规律的线合并为一条,这些线可相交,可是折线,长短不一。 有过类似经验或者有想法的同僚来探讨一下吧

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 28,098
精华内容 11,239
关键字:

地图合并