GIS工具maptalks——初始化

🕗 发布于 2024-02-18 17:17 maptalks

GIS工具maptalks开发手册(一)——hello world初始化
为何使用maptalks？

Maptalks项目是一个HTML5的地图引擎, 基于原生ES6、Javascript开发的二三维一体化地图。通过二维地图的旋转、倾斜增加三维视角，通过插件化设计, 能与其他图形库echarts、d3.js、Three.js等结合, 可以开发各种二三维效果。由于优化了绘制性能, 有接近1.5K个单元测试用例, 所以稳定性还不错, 可以应用在很多大大小小的系统上。

每个地图框架产商都与自家的地图资源进行绑定，如非常受欢迎的mapBox、高德、百度、腾讯等，你必须注册他们产品，获取key，然后调用的api，才能进行地图的相关操作，虽然带来了便利，但同时这也存在这限制。

为什么还用其他的呢？做产品，最好的做法就是由开发自己掌控，能做什么，能做到什么程度，一切都由开发把握，这才是一个完好的自主产品。maptalks是国内开源的一个地图框架，可以自定义我们的地图资源，不用第三方支持，而且也集成了很多插件，比如three.js、echarts、热力图，可以支持我们的开发需求。

1、基本介绍
1、官网——https://maptalks.org/

2、npm地址——https://www.npmjs.com/package/maptalks

3、基础示例——https://maptalks.org/getting-started.html

4、api参数（英文）——https://maptalks.org/maptalks.js/api/1.x/Map.html

5、英文单页面模型集合——https://maptalks.org/examples/en/map/load/

6、中文单页面模型集合——https://maptalks.org/examples/cn/map/load/

map相关参数和方法——https://maptalks.org/maptalks.js/api/0.x/Map.html

比如：获取中心点-getCenter()、设置中心点-setCenter(coordinate)

获取地图层级-getZoom()、设置地图层级-setZoom(zoomNumber)

获取图层-getLayer(id)、添加图层-addLayer(layer)、移除图层-removeLayer(layer)

图层大小-铺满可视区getExtent()

layer相关参数和方法——https://maptalks.org/maptalks.js/api/0.x/Layer.html

如：添加图层-addTo(map)、显示图层-show()、隐藏图层-hide()、移除图层-remove()

geometry相关参数和方法——https://maptalks.org/maptalks.js/api/0.x/Geometry.html

比如：获取图层-getLayer()、获取图层ID-getId()

获取图层样式-getSymbol()、设置图层样式-setSymbol(symbol)

显示图层-show()、隐藏图层-hide()、复制图层-copy()、移除图层-remove()

转换数据格式——toGeoJSONGeometry()、toGeoJSON()

安装

npm install maptalks

电子地图图层——底图主题urlTemplate

// 电子地图图层
// 1、初始常规主题
urlTemplate: "http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png", 
// 2、彩色主题，坐标系同黑暗主题
urlTemplate:"https://map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}",
// 3、黑暗主题
urlTemplate: 'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}',

2、基础示例

创建图层

创建图层的方式有两种：

在创建地图实例的同时创建图层： 2个参数，必填参数为第一个（id），第二个参数是options，是它的图层属性设置，一般默认就行，后面也可以通过图层对象进行设置。

效果

出现跨域的问题，需要设置crossOrigin: undefined

示例1-html版

helloWorld.html

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>地图 - 显示</title>
<style type="text/css">
    html,
    body {
        margin: 0px;
        height: 100%;
        width: 100%;
    }

    .container {
        width: 900px;
        height: 500px;
        margin: 50px;
    }
</style>
<link rel="stylesheet" href="https://unpkg.com/maptalks/dist/maptalks.css">
<script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>

<body>

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

    <script>
        var map = new maptalks.Map('map', {
            center: [-0.113049, 51.498568],// 地图的初始中心
            zoom: 14, // /地图的初试缩放层级
            pitch:30,// 倾斜度
            minZoom: 8,// 最小缩放层级   
maxZoom: 22,// 最大缩放层级
            zoomControl: true, // 层级控件
            scaleControl: true, // 缩放控件
            // overviewControl: true, // 描述控件
            dragPitch: true, //是否可以倾斜（Ctrl+鼠标操作实现）
            dragRotate: true, //是否可以旋转
            dragRotatePitch: false, //是否旋转倾斜可以同时操作
            // baseLayer 表示基础图层，它可以添加多个,逗号隔开
            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>'
            }),
          layers: [
          // 创建矢量图层 v
          // new maptalks.VectorLayer('v', 几何图形列表（geometries）, 可选参数配置（options）)
          new maptalks.VectorLayer('v')
        ]
        });

    </script>
</body>

</html>

创建图层实例，然后添加到map实例中注意：这里用了一个方法addTo(map)这个方法对所有组件通用，意思就是，下面我们介绍的工具、组件等添加到地图上，都是用这个方法。

new maptalks.VectorLayer('v').addTo(map)

示例2-vue注释版

index.vue

<template>
  <div id="map" class="container"></div>
</template>
<script>
import "maptalks/dist/maptalks.css";
import * as maptalks from "maptalks";
export default {
  mounted() {
    this.$nextTick(() => {
      const map = new maptalks.Map("map", {
        // 默认中心点点位
        center: [116.3972282409668, 39.90960456049752],
        // 缩放层级
        zoom: 14,
        // 倾斜度
        pitch: 50,
        // 轴承
        // bearing: 90,
        // 最小缩放层级
        minZoom: 1,
        // 最大缩放层级
        maxZoom: 22,
        // baseLayer 表示基础图层，它可以添加多个,逗号隔开
        baseLayer: new maptalks.TileLayer("base", {
          //   // 出现跨域问题，要设置这个，一定是undefined
          //   crossOrigin: undefined,
          // 电子地图图层
          urlTemplate:
            "http://{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>',
        }),
      });
      console.log("map: ", map);
    });
  },
};
</script>
<style lang="scss">
html,
body {
  margin: 0px;
  height: 100%;
  width: 100%;
}
.container {
  width: 1200px;
  height: 700px;
  margin: 50px;
}
</style>

示例3-vue简约版