GIS工具maptalks开发手册(二)03-02——示例之json格式添加绘制工具、渲染点、文字和多个面

最新推荐文章于 2023-05-16 10:53:29 发布
最新推荐文章于 2023-05-16 10:53:29 发布
阅读量578 收藏
点赞数
分类专栏： 可视化 文章标签： json 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44867717/article/details/128140509
版权

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>
viceen
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
json可视化工具 加强版（实现视图增删改）
03-18
json可视化工具
maplibre 开源gis地图工具 heatmap 热力图html前端代码示例
最新发布
07-20
MapLibre是一个开源的GIS地图库，它提供了丰富的地图绘制功能，包括热力图的创建。这个示例是关于如何使用MapLibre在HTML前端实现热力图的代码实例。 首先，MapLibre是Mapbox GL JS的一个分支，它是一个基于WebGL的...
webgis开发实例_maptalk.three实例化尝试
weixin_39887846的博客
12-12 648
   最近公司项目开始做三维的项目，出于易用性考虑选用了maptalks和maptalks.three。    maptalks是一款国内开发者开发的开源webgis框架，maptalks.three是一个基于maptalks的三维插件，通过这个库魄爷我可以比较方便的使用three的方式来绘制想要的三维效果。开发过程中遇到不少问题，比较麻烦得是大量mesh绘制导致速度变慢和内存暴增，通常的解决问题...
mapbox,使用maptalks绘制3D建筑图形
jinfeng_yu的博客
10-24 837
mapbox&maptalks
GIS工具maptalks开发手册(五)02-用JSON载入地图——json格式绘制多个面之全量工具版，包括-shape绘制、disable关闭、clear清空和图层之添加、移除、显示、隐藏
weixin_44867717的博客
12-02 580
gis
GIS工具maptalks开发手册(一)——hello world初始化
weixin_44867717的博客
12-01 2753
gis
SuperMap iClient for 3D 添加和保存点对象
12-13
2. **添加点对象**：在3D场景中，添加点对象通常涉及到以下几个步骤： - 鼠标绘制：用户可以通过鼠标在3D视图上点击或拖动来创建点对象。通常，软件会提供一个监听鼠标事件的机制，当用户按下鼠标并在合适位置释放...
陕西省省市地图js和json文件
08-06
本文将详细解析“陕西省省市地图js和json文件”这一资源的相关知识点，包括Echarts、JavaScript（js）、JSON以及地图数据的处理和展示。 首先，Echarts是一个由百度开发的开源JavaScript图表库，它提供了丰富的图表...
贵州省省市地图js和json文件
07-31
标题中的“贵州省省市地图js和json文件”表明这是一个与地理信息系统(GIS)相关的项目，具体是利用JavaScript（js）和JSON数据格式来呈现贵州省各市级行政区域的地图。JavaScript是一种广泛用于网页和网络应用的编程...
maptalksjs一个轻的JavaScript库来创建集成的2D3D地图
08-10
2. **多种数据格式兼容**：支持GeoJSON、TopoJSON等多种地理数据格式，方便数据导入和地图渲染。 3. **丰富的图层类型**：包括点、线、面、图像、视频等图层，可以自由组合，展示复杂的数据信息。 4. **高性能渲染...
JSON渲染引擎Tempo.zip
07-19
Tempo 是个轻量级的JSON渲染引擎(只有4kb)，使用它可以以纯HTML的方式来构建数据呈现。 使用JSON作为数据源时经常是会在JS中解析JSON，然后拼成HTML呈现数据。而 Tempo 可以实现 HTML 与 JavaScript 的完全分离，也支持使用AJAX获取数据再用 Tempo 呈现。它对嵌套的数据模板也能够解析并呈现。 标签：Tempo
GIS工具maptalks开发手册(二)01——渲染点、文字和图片
weixin_44867717的博客
12-01 870
gis
maptalks 开发手册-入门篇
用针戳左手中指指头的博客
01-15 9477
文章目录为何使用maptalksAPI初始化Symbol 属性创建图层放大缩小等工具绘制区域面(几何图形)面的交互（事件监听）绘制mark绘制三维图形注意点锁定视角 为何使用maptalks 做过地图的小伙伴们都知道，每个地图框架产商都与自家的地图资源进行绑定，如非常受欢迎的mapBox、高德、百度、腾讯等，你必须注册他们产品，获取key，然后调用的api，才能进行地图的相关操作，虽然带来了便利， 但同时这也存在这限制。 那么有人可能要问，那这么方便，就用他们的，就不用自己开发了不是，为什么还用其他的呢？
[three] | 基于 maptalks + three 的三维城市示例
啊嘞嘞的博客
07-04 3484
前段时间抽空补了补webgl的知识,发现太难了还是准备从threeJs入门 网上看了一些案例和开源项目，自己也准备写一些学习的示例 基于地图发现maptalks有结合three的案例 地址 项目更新比较频繁，用的开发者也不多，试了下还是踩了不少坑 效果 网上找了一些比较炫 shader 等熟悉了准备后续加进来看看 ...
vue集成maptalk实现geojson3D渲染
GaoXiR的博客
03-17 1094
//实例化地图对象 let map = new maptalks.Map("map",{ center: [13.416935229170008, 52.529564137540376], zoom: 20, dragPitch : true, //allow map to drag rotating, true by default ...
html5map引擎,Maptalks: Maptalks 项目是一个 HTML5 的地图引擎, 基于原生 ES6 Javascript 开发： 二三维一体化地图, 通过二维地图的旋转 /倾斜增加三维...
weixin_30010773的博客
06-04 281
A light JavaScript library to create integrated 2D/3D maps.2D/3D: Integrated 2D/3D maps.Open and pluggable: Easy to extend with techs you may love as plugins.Performant: Can smoothly render tens ...
maptalks 使用ArcCurve和LineString 绘制台风风圈
ccccc_cc_的博客
05-16 519
使用ArcCurve绘制了4个圆弧，然后使用LineString进行连接。
通过json文件渲染到页面
wang159477的博客
02-23 2622
通过json文件渲染到页面 1.为了方便获取把json放到public文件夹里面 2.获取数据 created() { this.$http.get("/list.json").then((res) => { console.log(res); this.arr = res.data.result; }); }, 3.然后开始渲染页面，这个是图片九宫格，使用了懒加载 <van-grid :column-num="2"> <
gin框架02--json渲染
脚步不能达到的地方，眼光可以达到；眼光不能达到的地方，精神可以飞到
03-16 984
gin框架01--json渲染介绍json 渲染案例注意事项说明 介绍 Gin 框架对json支持的较晚上，开发人员可以按需选择多种 json 格式返回。 使用 AsciiJSON 生成具有转义的非 ASCII 字符的 ASCII-only JSON， 使用 PureJSON 输出纯json且不会转码，使用 IndentedJSON 输出可以缩进的 json信息。更多详细内容可以在 context.go 中寻找答案。 json 渲染案例 案例： package main import ( "github
GIS二次开发：地图构成详解——Map, Layer与Element
GIS二次开发中的地图构成是一个关键环节，它涉及到地图的三个核心组件：地图（Map）、图层（Layer）和元素（Element）。地图是GIS的核心概念，是GIS应用的重要输出形式，用户在ArcMap中看到的数据视图就是Map对象的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值