superMap中forLeaflet的使用

项目开发中用到了superMap 再次做一下知识点记录以及工作中遇到的问题，此次在项目中用到的是for Leaflet

  • superMap是国产的gis地图包括很多选项例如leftlet 三维空间等等 本次在项目中使用的是for Leaflet是superMap基于leftLet封装的
  • superMap官方网站 http://iclient.supermap.io/download/download.html
  • for Leaflet的api需要去看leftLet的api即可
  • LeafLet js 官网： http://leafletjs.com/index.html
  • LeafLet js 官网demo： http://leafletjs.com/examples.html
  • LeafLet js 官网API： http://leafletjs.com/reference-1.3.0.html

    for Leaflet安装方式

  • http://iclient.supermap.io/web/introduction/leafletDevelop.html
    1
    npm install @supermap/iclient-leaflet
  • 在index.html引入css否则页面会错乱 可以将css复制到本地
    1
    2
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"/>
    <link rel="stylesheet" href="http://iclient.supermap.io/dist/leaflet/iclient9-leaflet.min.css"/>
  • 引入@supermap/iclient-leaflet
    1
    2
    import L from 'leaflet';
    import '@supermap/iclient-leaflet';//所有模块也可以单模块引入

    1、地图的基本实现方式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    var L = require('leaflet');
    require('@supermap/iclient-leaflet');
    //地图地图地址 官方上有案例也可以用自己发布的地图数据

     export default {
         data () {
             return {
                 url:'http://192.168.1.1:8090/iserver/services/map-hljmap/rest/maps/hljmap',//地图底图地址
                 map:ull,
                 marker:null,
                 tooltip:null,//悬浮提示框 放到悬浮事件会出错
                 mapCitys:null
             }
         },
         mounted(){
             this.initMap();
         },
         methods:{
            //每次创建重置图层以免图层叠加
            if (this.map != undefined || this.map != null) {
                this.map.remove();
            }
             //用于对多个图层进行分组并将其作为一个图层处理 如果将其添加到地图中
             this.mapCitys = L.layerGroup();
             //每次创建前先清除cities图层 防止图标覆盖越来越多
             this.mapCitys.clearLayers();

            this.map = L.map('map', {
                crs: L.CRS.EPSG4326,
                center: [45.816864,126.539886],////[纬度，经度]
                 maxZoom: 18,
                 minZoom: 3,
                 zoom: 10,
                 layers: [this.mapCitys]//自定义坐标图层
            });
             var mapOverlays = {
                 "Marker": this.mapCitys,
             };
            //渲染地图 tiledMapLayer用于在地图上加载和显示切片图层
             L.control.scale().addTo(this.map);  //比例尺
             L.control.layers(mapOverlays).addTo(this.map);//将自定义图层加到地图上
             //渲染地图 tiledMapLayer用于在地图上加载和显示切片图层
             //但是自定义替换url会造成叠加效果
             L.supermap.tiledMapLayer(url).addTo(this.map, {
                 transparent: true,
                 opacity: 0.6
             });
            var markerData = [
                {lat:"126.539886",lng:"45.816864",name:'我是1'},
                {lat:"124.559886",lng:"46.036864",name:'我是2'},
                {lat:"125.579886",lng:"48.156864",name:'我是3'},
                {lat:"127.599886",lng:"47.076864",name:'我是4'}
            ]
            for (let i = 0; i < markerData.length; i++) {
                this.showMapMarker();//初始化图标
            }

            this.ceratLine();
            this.creatArea();
         },
         //处理图标
         showMapMarker() {
             this.mapCitys.clearLayers();//清图坐标图层防止多层覆盖
             for (let i = 0; i < this.markerData.length; i++) {
                 if(this.markerData[i].Highlight == true){//是否高亮
                     this.creatMarker1(this.markerData[i], this.handleClick.bind(this.markerData[i], this.markerData[i]));
                 }else{
                     this.creatMarker(this.markerData[i], this.handleClick.bind(this.markerData[i], this.markerData[i]))
                 }
             }
         },
         //创建自定义标注
         creatMarker(data,clickHandle,hoverHandle){
             var self = this;
             var iconStyle =L.icon ({
                 iconUrl: 'images/marker.png',
                 iconSize: [25, 35],
             });
             this.marker = L.marker([data.lat,data.lng],{
                 icon: iconStyle,
                 draggable: false,//marker是否可以拖动
             }).addTo(this.mapCitys);
             //this.map.flyTo(this.marker.getLatLng());//飞入效果找到当前marker坐标
             this.marker.on({
                 //'mouseover': hoverHandle,
                 // 'mouseout': mouseoutHandle
                 'click': clickHandle
             });
             //maker上自定义一个Tooltip     自定义popup方法一样 放到悬浮事件位置会出错
             const html = `<p>${data.name}</p>`
             this.tooltip = this.marker.bindTooltip(html, {
                 maxHeight: 250,
                 maxWidth: 490,
                 className: 'tooltipMap',
                 offset: [0, 20],
                 direction:'bottom'
             }).on('tooltipopen', function (params) {

             });

         },
         //标注点击事件
         handleClick(data,even){
             console.log(data);
         },
         //创建线
         ceratLine(){
             var self = this;
             //也可以是多维数组
             var latlngs =[[43.001433,125.579886],[48.880615,125.579886]];
             var lineLayer = L.polyline(latlngs, {color: 'red'}).addTo(this.map);
             this.map.fitBounds(lineLayer.getBounds());
         },
         //创建区域
         creatArea(){
             //起始点是右下角顺时针
             var latlngs2 =  [
                [43.816864,131.539886],[42.036864,122.559886],
                [50.156864,120.579886],[50.076864,128.599886]
             ]; //区域坐标组
             var areaLayer = L.polygon(latlngs2, {color: 'yellow',fillColor:'blue',weight:1}).addTo(this.map); //添加到地图
         }
     }

    forLeft分图层

  • forLeft跟百度地图等都不一样 他是区分图层的 对各个图层操作
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    import L from 'leaflet';
    import '@supermap/iclient-leaflet';
        export default {
            name: "homeIndex1",
            data () {
                return {
                    map:null,
                    layerOne:null,//地图切片图层
                    marker:null,
                    tooltip:null,//悬浮提示框 放到悬浮事件会出错
                    layers:[],
                    cities:null,//坐标图层
                    lineer:null,//线图层
                    mbUrl:mbUrl//地图底片地址
                }
            },
            methods:{
              initMap(){
                 //用于对多个图层进行分组并将其作为一个图层处理 如果将其添加到地图中
                 this.cities = L.layerGroup();
                 this.lineer = L.layerGroup();
                 //每次创建前先清除cities图层 防止图标覆盖越来越多
                 this.cities.clearLayers();
                 var data = [
                     {lat:"-105.02",lng:"39.61",name:'我是1'},
                     {lat:"-104.99",lng:"39.74",name:'我是2'},
                     {lat:"-104.80",lng:"39.73",name:'我是3'},
                     {lat:"-105.23",lng:"39.77",name:'我是4'}
                 ]
                 this.map = L.map('map', {
                     center: [39.73, -104.99],
                     zoom: 10,
                     layers: [this.cities,this.lineer];//图层
                 });
                 var overlays = {
                     "Cities": this.cities,
                     "Line":this.lineer
                 };
                 //将图层添加到地图 Cities是地图名 具体看leftlet官方api
                 L.control.layers(overlays).addTo(this.map);
                 for (let i = 0; i < data.length; i++) {
                     this.creatMarker(data[i])
                 }
              },
              creatMarker(data,clickHandle,hoverHandle){
                  var self = this;
                  var iconStyle =L.icon ({
                      iconUrl: 'images/marker.png',
                      iconSize: [36, 45],
                  });
                  this.marker = L.marker([data.lng,data.lat],{
                      icon: iconStyle,
                      draggable: false,//marker是否可以拖动
                  }).addTo(this.cities);//添加到对应图层而不是map上


                  const html = `<p>${data.name}</p>`
                  this.tooltip = this.marker.bindTooltip(html, {
                      maxHeight: 250,
                      maxWidth: 490,
                      className: 'tooltipMap',
                      offset: [0, 20],
                      direction:'bottom'
                  }).on('tooltipopen', function (params) {

                  });

              },
              //创建线
              ceratLine(){
                  var self = this;
                  //也可以是多维数组
                  var latlngs =[[43.001433,-104.99],[48.880615,-105.99]];
                  var lineLayer = L.polyline(latlngs, {color: 'red'}).addTo(this.lineer);
                  this.map.fitBounds(lineLayer.getBounds());
              },
            }
        }

    自定义切换地图底图

  • 将顶部initMap中的tiledMapLayer替换成下面代码即可
    1
    2
    3
    4
    5
    this.mapUrlname =  L.supermap.tiledMapLayer(this.url, {
        transparent: true,
        opacity: 0.6
    });
    this.mapUrlname.addTo(this.map);
  • 自定义更换地图底层这样就不会有底层叠加的问题
    1
    2
    3
    4
    5
    6
    7
    setMap2() {
        if (this.mapUrlname != undefined || this.name != null) {
            this.mapUrlname.remove;
        }
        this.url = 'http://196.128.1.1:8090/iserver/services/map-hljterrainimage/rest/maps/hljterrainimage'
        this.initMap();
    },

打包问题

  • 因为supanMap的文件包含ES6语法 打包的时候node_modules包含ES6语法会报错，根据官方解决当时并不好使，所以决定
  • 按照script标签的引入方式，其余代码照旧
  • 在官方地址下载js文件包，在入后文件引入
    1
    2
    3
    4
    5
    6
    7
    <link rel="stylesheet" href="static/libs/leaflet.css"/>
    //所有需要的js都在这个js文件中引入了 所以要注意当前js中文件路径的问题 否则打包会报错
    <script type="text/javascript" src="static/leaflet/include-leaflet.js"></script>

    <script src="static/leaflet/include-web.js"></script>
    <script src="static/leaflet-ant-path/leaflet-ant-path.js"></script>
    <script src="static/leaflet-ant-path/leaflet-ant-path.es6.js"></script>
  • 引入完js代码之前的代码只需要将inport引入的方式删除即可
赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

越努力<br>越幸运<br>加油