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]
    };
  • 相关阅读:
    ActionResult 的返回类型
    MVC4.0中ViewBag、ViewData、TempData和ViewModel几种传值方式的区别
    抛出异常的区别 throw 和throw ex
    字段的重复校验问题
    bootstrap 动态添加验证项和取消验证项
    VS快捷键大全(转)
    数组、List和ArrayList的区别
    处理两个泛型集合差异化
    传参的两种方式
    tomcat中web项目编译后的结构
  • 原文地址:https://www.cnblogs.com/amadoGrowers/p/12979539.html
Copyright © 2011-2022 走看看