zoukankan      html  css  js  c++  java
  • vue 加载天地图

    <template>
      <div id="viewDiv"></div>
    </template>
     
    <script>
    import { loadModules } from "esri-loader";
    
    export default {
      data() {},
      methods: {
        //创建地图
        createMapView: function () {
          const options = {
            url: " /api/arcgis/API/4.15/init.js",
            css: "/api/arcgis/API/4.15/esri/themes/light/main.css",
          };
          // esriConfig.request.corsEnabledServers.push("localhost:80/arcgis/API/4.15/")
          loadModules(
            ["esri/Map", "esri/views/MapView", "esri/layers/WebTileLayer"],
            options
          )
            .then(([Map, MapView, WebTileLayer]) => {
              var tiledLayer = new WebTileLayer({
                urlTemplate:
                  "http://{subDomain}.tianditu.gov.cn/DataServer?T=vec_w&x={col}&y={row}&l={level}&tk=aeae35f8750027dc9790a7437c5ec3c0",
                subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
              });
    
              var tiledLayer_poi = new WebTileLayer({
                urlTemplate:
                  "http://{subDomain}.tianditu.gov.cn/DataServer?T=cva_w&x={col}&y={row}&l={level}&tk=aeae35f8750027dc9790a7437c5ec3c0",
                subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
              });
    
              var map = new Map({
                basemap: {
                  baseLayers: [tiledLayer, tiledLayer_poi],
                },
              });
    
              var view = new MapView({
                container: "viewDiv",
                map: map,
                zoom: 12,
                center: [116.402544, 39.915599],
              });
    
              //   view.ui.components = []; //清除掉地图左上角默认的缩放图标
            })
            .catch((err) => {
              this.$message("地图创建失败," + err);
            });
        },
      },
      mounted: function () {
        this.createMapView();
      },
    };
    </script>
     
    <style>
    #viewDiv {
      position: absolute;
       100%;
      height: 100%;
    }
    </style>
    

      需要esri-loader(npm i esri-loader--save-dev)

      tk:去天地图注册,创建浏览器端应用即可获得

      /api/为http://localhost:80/,解决跨域

      t0-t7:天地图地图服务二级域名

    参考

  • 相关阅读:
    iOS开发UI篇—懒加载
    iOS开发UI篇—简单的浏览器查看程序
    iOS开发UI篇—transframe属性(形变)
    iOS开发UI基础—手写控件,frame,center和bounds属性
    iOS开发UI篇—Button基础
    Foundation框架—集合
    Foundation框架—字符串
    Foundation框架—结构体
    ios 工程配置统一增加类的前缀(知识点也只能算知识点)
    Runtime 函数 Swizzling 改变OC方法的调度顺序
  • 原文地址:https://www.cnblogs.com/jiang2020/p/13507281.html
Copyright © 2011-2022 走看看