maptalks

作者: 佛系疯子 | 来源:发表于2020-04-28 10:56 被阅读0次

一、加载不同地图的方式

1.谷歌地图:

var googleYxlayer =new maptalks.TileLayer("谷歌影像图", {

urlTemplate:"http://mt1.google.cn/vt/lyrs=s@192&hl=zh-CN&x={x}&y={y}&z={z}",

    crossOrigin:"Anonymous",

    subdomains: [0, 1, 2, 3],

    visible:false

});

var googleDxlayer =new maptalks.TileLayer("谷歌地形图", {

urlTemplate:"https://www.google.cn/maps/vt?lyrs=p&gl=cn&x={x}&y={y}&z={z}",

    crossOrigin:"Anonymous",

    subdomains: [0, 1, 2, 3],

    visible:false

});

// scale=2 是高分辨率

var googleMap = new maptalks.TileLayer("googleMap",{

'urlTemplate' : 'http://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}&scale=2',

crossOrigin: "Anonymous",

subdomains: [0, 1, 2, 3],

visible: false

});

map = new maptalks.Map('map', {

center: [lon, lat],

zoom: 12,

minZoom: initzoom*1,

maxZoom: maxzoom*1,

attribution: {

content: ""

},

baseLayer: new maptalks.GroupTileLayer(

"maps", [googleYxlayer, googleMap], {}

)

});

$('.maptalks-attribution').css('display', 'none');

2.智图

var arcUrl ='http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer';

maptalks.SpatialReference.loadArcgis(arcUrl +'?f=pjson', function (err, conf) {

if (err) {

throw new Error(err);

    }

var ref = conf.spatialReference;

    ref.projection ='EPSG:3857';

    var map =new maptalks.Map('map', {

center: [104.57342169515482,  39.611912376506524],

        zoom:5,

        minZoom:4,

        maxZoom:18,

        spatialReference: ref,

        baseLayer:new maptalks.TileLayer('base', {

'tileSystem': conf.tileSystem,

            'tileSize': conf.tileSize, // [512, 512]

            'urlTemplate': arcUrl +'/tile/{z}/{y}/{x}',

            'attribution':'&copy; <a target="_blank" href="' + arcUrl +'"">ArcGIS'

        })

});

})

3.天地图

var tianditu_base = new maptalks.TileLayer('tianditu_base', {

urlTemplate: "https://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=", 

crossOrigin: "Anonymous",

subdomains: [0, 1, 2, 3],

visible: false

});

var tianditu_font = new maptalks.TileLayer('tianditu_font', {

urlTemplate: 'https://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=',

crossOrigin: "Anonymous",

subdomains: [0, 1, 2, 3],

visible: true

});

var tianYxlayer=new maptalks.WMSTileLayer("tianYxlayer", {

urlTemplate:"https://t1.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=",

    crossOrigin:"Anonymous",

    subdomains: [0, 1, 2, 3],

    visible:false

});

4.百度

