GIS工具maptalks开发手册(二)01——渲染点、文字和图片

最新推荐文章于 2022-12-02 23:39:13 发布
最新推荐文章于 2022-12-02 23:39:13 发布
阅读量836 收藏 1
点赞数
分类专栏： 可视化 文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44867717/article/details/128140103
版权

GIS工具maptalks开发手册(二)01——渲染点、文字和图片

1、渲染点

效果

在这里插入图片描述

2、渲染文字

效果

在这里插入图片描述

3、渲染图片

效果

在这里插入图片描述

4.1、html单页面
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>图形 - Marker</title>
<style type="text/css">
    html,
    body {
        margin: 0px;
        height: 100%;
        width: 100%;
    }

    .container {
        width: 900px;
        height: 500px;
        margin: 50px;
    }
</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>

    <script>
        var map = new maptalks.Map('map', {
            center: [-0.113049, 51.498568],
            zoom: 14,
            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 href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>'
            })
        });

        var point = new maptalks.Marker(
            [-0.113049, 51.498568],
            {
                visible: true, // 可见的
                editable: true, // 可编辑的
                cursor: 'pointer', // 光标
                shadowBlur: 0, // 阴影模糊
                shadowColor: 'black', // 阴影颜色
                draggable: false, // 拖动
                dragShadow: false, // display a shadow during dragging (拖动时显示阴影)
                drawOnAxis: null,  // force dragging stick on a axis, can be: x, y (轴上的力拖动杆，可以是：x，y)
                
                //  symbol-记号样式
                // 1、渲染文本
                // symbol: {
                // 文本呈现的样式，默认是: monospace, 当你设置 textFont时会覆盖这个属性
                //     'textFaceName': 'sans-serif',  // 文本面名称
                //     'textName': 'MapTalks', // 文本名称
                //     'textFill': '#34495e',  // 文本填充色（字体颜色） 
               //       textLineSpacing: 1,  // 行距
                //     'textHorizontalAlignment': 'right',  // 文本水平对齐方式
                // 文本标签与marker的距离，也就是与打点的位置的距离
                 //    'textDx': 20,
                //     'textSize': 40  // 文本大小
                // }

                // 2、渲染图片
                // symbol: {
                //     'markerFile': 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', // 标记图片文件地址
                //     'markerWidth': 58,// 标记宽度
                //     'markerHeight': 80, // 标记高度
                //     'markerDx': 0, // 标记X轴
                //     'markerDy': 0, // 标记y轴
                //     'markerOpacity': 1 // 标记不透明度
                // }
            }
        );

        new maptalks.VectorLayer('vector', point).addTo(map);

    </script>
</body>

</html>

效果-渲染图片格式

在这里插入图片描述

代码

index.html

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>图形样式 - 图片标注</title>
<style type="text/css">
  html,
  body {
    margin: 0px;
    height: 100%;
    width: 100%;
  }

  .container {
    width: 900px;
    height: 500px;
    margin: 50px;
  }
</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>
  <script>
    var map = new maptalks.Map('map', {
      center: [-0.113049, 51.49856],
      zoom: 14,
      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 href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>'
      })
    });

    var center = map.getCenter();

    var layer = new maptalks.VectorLayer('vector').addTo(map);

    var marker1 = new maptalks.Marker(
      center.sub(0.009, 0),
      {
        'symbol': {
          'markerFile': './01.svg',
          'markerWidth': 300,
          'markerHeight': 400,
          'markerDx': 0,
          'markerDy': 0,
          'markerOpacity': 1
        }
      }
    ).addTo(layer);

  </script>
</body>

</html>

获取中心点-getCenter()

https://maptalks.org/maptalks.js/api/0.x/Map.html#getCenter

设置中心点-setCenter(coordinate)

https://maptalks.org/maptalks.js/api/0.x/Map.html#setCenter

4.2、vue单页面

index.vue

<template>
  <!-- maptalks渲染线 -->
  <div id="map" class="container"></div>
