GIS工具maptalks开发手册(五)02-用JSON载入地图——json格式绘制多个面之全量工具版，包括-shape绘制、disable关闭、clear清空和图层之添加、移除、显示、隐藏
GIS工具maptalks开发手册(五)02-用JSON载入地图——json格式绘制多个面之全量工具版，包括-shape绘制、disable关闭、clear清空和图层之添加、移除、显示、隐藏
效果-json渲染图层-全量工具
代码
页面文件
index.html
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JSON序列化 - 用JSON载入地图</title>
<style type="text/css">
html,
body {
margin: 0px;
height: 100%;
width: 100%;
}
.container {
width: 1400px;
height: 500px;
margin: 50px;
}
#json {
position: fixed;
background-color: rgba(13, 13, 13, 0.5);
padding: 10px 10px 10px 10px;
font: 13px bold sans-serif;
color: #fff;
left: 0px;
top: 0px;
width: 100%;
height: 85px;
overflow: hidden
}
</style>
<link rel="stylesheet" href="https://unpkg.com/maptalks/dist/maptalks.css">
<script type="text/javascript" src="./jsonMapData.js"></script>
<script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>
<body>
<div id="map" class="container"></div>
<!-- <div id="json"></div> -->
<script>
var mapJSON = {
"version": "1.0",
"options": {
"center": {
// "x": 114.40184088740602,
// "y": 37.002608169667695
"x": 114.406728,
"y": 37.005423
},
"dragRotate": true, // 是否开启鼠标拖动旋转（右键或者ctrl+左键）
"scaleControl": true, // 比例尺控件
"zoom": 16
},
"baseLayer": {
"type": "TileLayer",
"id": "base",
"options": {
"urlTemplate": "http://{s}.tile.osm.org/{z}/{x}/{y}.png",
"subdomains": ["a", "b", "c"]
}
},
"layers": jsonMapData,
};
var map = maptalks.Map.fromJSON('map', mapJSON);
var layer = map.getLayer('v');
var drawTool = new maptalks.DrawTool({
mode: 'Point'
}).addTo(map).disable();
drawTool.on('drawend', function (param) {
// console.log(param.geometry);
console.log('面的坐标', param.geometry._coordinates);
layer.addGeometry(param.geometry);
});
var items = ['Point', 'LineString', 'Polygon'].map(function (value) {
return {
item: value,
click: function () {
drawTool.setMode(value).enable();
}
};
});
var toolbar = new maptalks.control.Toolbar({
items: [
{
item: 'Shape/绘制',
children: items
},
{
item: 'Disable关闭',
click: function () {
drawTool.disable();
}
},
{
item: 'Clear清空',
click: function () {
layer.clear();
}
},
{
item: '添加图层',
click: function () {
this.map.addLayer(this.layer);
}
},
{
item: '移除图层',
click: function () {
this.map.removeLayer(this.layer);
}
},
{
item: '显示图层',
click: function () {
layer.show();
}
},
{
item: '隐藏图层',
click: function () {
layer.hide();
}
},
{
item: '↑',
click: up
},
{
item: '↓',
click: down
},
{
item: '←',
click: left
},
{
item: '→',
click: right
},
{
item: '旋转',
click: (e) => {
console.log('参数', e);
// map2.setBearing(e.target.getBearing());
// map.setBearing(map.bearing -= 50)
map.setBearing(map.getBearing() -= 50)
}
}
]
}).addTo(map);
var addZoomTool = new maptalks.control.Zoom({
// 工具位置
position: 'top-left',
// 是否是以线段条方式展示
slider: false,
// 是否显示缩放级别文本框
zoomLevel: true
}).addTo(map);
showMap();
function showMap() {
console.log('地图信息', map._zoomLevel);
if (map._zoomLevel !== 16) { // 仅在14级显示图层
map.removeLayer(layer);
}
}
map.on('zoomend', function (zoomVal) {
console.log('zoom值', zoomVal);
if (zoomVal.to === 16) { // 仅在14级显示图层
map.addLayer(layer); // 添加图层
// this.map.addLayer(this.vectorLayer);//添加图层
} else {
map.removeLayer(layer); // 删除图层
// // this.map.removeLayer(this.vectorLayer); //删除图层
}
});
map.on('rotate', (e) => {
console.log('旋转', e);
// map.setBearing(map.getBearing() -= 50)
// map.setBearing(e.target.getBearing());
// map.addLayer(layer); // 添加图层
});
// function add() {
// map.addLayer(layer);
// }
// function remove() {
// map.removeLayer(layer);
// }
// this.map.addLayer(this.layer);
// this.map.removeLayer(this.layer);
function up() {
map.panBy([0, -200]);//设置偏移量[x,y]
}
function down() {
map.panBy([0, 200]);
}
function left() {
map.panBy([-200, 0]);
}
function right() {
map.panBy([200, 0]);
}
// document.getElementById('json').innerHTML = JSON.stringify(mapJSON);
</script>
</body>
</html>
引入文件
jsonMapData.js
const jsonMapData = [{
"type": "VectorLayer",
"id": "v",
"geometries": [{
"feature": {
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [[114.40154986772791,37.002687616434656],[114.40156562570587,37.00268788429551],[114.40156529042974,37.00268440210405],[114.40154919717565,37.0026841342432]]
}
},
symbol: [{
lineColor: '#34495e',
lineWidth: 2,
polygonFill: '#fef102',
polygonOpacity: 0.6
},
{
'markerDy': 20,
'textFaceName': 'sans-serif',
'textName': '李世民',
'textFill': '#000',
'textHorizontalAlignment': 'center',
'textSize': 16,
'textDx': 0,
'textDy': 16,
}]
}, {
"feature": {
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [[114.40178858433023,37.00265895531547],[114.40180333647982,37.00265895531547],[114.40180333647982,37.002656544566634],[114.40180735979334,37.002656276705665],[114.40180769506946,37.002647705153635],[114.4017882490541,37.00264743729261],[114.4017882490541,37.002647705153635]]
}
},
symbol: [{
lineColor: '#34495e',
lineWidth: 2,
polygonFill: '#01a2e6',
polygonOpacity: 0.6
},
{
'markerDy': 20,
'textFaceName': 'sans-serif',
'textName': '曹操',
'textFill': '#000',
'textHorizontalAlignment': 'center',
'textSize': 16,
'textDx': 0,
'textDy': 7,
}]
},{
"feature": {
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates":[[114.40157836619869,37.00256520391568],[114.40158440116898,37.00256520391568],[114.4015833953406,37.00257511478341],[114.40171147082106,37.00257457906085],[114.40171180609718,37.0025769898123],[114.40177953187481,37.00257752553486],[114.40177919659868,37.00256466819306],[114.40178389046446,37.00256520391568],[114.40178422574058,37.00255984668931],[114.40177852604643,37.00255984668931],[114.4017781907703,37.002548060790076],[114.40171415303007,37.00254752506734],[114.40171281192556,37.00255020368101],[114.40158440116898,37.00254913223554],[114.40158406589285,37.00255984668931],[114.40157836619869,37.00255931096669]]
}
},
symbol: [{
lineColor: '#34495e',
lineWidth: 2,
polygonFill: '#01a2e6',
polygonOpacity: 0.6
},
{
'markerDy': 20,
'textFaceName': 'sans-serif',
'textName': '朱元璋',
'textFill': '#000',
'textHorizontalAlignment': 'center',
'textSize': 16,
'textDx': 0,
'textDy': 7,
}]
},{
"feature": {
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates":[[114.40162128154293,37.00255020368101],[114.40165983829752,37.00255020368101],[114.40166017357365,37.00256065027335],[114.4016209462668,37.002560382411986]]
}
},
symbol: [{
lineColor: '#34495e',
lineWidth: 2,
polygonFill: '#fef102',
polygonOpacity: 0.6
},
{
'markerDy': 20,
'textFaceName': 'sans-serif',
'textName': '铁木真',
'textFill': '#000',
'textHorizontalAlignment': 'center',
'textSize': 16,
'textDx': 0,
'textDy': 7,
}]
},{
"feature": {
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [[114.40164910946146,37.00257886484113],[114.40164877418533,37.0025673468061],[114.40168163124576,37.0025673468061],[114.40168163124576,37.00257913270238]]
}
},
symbol: [{
lineColor: '#34495e',
lineWidth: 2,
polygonFill: '#fef102',
polygonOpacity: 0.6
},
{
'markerDy': 20,
'textFaceName': 'sans-serif',
'textName': '刘邦',
'textFill': '#000',
'textHorizontalAlignment': 'center',
'textSize': 16,
'textDx': 0,
'textDy': 7,
}]
},{
"feature": {
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates":[[114.40154115054861,37.00260725812936],[114.40155489686981,37.00260591882349],[114.40155389104143,37.002614490380296],[114.40161323491589,37.00261475824138],[114.40161357019201,37.00260886529631],[114.40161994043842,37.00260859743511],[114.40161994043842,37.00260243662828],[114.40161524657265,37.00260243662828],[114.40161524657265,37.002593329347775],[114.40155523214594,37.00259306148658],[114.40155456159368,37.00259949015535],[114.40154081527248,37.00259975801649]]
}
},
symbol: [{
lineColor: '#34495e',
lineWidth: 2,
polygonFill: '#fef102',
polygonOpacity: 0.6
},
{
'markerDy': 20,
'textFaceName': 'sans-serif',
'textName': '秦始皇',
'textFill': '#000',
'textHorizontalAlignment': 'center',
'textSize': 16,
'textDx': 0,
'textDy': 4,
}
]
}, {
"feature": {
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [[114.40155824963108,37.002664848256785],[114.40157803092256,37.002664580395816],[114.40157534871355,37.002669401892916],[114.40158909503475,37.002669401892916],[114.40158775393024,37.002664848256785],[114.40161424074427,37.00266404467388],[114.40161424074427,37.00265788387159],[114.40162664596096,37.00265815173256],[114.40162664596096,37.002643151516196],[114.40161491129652,37.00264288365517],[114.40161424074427,37.00263297279625],[114.40155892018333,37.00263243707414]]
}
},
symbol: [{
lineColor: '#34495e',
lineWidth: 2,
polygonFill: '#fef102',
polygonOpacity: 0.6
},
{
'markerDy': 20,
'textFaceName': 'sans-serif',
'textName': '朱棣',
'textFill': '#000',
'textHorizontalAlignment': 'center',
'textSize': 24,
'textDx': 0,
'textDy': 6,
}
]
},{
"feature": {
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates":[[114.40192001257196,37.00273984928762],[114.40191867146746,37.002551007265055],[114.40192034784809,37.00253573916618],[114.40192604754225,37.002517524588],[114.40193074140802,37.002504131513064],[114.40207558069483,37.002504131513064],[114.40209603253857,37.00252127464856],[114.40210843775526,37.002533060552],[114.40211715493456,37.002545114314984],[114.4021201724197,37.00255341801724],[114.40212117824808,37.00274011714825],[114.40212117824808,37.00274038500899]]
}
},
symbol: [{
lineColor: '#34495e',
lineWidth: 2,
polygonFill: '#4ebeee',
polygonOpacity: 0.6
},
{
'markerDy': 20,
'textFaceName': 'sans-serif',
'textName': '',
'textFill': 'blue',
'textHorizontalAlignment': 'center',
'textSize': 16,
'textDx': 0,
'textDy': 7,
}]
},{
"feature": {
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [[114.40194147024408,37.00262091904719],[114.40193878803507,37.0026131510746],[114.40193878803507,37.0025807398699],[114.40194147024408,37.00257538264472],[114.4019441524531,37.0025748469221],[114.40194716993824,37.00258181131491],[114.40194817576662,37.00261341893574],[114.40194482300535,37.002620651186106]]
}
},
symbol: [{
lineColor: '#34495e',
lineWidth: 2,
polygonFill: '#fef102',
polygonOpacity: 0.6
},
{
'markerDy': 20,
'textFaceName': 'sans-serif',
'textName': '',
'textFill': '#000',
'textHorizontalAlignment': 'center',
'textSize': 16,
'textDx': 0,
'textDy': 7,
}]
},{
"feature": {
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates":[[114.4019666159536,37.002620383325024],[114.40196326319233,37.00261261535232],[114.40196359846846,37.002581543453715],[114.4019666159536,37.00257591836723],[114.40196929816261,37.00257511478341],[114.40197298620001,37.00258261489867],[114.40197332147613,37.00261395465802],[114.40197063926712,37.002620651186106]]
}
},
symbol: [{
lineColor: '#34495e',
lineWidth: 2,
polygonFill: '#fef102',
polygonOpacity: 0.6
},
{
'markerDy': 20,
'textFaceName': 'sans-serif',
'textName': '',
'textFill': '#000',
'textHorizontalAlignment': 'center',
'textSize': 16,
'textDx': 0,
'textDy': 7,
}]
},{
"feature": {
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [[114.40199276749149,37.00262091904719],[114.40198941473022,37.002614490380296],[114.40198941473022,37.00256948969647],[114.40199243221537,37.00256413247044],[114.40199444387213,37.00256386460913],[114.4019991377379,37.00257056114165],[114.4019991377379,37.00261529396366],[114.40199612025276,37.00262091904719]]
}
},
symbol: [{
lineColor: '#34495e',
lineWidth: 2,
polygonFill: '#fef102',
polygonOpacity: 0.6
},
{
'markerDy': 20,
'textFaceName': 'sans-serif',
'textName': '',
'textFill': '#000',
'textHorizontalAlignment': 'center',
'textSize': 16,
'textDx': 0,
'textDy': 7,
}]
},{
"feature": {
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [[114.40201757792488,37.00260993674087],[114.40201456043974,37.002601900905944],[114.40201489571587,37.00256922183516],[114.40201757792488,37.00256440033175],[114.40201992485777,37.00256440033175],[114.40202327761904,37.00256975755778],[114.40202428344742,37.002602704489476],[114.40202126596228,37.00260966887973]]
}
},
symbol: [{
lineColor: '#34495e',
lineWidth: 2,
polygonFill: '#fef102',
polygonOpacity: 0.6
},
{
'markerDy': 20,
'textFaceName': 'sans-serif',
'textName': '',
'textFill': '#000',
'textHorizontalAlignment': 'center',
'textSize': 16,
'textDx': 0,
'textDy': 7,
}]
},{
"feature": {
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates":[[114.40204305891052,37.00261100818548],[114.40203937087313,37.002601633044804],[114.4020403767015,37.00256922183516],[114.40204238835827,37.00256413247044],[114.40204507056728,37.00256413247044],[114.40204942915693,37.00257056114165],[114.40204976443306,37.002604043795344],[114.40204641167179,37.002610204602064]]
}
},
symbol: [{
lineColor: '#34495e',
lineWidth: 2,
polygonFill: '#fef102',
polygonOpacity: 0.6
},
{
'markerDy': 20,
'textFaceName': 'sans-serif',
'textName': '',
'textFill': '#000',
'textHorizontalAlignment': 'center',
'textSize': 16,
'textDx': 0,
'textDy': 7,
}]
},{
"feature": {
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [[114.40206820462004,37.00260993674087],[114.4020651871349,37.00260216876714],[114.40206552241102,37.002568953973906],[114.40206887517229,37.00256413247044],[114.4020715573813,37.00256413247044],[114.40207457486645,37.00256948969647],[114.40207423959032,37.00260565096235],[114.4020715573813,37.00260966887973]]
}
},
symbol: [{
lineColor: '#34495e',
lineWidth: 2,
polygonFill: '#fef102',
polygonOpacity: 0.6
},
{
'markerDy': 20,
'textFaceName': 'sans-serif',
'textName': '',
'textFill': '#000',
'textHorizontalAlignment': 'center',
'textSize': 16,
'textDx': 0,
'textDy': 7,
}]
},{
"feature": {
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [[114.4020940208818,37.00260966887973],[114.40209133867279,37.00260324021181],[114.40209167394892,37.00256948969647],[114.4020940208818,37.00256466819306],[114.40209670309082,37.00256440033175],[114.40209972057596,37.00256948969647],[114.40210005585209,37.002604043795344],[114.40209804419533,37.002610204602064],[114.4020977089192,37.00260993674087]]
}
},
symbol: [{
lineColor: '#34495e',
lineWidth: 2,
polygonFill: '#fef102',
polygonOpacity: 0.6
},
{
'markerDy': 20,
'textFaceName': 'sans-serif',
'textName': '',
'textFill': '#000',
'textHorizontalAlignment': 'center',
'textSize': 16,
'textDx': 0,
'textDy': 7,
}]
}]
}]