GIS工具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简约版

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: '&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>