• GIS工具maptalks开发手册(一)——hello world初始化

    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

    • 1

    电子地图图层——底图主题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}',

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    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: '© OpenStreetMap contributors, © CARTO'
            }),
          layers: [
          // 创建矢量图层 v
          // new maptalks.VectorLayer('v', 几何图形列表（geometries）, 可选参数配置（options）)
          new maptalks.VectorLayer('v')
        ]
        });

    script>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58

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

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

    • 1
    示例2-vue注释版

    index.vue

    



    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    示例3-vue简约版

    index.vue

    



    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
  • 相关阅读:
    DM数据库安装，docker镜像
    阿戴的生活
    阿里 P8 爆出的这份大厂面试指南，看完工资暴涨 30k！
    Python数据分析与机器学习42-Python库分析科比生涯数据
    【C++设计模式之装饰模式:结构型】分析及示例
    分享：第十届“泰迪杯”数据挖掘挑战赛优秀作品--A1-基于深度学习的农田害虫定位与识别研究（一）
    eyb：创建邮件发送消息到员工账套功能实现（五）
    IPKISS i3.PCell 模块
    qt使用mysql数据库
    WPF 上位机 Modbus 入门必备的信息 C# 开发对接
  • 原文地址：https://blog.csdn.net/weixin_44867717/article/details/128139977