var map = new maptalks.Map('mapDiv', {

            center: [120, 30],

            zoom: 7,

            pitch: 0,

            bearing: 0,

            maxPitch: 30,

            maxVisualPitch: 45,

            spatialReference: {

                projection: 'baidu'

            },

            baseLayer: new maptalks.TileLayer('base', {

                // 百度自定义地图(深蓝)

                // urlTemplate: 'http://api{s}.map.bdimg.com/customimage/tile?&x={x}&y={y}&z={z}&scale=1&udt=20181205&styles=yipxfCwhMDozKT3GDCM7UGARmSKbAMXh&styles=t%3Amanmade%7Ce%3Al.i%7Cv%3Aoff%2Ct%3Aroad%7Ce%3Al.i%7Cv%3Aoff%2Ct%3Apoi%7Ce%3Al.i%7Cv%3Aoff%2Ct%3Aadministrative%7Ce%3Al.i%7Cv%3Aoff%2Ct%3Aland%7Ce%3Ag.f%7Cc%3A%23063d6fff%2Ct%3Awater%7Ce%3Ag.f%7Cc%3A%230c2335ff%2Ct%3Agreen%7Ce%3Ag.f%7Cc%3A%23182322ff%2Ct%3Amanmade%7Ce%3Ag.f%7Cc%3A%23145387ff%2Ct%3Acontinent%7Ce%3Al.t.f%7Cc%3A%230f3451ff%2Ct%3Acontinent%7Ce%3Al.t.s%7Cc%3A%23072b47ff%2Ct%3Acountry%7Ce%3Al.t.s%7Cc%3A%230f3451ff%2Ct%3Acountry%7Ce%3Al.t.f%7Cc%3A%231c7dc8ff%2Ct%3Acity%7Ce%3Al.t.f%7Cc%3A%231c7dc8ff%2Ct%3Acity%7Ce%3Al.t.s%7Cc%3A%230f3451ff%2Ct%3Adistrict%7Ce%3Al.t.f%7Cc%3A%231c7dc8ff%2Ct%3Adistrict%7Ce%3Al.t.s%7Cc%3A%230f3451ff%2Ct%3Atown%7Ce%3Al.t.s%7Cc%3A%230f3451ff%2Ct%3Atown%7Ce%3Al.t.f%7Cc%3A%231c7dc8ff%2Ct%3Aboundary%7Ce%3Ag.f%7Cc%3A%230f3451ff%2Ct%3Aboundary%7Ce%3Ag.s%7Cc%3A%230c2d47ff%2Ct%3Ahighway%7Ce%3Ag.f%7Cc%3A%230f4d7eff%2Ct%3Ahighway%7Ce%3Ag.s%7Cc%3A%23043153ff%2Ct%3Arailway%7Ce%3Aall%7Cv%3Aoff%2Ct%3Aarterial%7Ce%3Ag.f%7Cc%3A%231a649dff%2Ct%3Aarterial%7Ce%3Ag.s%7Cc%3A%23043153ff%2Ct%3Aroad%7Ce%3Al.t.f%7Cc%3A%231a649dff%2Ct%3Aroad%7Ce%3Al.t.s%7Cc%3A%23043153ff%2Ct%3Apoi%7Ce%3Al.t.f%7Cc%3A%232475b3ff%2Ct%3Apoi%7Ce%3Al.t.s%7Cc%3A%23043153ff%2Ct%3Asubway%7Ce%3Aall%7Cv%3Aoff%2Ct%3Aall%7Ce%3Al.t.f%7Cc%3A%234d9de4ff%2Ct%3Aall%7Ce%3Al.t.s%7Cc%3A%23022743ff%2Ct%3Alocal%7Ce%3Ag.f%7Cc%3A%232475b3ff%2Ct%3Alocal%7Ce%3Ag.s%7Cc%3A%23084d81ff%2Ct%3Abuilding%7Ce%3Ag.f%7Cc%3A%230b3c61ff',

                // 百度预定义地图

                //urlTemplate: 'http://api{s}.map.bdimg.com/customimage/tile?&x={x}&y={y}&z={z}&scale=1&udt=20181205&customid=midnight',

                // 百度常规地图

                urlTemplate: 'http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&p=1',

                // 百度影像图

                // urlTemplate: 'http://shangetu{s}.map.bdimg.com/it/u=x={x};y={y};z={z};v=009;type=sate&fm=46',

                subdomains: ['0', '1', '2']

            }),

            layers: [

                new maptalks.VectorLayer('v')

            ]

        });

相关文章

  • MapTalks

    1.相关依赖http://121.40.37.230/maptalks-demo/maptalks.jshttp:...

  • maptalk.three实例化尝试

        最近公司项目开始做三维的项目,出于易用性考虑选用了maptalks和maptalks.three。    ...

  • maptalks

    一、加载不同地图的方式 1.谷歌地图: var googleYxlayer =new maptalks.TileL...

  • 计算机毕业设计Python新冠疫情数据分析可视化平台

    开发技术 前端开发:VUE、ElementUI、ECharts、Maptalks、D3js 后端web开发:Fla...

  • arcgis js 4 加载 carto 第三方地图

    arcgis 加载carto 也很简单 目前官方maptalks 地图就是carto地图加载 我觉得挺好看的 于是...

  • MapTalks地图滤镜使用

    背景     最近看到ArcGIS Maps SDK for JavaScript[https://develop...

  • maptalks实时地图简单实践

    背景     有时候我们想看到非常新的数据,数据更新间隔很短,就考虑websocket来进行请求数据,减少轮训减轻...

  • MAPTALKS加载I3S

    I3S是什么? i3s标准是一种用树结构来组织大体积量三维数据的数据格式标准,比如在位图界的jpg格式一样,只不过...

  • maptalks使用canvas自定义图标

    背景 起因是ui设计了一版页面,其中标注类似下图,看到这个设计图,一时半会在api没有设置,咨询maptalks技...

  • Maptalks 注册自定义绘图模块

    最近在做绘图功能有个点选的功能,就是使用绘图工具点击绘制定长的圆,一开始觉得这个应该很简单(还是太无知) 照惯例还...

网友评论

      本文标题:maptalks

      本文链接:https://www.haomeiwen.com/subject/aipmwhtx.html