maptalks.js基礎使用

因某些原因：需要學習一些maptalks相關知識在此整理

使用maptalks來對地圖進行2D\3D操作

引入css 與 maptalks.js

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.min.js"></script>

創建map地圖實例

var map = new maptalks.Map('map', {
        //地圖中心點
        center: [-0.113049,51.498568],
        //縮放大小
        zoom: 14,
        baseLayer: new maptalks.TileLayer('base', {
            urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
            subdomains: ['a','b','c','d'],
            //底圖
            attribution: '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>'
        })
    });

創建標記 使標記跟箭頭行走

//用於管理和呈現幾何圖形的層。在貼圖移動時強制渲染圖層，將自身添加到地圖中
    var layer = new maptalks.VectorLayer('vec', { forceRenderOnMoving : true }).addTo(map);
    // 表示點類型幾何形狀。map.getCenter找到地圖的中心。並將線添加進去
    var marker = new maptalks.Marker(map.getCenter()).addTo(layer);

maptalks官方示例