zoukankan      html  css  js  c++  java
  • 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]
    };
  • 相关阅读:
    Android学习笔记之-----讯飞语音识别实例化RecognizerDialog参数出现错误的解决方法
    java基本数据类型取值范围
    中国教育
    git push --help
    cherry Tree的严重漏洞
    程序的核心是什么
    BeanUtils.getProperty性能分析
    Java各种反射性能对比
    Spring AOP无法拦截Controller中的方法
    Mock单元测试
  • 原文地址:https://www.cnblogs.com/amadoGrowers/p/12979539.html
Copyright © 2011-2022 走看看