MapTalks.js 使用小结（一）

 MapTalks.js 地图框架

官网地址：https://maptalks.org/

API地址：https://maptalks.org/maptalks.js/api/0.x/Map.html

一，自定义arcgis server 瓦片图层

  <script>
    var arcUrl = 'http://localhost:6080/arcgis/rest/services/mapname/MapServer';
    maptalks.SpatialReference.loadArcgis(arcUrl + '?f=pjson', function (err, conf) {
      if (err) {
        throw new Error(err);
      }
      var ref = conf.spatialReference;
      ref.projection = 'EPSG:4326';
      console.log(ref, conf.tileSystem, conf.tileSize)
      var map = new maptalks.Map('map', {
        center: [-5493.33261,-2581.18904],//中心点
        zoom: 4,
        maxZoom: 8,
        spatialReference: ref,
        attribution: false,
        baseLayer: new maptalks.TileLayer('base', {
          'tileSystem': conf.tileSystem,
          'tileSize': conf.tileSize, // [512, 512]
          'urlTemplate': arcUrl + '/tile/{z}/{y}/{x}',
        })
      });</script>

二、设置一个弹出框

    let infowindow = new maptalks.ui.InfoWindow({
      custom:true,
      dy:-10,
      autoCloseOn:'click',
      content:content
    });
    infowindow.on('showend' ,function (e) {
      let win = e.target;
      document.getElementById('closeInfoWin').onclick = function () {
        win.hide();
      }
    });

三、测距工具隐藏和开启

  addDistancetool(){
      this.distanceTool = new maptalks.DistanceTool({
          'once' : true,
          'symbol': {
          'lineColor' : '#FF6A6A',
          'lineWidth' : 2
        },
          'vertexSymbol' : {
          'markerType'        : 'ellipse',
          'markerFill'        : '#1bbc9b',
          'markerLineColor'   : '#000',
          'markerLineWidth'   : 3,
          'markerWidth'       : 10,
          'markerHeight'      : 10
        }
    }).addTo(this.map).disable();
  },

  this.distanceTool.enable()

四、测面工具的隐藏和开启

  //测面积工具
  addAreatool(){
    this.areaTool=new maptalks.AreaTool({
          'once' : true,
          'symbol': {
            'lineColor' : '#FF6A6A',
            'lineWidth' : 2,
            'polygonFill':'#FF6A6A',
            'polygonOpacity':0.4
          },
          'vertexSymbol' : {
          'markerType'        : 'ellipse',
          'markerFill'        : '#1bbc9b',
          'markerLineColor'   : '#000',
          'markerLineWidth'   : 3,
          'markerWidth'       : 10,
          'markerHeight'      : 10
         }
       }).addTo(this.map).disable();
  }, 

   this.areaTool.enable();

五、标绘操作

 //标绘操作
  setDrawTool(type){
    if(!this.map.drawTool){
      this.map.drawTool = new maptalks.DrawTool({
        mode:'Point',
        once:true
      }).addTo(this.map).enable().on('drawend',function(params){
        console.log(params.geometry.getCenter().x+','+params.geometry.getCenter().y)
        const drawtoollayer = this.map.getLayer('drawtoollayer');
        params.geometry.setProperties({
          coord:params.geometry.getCenter().x+','+params.geometry.getCenter().y
        });
        params.geometry.addTo(drawtoollayer);
      }.bind(this));
      if(!this.map.getLayer('drawtoollayer')){
        const drawtoollayer = new maptalks.VectorLayer('drawtoollayer').addTo(this.map);
      }
    }
    switch(type){
        case 'Point':
         this.map.drawTool.setSymbol({
          'markerFile':require(`../../static/emerg/map/poi.png`),
           'textName': '{coord}',
          'textWeight': 'normal', //'bold', 'bolder'
          'textStyle': 'normal', //'italic', 'oblique'
          'textFaceName': '"microsoft yahei"',
          'textSize': 14,
          'textFill': '#fff',
          'textDy': 10,
         });
         this.map.drawTool.setMode(type);  
         this.map.drawTool.enable();
         break;
        case 'LineString':
         this.map.drawTool.setSymbol({
            'lineColor' : '#f20',
            'lineWidth' : 2
         });
          this.map.drawTool.setMode(type);  
           this.map.drawTool.enable();
         break;
         case 'Polygon':
         this.map.drawTool.setSymbol({
            'lineColor' : '#f20',
            'lineWidth' : 2,
            'polygonFill':'#0f8',
            'polygonOpacity':0.5
         });
        this.map.drawTool.setMode(type);
         this.map.drawTool.enable();  
         break;
         case 'clear':
         this.map.getLayer('drawtoollayer').clear();
         break;
         default:
         break;
      }
  },

六、制图

  //制图
  generateMap(){
    this.map.toDataURL({
      save:true,
      fileName:'制图.png'
    });
  },

七、添加wms服务

  //layer服务图层
  //url服务地址
  new maptalks.WMSTileLayer(layerName,{
          'urlTemplate': url+ '/wms',
          'layers': layers,
          'version' : '1.3.0',
          'renderer' : 'canvas',
          'format': 'image/png',
          'transparent': true
        });

八、在vue里面创建一个自定义组件引入marker

   createUIMarker(postion, data, type) {
      var Dom = document.createElement("div");
      Dom.className = "box-line-box";
      Dom.id = "box-line-box";
      var chartDom = document.createElement("div");
      chartDom.style.cssText = "width:356px; height:282px;";
      Dom.appendChild(chartDom);
      //渲染成Vue组件
      new Vue({
        render: h =>
          h(UIMarker, {
            props: {
              title: data.deviceAddress,
              type: type,
              deviceId: data.deviceId
            }
          })
      }).$mount(chartDom);
      var marker = new maptalks.ui.UIMarker([postion.x, postion.y], {
        draggable: false,
        single: false,
        dx: 20,
        dy: 150,
        content: Dom
      });
      marker.addTo(this.map).show();
    },

九、简单的数据图层缓冲区分析

    createCircle(e) {
      const radius = 1500;
      // 以该事件为重点，画一个圆半径1.5公里 添加周边资源展示效果
      let monitorLayer = this.map.getLayer("monitorLayer");
      if (!monitorLayer) {
        monitorLayer = new maptalks.VectorLayer("monitorLayer").addTo(this.map);
      }
      monitorLayer.show();
      const _circle = monitorLayer.getGeometryById("circle_extent");
      monitorLayer.removeGeometry(_circle);
      const circle = new maptalks.Circle([e.X, e.Y], radius, {
        id: "circle_extent",
        symbol: {
          polygonFill: "#0f89f5",
          polygonOpacity: 0.3,
          lineColor: "#0f89f5",
          lineWidth: 1,
          lineOpacity: 1
        }
      })
        .addTo(monitorLayer)
        .bringToBack();
      //圆形内的元素显示，外的隐藏
      var vectorLayers = this.map.getLayers(function(layer) {
        if (layer instanceof maptalks.VectorLayer) {
          layer.getGeometries(function(geo) {
            if (circle.containsPoint(geo.getCenter())) {
              geo.show();
            } else {
              geo.hide();
            }
          });
        }
      });
    },

十、锁定定位到某元素

      const camera = this.map.getLayer("layerId").getGeometryById(id);
      if (camera == null) return;
      this.map.panTo(camera.getCenter());
      camera.fire("click");

 

十一、symbol渐变样式

      //1.点的渐变样式
        symbol:{
            markerType : 'ellipse',
            markerWidth : 15,
            markerHeight : 15,
            markerFill : {
              'type' : 'radial',
              'colorStops' : [
                [0.00, 'rgba(243,181,10,1)'],
                [0.10, 'rgba(243,181,10,1)'],
                [1.00, 'rgba(255,255,255,1)']
              ]
            },
            markerPlacement : 'vertex'
          },
     //2.线的渐变样式
      symbol: {
              lineColor: {
              'type' : 'linear',
              'colorStops' : [
                [0.00, '#FFF2B6'],
                [1.00, '#EA9304']
              ]
            },
              lineWidth: 2
            }

 十二、ODLineLayer插件图层（实际应用echarts）

    var lines = [{
            "coordinates": [
                ["116.40", "39.93"],
                ["115.49", "38.89"]
            ]
        }, {
            "coordinates": [
                ["116.40", "39.93"],
                ["116.70", "39.52"]
            ]
        }]
        var lineLayer = new maptalks.ODLineLayer('c1', lines, {
            'animation': false,
            'curveness': 0,
            'globalCompositeOperation': 'lighter',
            'symbol': {
                'lineWidth': 2,
                'lineColor': 'rgba(2, 166, 253, 0.03)',
            }
        }).addTo(map);

        // animated OD Lines
        var layer = new maptalks.ODLineLayer('c', lines, {
            'animationDuration': 30000,
            'animation': true,
            'curveness': 0,
            'random': true,
            'trail': 10,
            'symbol': {
                'lineColor': '#fff'
            }
        }).addTo(map);
    

 十三、热力图（大量点数据）

import { HeatLayer } from "maptalks.heatmap";
addHeatLayer() {
      const testData={
      "coordinates": [
      [115.82197845458984, 29.748280487060548],
      [115.82163513183593, 29.747593841552735],
      [115.82026184082031, 29.747593841552735]
       ]
       }
      const data = [];
      const Layer = this.map.getLayer("LayerId");
      if (Layer) {
        Layer.show();
        return Layer;
      }
      testData.coordinates.forEach(function(point) {
        point.push(Math.random() * 10 + 5);
        data.push(point);
      });
      const Layer1 = new HeatLayer("sjrlt", data).addTo(this.map);
      return Layer1;
    },