MapTalks.js 使用小结(二)

 MapTalks.js 地图框架

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

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

一、鼠标指针事件

        this.map.setCursor('url(../../static/draw.png) 4 12, auto');
        this.map.resetCursor();

 二、地方坐标系地图加载的方法(使用和了解 proj4)

参考地址:https://www.bbsmax.com/A/pRdB1k25nx/

      //2385坐标系参数制定,包括地球椭球体,中央经线,偏移量等
      var proj2385 = '+proj=tmerc +lat_0=0 +lon_0=120 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs';
      const proj = proj4('WGS84', proj2385);
      // 坐标转换方法
      const projection = {
        code : '2385',  // code of the projection
        project : function (c) { // from wgs84 to EPSG3857
          var pc = proj.forward(c.toArray());
          return new maptalks.Coordinate(pc);
        },
        unproject : function (pc) { // from EPSG3857 to wgs84
          var c = proj.inverse(pc.toArray());
          return new maptalks.Coordinate(c);
        }
      };

      this.map = new maptalks.Map('map', {
        center: config.MapConfig.center,
        zoom:  config.MapConfig.zoom,
        minZoom:  config.MapConfig.minZoom,
        maxZoom:  config.MapConfig.maxZoom,
        maxExtent:new maptalks.Extent(119,31.5,119.5,32.5),
        attribution:false,
        //spatial reference definition
        spatialReference : {
          projection : projection,        
          // geo projection, defined by proj4js
          resolutions : config.MapConfig.resolutions,
          fullExtent : config.MapConfig.fullExtent
        },
        baseLayer : new maptalks.TileLayer('map',{
          renderer:'canvas',
          urlTemplate: config.MapServices.BaseLayerUrl.NJMAP_DT,
          tileSystem: config.MapConfig.tileSystem,
          repeatWorld:false
        }),
        layers:[
          new maptalks.TileLayer('map_zj',{
          renderer:'canvas',
          urlTemplate: config.MapServices.BaseLayerUrl.NJMAP_ZJ,
          tileSystem: config.MapConfig.tileSystem,
          repeatWorld:false
        })
        ]
      });
const MapConfig = {
    center: [119.3, 32.08],
    zoom: 13,
    minZoom: 10,
    maxZoom: 16,
    resolutions: [200000, 100000, 50000, 25000, 12500, 6250, 3125, 1562.5, 781.25, 390.625, 195.3125,
        97.65625, 48.828125, 24.4140625, 12.20703125, 6.103515625, 3.0517578125, 1.52587890625, 0.762939453125, 0.3814697265625
    ],
    fullExtent: { // map's full extent
        'top': 250000,
        'left': 80000,
        'bottom': 50000,
        'right': 190000
    },
    tileSystem: [1, -1, 80000.0, 250000.0]
};

 

posted @ 2020-05-28 11:36  阿玛度の博客  阅读(1358)  评论(0编辑  收藏  举报