maptalks初学

npm安装

npm install maptalks --save

使用

import * as maptalks from 'maptalks'

地图加载

this.map = new maptalks.Map(container, {center: [lon,lat],zoom:12,// centerCross : true,spatialReference:{projection:'EPSG:4326'},attribution: false})

加载天地图

addTDLayer(element){const baseLayer = new maptalks.TileLayer(element.id, {tileSystem : [1, -1, -180, 90],urlTemplate: "http://t{s}.tianditu.gov.cn/DataServer?T=vec_c&x={x}&y={y}&l={z}&tk=xxx",subdomains: [0, 1, 2, 3, 4, 5]})return baseLayer}

测距测面

// 地图--测量距离measureLine(){const distanceTool = new maptalks.DistanceTool({'symbol': {'lineColor' : 'rgba(0, 124, 247, 0.8)','lineWidth' : 3},'vertexSymbol' : {'markerType'        : 'ellipse','markerFill'        : '#fff','markerLineColor'   : 'rgba(0, 124, 247, 1)','markerLineWidth'   : 3,'markerWidth'       : 10,'markerHeight'      : 10},'labelOptions' : {'textSymbol': {'textFaceName': 'monospace','textFill' : '#fff','textLineSpacing': 1,'textHorizontalAlignment': 'right','textDx': 15,'markerLineColor': '#b4b3b3','markerFill' : '#000'},'boxStyle' : {'padding' : [6, 2],'symbol' : {'markerType' : 'square','markerFill' : '#000','markerFillOpacity' : 0.9,'markerLineColor' : '#b4b3b3'}}},'clearButtonSymbol' :[{'markerType': 'square','markerFill': '#000','markerLineColor': '#b4b3b3','markerLineWidth': 2,'markerWidth': 15,'markerHeight': 15,'markerDx': 20}, {'markerType': 'x','markerWidth': 10,'markerHeight': 10,'markerLineColor' : '#fff','markerDx': 20}],'language' : 'zh-CN',// 'language' : 'en-US','once': true}).addTo(this.map)return distanceTool}// 地图--测量面积measureArea(){const areaTool = new maptalks.AreaTool({'symbol': {'lineColor' : 'rgba(0, 124, 247, 1)','lineWidth' : 3,'polygonFill' : 'rgba(127, 127, 127, 1)','polygonOpacity' : 0.5},'vertexSymbol' : {'markerType'        : 'ellipse','markerFill'        : '#fff','markerLineColor'   : 'rgba(0, 124, 247, 1)','markerLineWidth'   : 3,'markerWidth'       : 10,'markerHeight'      : 10},'labelOptions' : {'textSymbol': {'textFaceName': 'monospace','textFill' : '#fff','textLineSpacing': 1,'textHorizontalAlignment': 'right','textDx': 15},'boxStyle' : {'padding' : [6, 2],'symbol' : {'markerType' : 'square','markerFill' : '#000','markerFillOpacity' : 0.9,'markerLineColor' : '#b4b3b3'}}},'clearButtonSymbol' :[{'markerType': 'square','markerFill': '#000','markerLineColor': '#b4b3b3','markerLineWidth': 2,'markerWidth': 15,'markerHeight': 15,'markerDx': 22}, {'markerType': 'x','markerWidth': 10,'markerHeight': 10,'markerLineColor' : '#fff','markerDx': 22}],language: 'zh-CN'}).addTo(this.map)return areaTool}

测距测面工具清除

clear(){if(this.distanceTool){this.distanceTool.clear()}if(this.areaTool){this.areaTool.clear()}
}

打印（地图屏幕截图）npm i html2canvas

import html2canvas from "html2canvas"print(){// 打印const id = '#mapContainer'// 屏幕截图html2canvas(document.querySelector(id), {useCORS: true, // 【重要】开启跨域配置scale: window.devicePixelRatio < 3 ? window.devicePixelRatio : 2,allowTaint: true, // 允许跨域图片}).then((canvas) => {const dataUri = canvas.toDataURL('image/jpeg', 1.0)var a = document.createElement('a') // 生成一个a元素var event = new MouseEvent('click') // 创建一个单击事件a.download = 'photo' + '.jpg' // 设置图片名称a.href = dataUri // 将生成的URL设置为a.href属性a.dispatchEvent(event) // 触发a的单击事})
},

聚合分析

import {ClusterLayer} from 'maptalks.markercluster'
// 聚合分析addClusterLayer(){var markers = []this.dataJson.features.forEach(item=>{const marker = new maptalks.Marker([item.geometry.x,item.geometry.y])markers.push(marker)})var clusterLayer = new ClusterLayer('cluster', markers, {noClusterWithOneMarker : false,maxClusterZoom : 11,//"count" is an internal variable: marker count in the cluster.symbol: {markerType: 'ellipse',markerFill: { property:'count', type:'interval', stops: [[0, 'rgb(135, 196, 240)'], [6, '#1bbc9b'], [12, 'rgb(216, 115, 149)']] },markerFillOpacity : 0.7,markerLineOpacity : 1,markerLineWidth : 3,markerLineColor : '#fff',markerWidth: { property:'count', type:'interval', stops: [[0, 40], [9, 60], [99, 80]] },markerHeight: { property:'count', type:'interval', stops: [[0, 40], [9, 60], [99, 80]] }},drawClusterText: true,geometryEvents: true,single: true})this.map.addLayer(clusterLayer)return clusterLayer}

maptalks初学相关推荐

Android初学第36天
Android初学第36天 12_DateDialog 代码 CrimeLab.java package com.bignerdranch.android.criminalintent;import ...
Unity初学Shadergraph创建着色器学习教程
MP4 |视频:h264,1280×720 |音频:AAC,44.1 KHz,2 Ch 语言:英语+中英文字幕(根据原英文字幕机译更准确) |时长:51节课(4h 44m) |大小解压后:2.55 G ...
初学web标准的几个误区
初学web标准的几个误区作者:阿捷 2004-7-7 11:37:11 非常高兴地看到很多设计师开始关注和尝试使用web标准制作网页.但从网友们的问题和制作中发现几个问题,在这里特别提醒一下: 1. ...
java基础入门传智播客源码_Java-_2020年版Java零基础视频教程（Java 0基础，Java初学入门）魔鬼讲师老杜出品...
不会闲聊!!!不会扯淡!!!小UP只会分享与Java相关的学习资源还记得那年带你Java入门的一声"吼"吗? B站目前播放量已经快到450多万播放量的Java零基础教程的创作者& ...
初学api测试_面向初学者的API-在此免费视频课程中学习如何使用API
初学api测试 What exactly is an API? How do you use an API? We've just published a full beginner's course ...
java web开发初学_2018年学习Web开发的绝对初学者指南
java web开发初学 This post was originally published on Coder-Coder.com. 该帖子最初发布在Coder-Coder.com上 . If yo ...
初学python的30个操作难点汇总（入门篇）希望对你有帮助
初学Python的人总会遇到这样或者那样的问题,在我学习Python的这段时间我总结了自己的29个问题,具体如下: 1 在cmd下盘与盘之间的切换直接 D或d: 就好 2 查找当前盘或者文件下面的 ...
初学架构设计的第一步：需求、愿景与架构
初学架构设计的第一步:需求.愿景与架构了解<需求>.<愿景>与<架构>三者的关系.也就是<需求分析>.<观想愿景>与<架构设计> ...
初学 Java Web 开发，请远离各种框架，从 Servlet 开发
写在前面: 本文是转自:http://www.oschina.net/question/12_52027 的文章,如果要求删除,第一时间联系我立即删除! Web框架是开发者在使用某种语言编写Web应 ...

maptalks初学

maptalks初学相关推荐

最新文章

热门文章