</template>
<script>
import "maptalks/dist/maptalks.css";
import * as maptalks from "maptalks";
export default {
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
  },
  methods: {
    init() {
       var map = new maptalks.Map('map', {
            center: [-0.113049, 51.498568],
            zoom: 14,
            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 href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>'
            })
        });

        var point = new maptalks.Marker(
            [-0.113049, 51.498568],
            {
                visible: true, // 可见的
                editable: true, // 可编辑的
                cursor: 'pointer', // 光标
                shadowBlur: 0, // 阴影模糊
                shadowColor: 'black', // 阴影颜色
                draggable: false, // 拖动
                dragShadow: false, // display a shadow during dragging (拖动时显示阴影)
                drawOnAxis: null,  // force dragging stick on a axis, can be: x, y (轴上的力拖动杆，可以是：x，y)
                
                //  symbol-记号样式
                // 1、渲染文本
                // symbol: {
                //     'textFaceName': 'sans-serif',  // 文本面名称
                //     'textName': 'MapTalks', // 文本名称
                //     'textFill': '#34495e',  // 文本填充颜色
                //     'textHorizontalAlignment': 'right',  // 文本水平对齐方式
                //     'textSize': 40  // 文本大小
                // }

                // 2、渲染图片
                // symbol: {
                //     'markerFile': 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', // 标记图片文件地址
                //     'markerWidth': 58,// 标记宽度
                //     'markerHeight': 80, // 标记高度
                //     'markerDx': 0, // 标记X轴
                //     'markerDy': 0, // 标记y轴
                //     'markerOpacity': 1 // 标记不透明度
                // }
            }
        );

        new maptalks.VectorLayer('vector', point).addTo(map);
    },
  },
};
</script>
<style lang="scss">
html,
body {
  margin: 0px;
  height: 100%;
  width: 100%;
}
.container {
  width: 1200px;
  height: 700px;
  margin: 50px;
}
</style>
5、vue版-图片
5.1、渲染图片-铺满视野

铺满api

extent: map.getExtent(),  //  图片大小：铺满地图视野

注意：

url链接如果出现跨域，请求头需要进行配置

src/utils/request.js

'Access-Control-Allow-Origin': '*'  // 允许任何域访问

请求响应头

// request拦截器
service.interceptors.request.use(config => {
  // config.mode = 'no-cors',
  config.headers['Access-Control-Allow-Origin']= '*'
  // 是否需要设置 token
  const isToken = (config.headers || {}).isToken === false
  if (getToken() && !isToken) {
    config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际
    try {
      config.headers['orgId'] = store.getters.userInfo.orgId//
    } catch (e) {
      alert('当前orgId不存在，请重新登录！')
      //TODO handle the exception
    }


  }
  return config
}, error => {
  console.log(error)
  Promise.reject(error)
})

后端-Response Headers响应头也需要进行处理：允许任何域访问

在这里插入图片描述

效果1

在这里插入图片描述

index.vue

<template>
  <!-- maptalks初始化 -->
  <div id="map" class="container"></div>
</template>
<script>
import "maptalks/dist/maptalks.css";
import * as maptalks from "maptalks";
export default {
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
  },
  methods: {
    // 初始化
    init() {
      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", // 初始常规主题
          // urlTemplate:"https://map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}", // 彩色主题
          // urlTemplate: 'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}',// 黑色主题
          subdomains: ["a", "b", "c", "d"],
          attribution:
            '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>',
        }),
      });
      console.log("map: ", map);
       let layerImg = new maptalks.ImageLayer("images", [
        {
          url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',  // 饿了么图片
        //   url: this.$store.state.user.imgValue,
          extent: map.getExtent(), // 图片大小
          // extent: [114.40184088740602, 37.002608169667695, 114.4028259092072, 37.00181114116637],  // 左上  右下
          opacity: 0.5, // 不透明度
        },
      ]);
      layerImg.addTo(map);

    },
  },
};
</script>
<style lang="scss">
html,
body {
  margin: 0px;
  height: 100%;
  width: 100%;
}
.container {
  width: 1200px;
  height: 700px;
  margin: 50px;
}
</style>
5.2、渲染图片-限制图片渲染大小

