maptalks简单使用

最新推荐文章于 2024-02-18 09:20:58 发布

意桉

最新推荐文章于 2024-02-18 09:20:58 发布

阅读量585

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_44244924/article/details/129834207

版权

网址： maptalks

1. maptalks安装 `npm i maptalks --save`

在这里插入图片描述

2. 检查是否安装成功打开package.json

在这里插入图片描述

3. 引入样式和组件

import * as maptalks from 'maptalks'
import 'maptalks/dist/maptalks.css';

4. 使用

创建一个div 容器

<div id="map" class="container"></div>

method中设置方法:

createMap() {
    var map = new maptalks.Map('map', {
        center: [-0.113049, 51.498568],
        zoom: 6,
        spatialReference: {
          projection: 'EPSG:4326'
        },
        baseLayer: new maptalks.WMSTileLayer('wms', {
          'tileSystem': [1, -1, -180, 90],
          'urlTemplate': 'https://ows.terrestris.de/osm/service',
          'crs': 'EPSG:4326',
          'layers': 'OSM-WMS',
          'styles': '',
          'version': '1.3.0',
          'format': 'image/png',
          'transparent': true,
          'uppercase': true
        }),
        attribution: {
          content: '&copy ows.terrestris.de'
        }
      });
   }