阳山县网站住房和建设局,建设通网站首页,扬州建设集团招聘信息网站,网站后台有哪些模块GIS工具maptalks开发手册(一)——hello world初始化 为何使用maptalks#xff1f;
Maptalks项目是一个HTML5的地图引擎, 基于原生ES6、Javascript开发的二三维一体化地图。 通过二维地图的旋转、倾斜增加三维视角#xff0c;通过插件化设计, 能与其他图形库echarts、d3.j…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 charsetUTF-8
meta nameviewport contentwidthdevice-width, initial-scale1
title地图 - 显示/title
style typetext/csshtml,body {margin: 0px;height: 100%;width: 100%;}.container {width: 900px;height: 500px;margin: 50px;}
/style
link relstylesheet hrefhttps://unpkg.com/maptalks/dist/maptalks.css
script typetext/javascript srchttps://unpkg.com/maptalks/dist/maptalks.min.js/scriptbodydiv idmap classcontainer/divscriptvar 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 hrefhttp://osm.orgOpenStreetMap/a contributors, copy; a hrefhttps://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
templatediv idmap classcontainer/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 hrefhttp://osm.orgOpenStreetMap/a contributors, copy; a hrefhttps://carto.com/CARTO/a,}),});console.log(map: , map);});},
};
/script
style langscss
html,
body {margin: 0px;height: 100%;width: 100%;
}
.container {width: 1200px;height: 700px;margin: 50px;
}
/style示例3-vue简约版
index.vue
templatediv idmap classcontainer/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 hrefhttp://osm.orgOpenStreetMap/a contributors, copy; a hrefhttps://carto.com/CARTO/a,}),});console.log(map: , map);});},
};
/script
style langscss
html,body{ margin:0px;height:100%;width:100%; }
.container{ width:1200px;height:700px;margin: 50px; }
/style