和地图层级结合使用，可以获取坐标数据

效果-限制图片大小

在这里插入图片描述

index.vue

<template>
  <!-- maptalks初始化 -->
  <div id="map" class="container"></div>
</template>
<script>
import "maptalks/dist/maptalks.css";
import * as maptalks from "maptalks";
export default {
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
  },
  methods: {
    init() {
      const map = new maptalks.Map("map", {
        // 默认中心点点位
        center: [116.3972282409668, 39.90960456049752],
        // 缩放层级
        zoom: 18,
        // 倾斜度
        // 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", // 初始常规主题
          // urlTemplate:"https://map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}", // 彩色主题
          // urlTemplate: 'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}',// 黑色主题
          subdomains: ["a", "b", "c", "d"],
          attribution:
            '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>',
        }),
      });
      console.log("map: ", map);

let  extent = map.getExtent();

      // console.log(extent);
      // console.log(extent.xmax); // -0.0012234410202154322
      extent.xmax =
        extent.xmax -
        0.0009520458196448089 -
        0.0013465535936347806 -
        0.0013146624997943945;
      extent.xmin = extent.xmin + 0.0008865151057761977 - 0.0013146624997943945;
      extent.ymax = extent.ymax - 0.0013408400707248802 - 0.0013465535936347806;
      extent.ymin = extent.ymin + 0.0013416043410643397;

       let layerImg = new maptalks.ImageLayer("images", [
        {
          url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',  // 饿了么图片
        //   url: this.$store.state.user.imgValue,
          extent: extent,
          // extent: [114.40184088740602, 37.002608169667695, 114.4028259092072, 37.00181114116637],  // 左上  右下
          opacity: 0.5,
        },
      ]);
      layerImg.addTo(map);

    },
  },
};
</script>
<style lang="scss">
html,
body {
  margin: 0px;
  height: 100%;
  width: 100%;
}
.container {
  width: 1200px;
  height: 700px;
  margin: 50px;
}
</style>
viceen
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
GIS二次开发试题.rar
04-27
GIS开发 地信是地理信息或地理信息系统的简称。是指与空间地理分布有关的信息，它表示地表物体和环境固有的数量、质量、分布特征，联系和规律的数字、文字、图形、图象等的总称。地理信息科学是研究地理信息采集、...
gis二次开发实习总结.doc
12-06
通过本文，我们将对 GIS 二次开发实习的总结，涵盖了 GIS 二次开发的基础知识、开发环境、开发步骤和开发技术等方面的内容。 一、GIS 二次开发基础知识 GIS 二次开发是指在现有的 GIS 软件基础上，进行二次开发和...
GIS工具maptalks开发手册(一)——hello world初始化
weixin_44867717的博客
12-01 2708
gis
maptalks 开发手册-入门篇
用针戳左手中指指头的博客
01-15 9351
文章目录为何使用maptalksAPI初始化Symbol 属性创建图层放大缩小等工具绘制区域面(几何图形)面的交互（事件监听）绘制mark绘制三维图形注意点锁定视角 为何使用maptalks 做过地图的小伙伴们都知道，每个地图框架产商都与自家的地图资源进行绑定，如非常受欢迎的mapBox、高德、百度、腾讯等，你必须注册他们产品，获取key，然后调用的api，才能进行地图的相关操作，虽然带来了便利， 但同时这也存在这限制。 那么有人可能要问，那这么方便，就用他们的，就不用自己开发了不是，为什么还用其他的呢？
GIS工具maptalks开发手册(五)02-用JSON载入地图——json格式绘制多个面之全量工具版，包括-shape绘制、disable关闭、clear清空和图层之添加、移除、显示、隐藏
weixin_44867717的博客
12-02 566
gis
GIS工具maptalks开发手册(二)03-02——示例之json格式添加绘制工具、渲染点、文字和多个面
weixin_44867717的博客
12-01 567
gis
maptalk(2) -marker文字描述以及区块着色，背景卫星图
gc0704012047的专栏
09-24 923
maptalk区块着色学习demo
Maptalks官方demo和API地址
GaoXiR的博客
03-23 3888
官方demo:https://maptalks.org/examples/cn/map/load/ API: https://maptalks.org/maptalks.js/api/0.x/Map.html
ewr.rar_GIS 二次开发_gis
09-19
GIS（Geographic Information System，地理信息系统）二次开发是GIS领域中的一个重要环节，它是指在现有的GIS平台上，通过编程语言或专用开发工具进行扩展和定制，以满足特定需求的过程。本讲义“GIS 二次开发初级...
Vissim使用手册+二次开发手册.rar
06-14
这份“Vissim使用手册+二次开发手册.rar”压缩包包含了两个重要的文档，分别是“vissim+5.00使用手册.pdf”和“VISSIM520_COM_中文.pdf”，它们将帮助用户全面了解Vissim的基础操作以及高级的二次开发技术。...
examples:maptalks 示例
07-24
maptalks 示例 源代码库。 文件夹 . | - assets/ # assets, CSS/images | - build/examples.json # examples index json file | - dist/ # distribution folder, root for gh-pages branch | - layouts/ # templates | - locales/ # i18n configs | - src/ # examples sources 设置 在根目录 npm install 跑步 gulp 将assets复制到dist/ 在src编译源码，生成 html 文件到dist 在20001端口启
《GIS二次开发实习》课程教学大纲.docx
最新发布
12-18
GIS 二次开发实习课程旨在使学生掌握 GIS 二次开发的基本原理、方法和基本工具，增强实际动手能力、分析问题、解决问题的能力和创新能力。 课程基本情况 * 教学周数：2周 * 学分：2 * 开课学期：第5学期 * 课程...
shixi4.rar_GIS二次开发
07-14
在GIS（地理信息系统）领域，二次开发是指在现有的GIS软件平台上，利用其提供的API（应用程序接口）或SDK（软件开发工具包）进行定制化开发，以满足特定业务需求的过程。"shixi4.rar_GIS二次开发"这个压缩包文件很...
Skyline三维GIS平台二次开发手册V61
09-28
本手册《Skyline三维GIS平台二次开发手册V61》是针对Skylinesoft公司的产品进行深入开发的指南，适用于开发者和有编程经验的GIS专业人士。 在Skyline的二次开发中，你可以实现以下关键知识点： 1. **API接口**：...
ArcGIS_VBA.rar_GIS 二次开发_GIS二次开发_arcgis vba_arcgisVBA_gis
09-19
GIS（Geographic Information System，地理信息系统）二次开发是利用GIS软件提供的开发工具和技术，自定义功能、创建应用程序或解决特定地理问题的过程。在这个领域，ArcGIS是业界广泛使用的平台，其VBA（Visual ...
maptalks上加载自定义标记
七月❤的博客
02-03 1112
引入插件 import * as maptalks from 'maptalks' 引入css文件 import 'maptalks/dist/maptalks.css' 加载地图 this.map = new maptalks.Map('map', { center: [center.x, center.y], //地图中心点的xy坐标 zoom: 16, pitch: 60, minZoom: 1, maxZoom..
vue引入maptalks地图及聚合效果
热门推荐
liona_koukou的博客
11-21 1万+
  1、安装maptalks.js npm install maptalks --save 2、安装聚合mapkercluster npm install maptalks.markercluster 3、vue页面引入 import * as maptalks from 'maptalks' import {ClusterLayer} from 'maptalks.marker...
vue-baidu-map自定义颜色
qq_36529240的博客
08-16 2166
一、自定义样式 data() { return { //自定义地图颜色 styleJson: [ { featureType: "water", elementType: "all", stylers: { color: "#021019", }, }, { featureType: "highway",
GIS工具maptalks开发手册(二)01-11——渲染文字及参数注释
weixin_44867717的博客
12-01 433
gis
GIS二次开发：地图构成详解——Map, Layer与Element
在GIS二次开发中，理解Map对象的双重身份——数据管理与显示——有助于开发者更有效地操作和定制地图内容。 地图对象的底层实现涉及MxDocument和MapFrame，MapFrame作为框架元素，管理并组织地图内容。地图由图层和...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值