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: '© <a href="http://osm.org">OpenStreetMap</a> contributors, © <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:
'© <a href="http://osm.org">OpenStreetMap</a> contributors, © <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简约版
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: [-0.113049, 51.498568],
zoom: 14,
baseLayer: new maptalks.TileLayer('base', {
urlTemplate: 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
subdomains: ['a', 'b', 'c', 'd'],
attribution: '© <a href="http://osm.org">OpenStreetMap</a> contributors, © <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>
