GIS工具maptalks开发手册(二)03-02——示例之json格式添加绘制工具、渲染点、文字和多个面
layer参数——https://maptalks.org/maptalks.js/api/0.x/Layer.html
1、json格式渲染点和面
效果-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: 900px;
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="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": -0.113049,
"y": 51.49856800000001
},
"zoom": 13
},
"baseLayer": {
"type": "TileLayer",
"id": "base",
"options": {
"urlTemplate": "http://{s}.tile.osm.org/{z}/{x}/{y}.png",
"subdomains": ["a", "b", "c"]
}
},
"layers": [
{
"type": "VectorLayer",
"id": "v",
"geometries": [{
"feature": {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates":
[-0.088080, 51.502500]
}
}
}, {
"feature": {
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[-0.131049, 51.502500],
[-0.107049, 51.502500],
[-0.107049, 51.497500],
[-0.131049, 51.497500],
[-0.131049, 51.502500]
]
}
},
symbol: [{
lineColor: '#34495e',
lineWidth: 2,
polygonFill: 'rgb(135,196,240)',
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": [
[
[-0.141049, 51.502500],
[-0.131920, 51.502500],
[-0.131820, 51.494500],
[-0.141049, 51.494500],
[-0.141049, 51.502500]
]
]
}
},
symbol: [{
lineColor: '#34495e',
lineWidth: 2,
polygonFill: 'rgb(135,196,240)',
polygonOpacity: 0.6
},
{
'markerDy': 20,
'textFaceName': 'sans-serif',
'textName': '水泵房',
'textFill': 'blue',
'textHorizontalAlignment': 'center',
'textSize': 16,
'textDx': 0,
'textDy': 4,
}
]
}, {
"feature": {
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[-0.141049, 51.511500],
[-0.107049, 51.511500],
[-0.107049, 51.503800],
[-0.141049, 51.503800],
[-0.141049, 51.511500]
]
}
},
symbol: [{
lineColor: '#34495e',
lineWidth: 2,
polygonFill: 'yellow',
polygonOpacity: 0.6
},
{
'markerDy': 20,
'textFaceName': 'sans-serif',
'textName': '车库',
'textFill': '#000',
'textHorizontalAlignment': 'center',
'textSize': 24,
'textDx': 0,
'textDy': 6,
}
]
}]
}]
};
maptalks.Map.fromJSON('map', mapJSON);
// document.getElementById('json').innerHTML = JSON.stringify(mapJSON);
</script>
</body>
</html>
2、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: 900px;
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="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": -0.113049,
"y": 51.49856800000001
},
"zoom": 13
},
"baseLayer": {
"type": "TileLayer",
"id": "base",
"options": {
"urlTemplate": "http://{s}.tile.osm.org/{z}/{x}/{y}.png",
"subdomains": ["a", "b", "c"]
}
},
"layers": [{
"type": "VectorLayer",
"id": "v",
"geometries": [{
"feature": {
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[-0.131049, 51.502500],
[-0.107049, 51.502500],
[-0.107049, 51.497500],
[-0.131049, 51.497500],
[-0.131049, 51.502500]
]
}
},
symbol: [{
lineColor: '#34495e',
lineWidth: 2,
polygonFill: 'rgb(135,196,240)',
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": [
[
[-0.141049, 51.502500],
[-0.131920, 51.502500],
[-0.131820, 51.494500],
[-0.141049, 51.494500],
[-0.141049, 51.502500]
]
]
}
},
symbol: [{
lineColor: '#34495e',
lineWidth: 2,
polygonFill: 'rgb(135,196,240)',
polygonOpacity: 0.6
},
{
'markerDy': 20,
'textFaceName': 'sans-serif',
'textName': '水泵房',
'textFill': 'blue',
'textHorizontalAlignment': 'center',
'textSize': 16,
'textDx': 0,
'textDy': 4,
}
]
}, {
"feature": {
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[-0.141049, 51.511500],
[-0.107049, 51.511500],
[-0.107049, 51.503800],
[-0.141049, 51.503800],
[-0.141049, 51.511500]
]
}
},
symbol: [{
lineColor: '#34495e',
lineWidth: 2,
polygonFill: 'yellow',
polygonOpacity: 0.6
},
{
'markerDy': 20,
'textFaceName': 'sans-serif',
'textName': '车库',
'textFill': '#000',
'textHorizontalAlignment': 'center',
'textSize': 24,
'textDx': 0,
'textDy': 6,
}
]
}]
}]
};
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();
}
}
]
}).addTo(map);
// document.getElementById('json').innerHTML = JSON.stringify(mapJSON);
</script>
</body>
</html>