npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@mapgis/webclient-mapboxgl-plugin

v17.2.0

Published

开发时需要引入MapGIS Client for JavaScript(Mapboxgl)开发包;其中包括必备的 CSS 文件和 JS 文件;

Downloads

216

Readme

1、获取 MapGIS Client for JavaScript(Mapboxgl) 开发包

开发时需要引入MapGIS Client for JavaScript(Mapboxgl)开发包;其中包括必备的 CSS 文件和 JS 文件;

开发库分为正式发行版和Beta版;

  • 正式版:面向公网用户,半年发行一次,发行后不会增加新功能,仅会修订BUG
  • Beta版:面向内网用户,每周发行一次,会修订BUG并增加新功能 下面分别介绍两种版本包的获取方式:

1.1、正式发行版及其更新包

1.1.1、文件方式引入

前往司马云官网下载MapGIS Client for JavaScript开发库

以10.7.0.10为例,其中:

  • mapgis-client-for-javascript-dist-v10.7.0.10.rar为开发库

  • mapgis-client-for-javascript-all-v10.7.0.10.rar为开发库+示例站点 Webclient-Mapboxgl-Plugin所需开发包位于如下文件夹中

  • webclient-mapboxgl-plugin库:mapgis-client-for-javascript-all-v10.7.0.10\dist\cdn\zondyclient\webclient-mapboxgl-plugin.min.js

  • Mapboxgl库:mapgis-client-for-javascript-all-v10.7.0.10\dist\cdn\mapboxgl 之后请将webclient-mapboxgl-plugin.min.js文件和mapboxgl文件夹拷贝出来,放入项目的静态资源目录

1.1.2、npm 方式引入

通过公网NPM的方式进行安装

npm install @mapgis/webclient-mapboxgl-plugin

1.2、Beta版

1.2.1、文件方式引入

请前往内网开发库下载Webclient-Mapboxgl-Plugin相关开发包

1.在该网页中请先选择要下载的版本

2.之后点击相应的版本号,在右侧点击下载按钮,下载压缩包

开发包位于如下文件夹中

  • webclient-mapboxgl-plugin库:webclient-mapboxgl-plugin-17.0.0\package\dist\webclient-mapboxgl-plugin.min.js
  • Mapboxgl库:mapboxgl-17.0.0\package\dist

请将mapboxgl-17.0.0\package\dist改名为mapboxgl,之后将webclient-mapboxgl-plugin.min.js

文件和mapboxgl文件夹拷贝出来,放入项目的静态资源目录

1.2.2、npm 方式引入

请先将npm源切换为内网:

npm set registry http://192.168.11.130:4873/

通过内网NPM的方式进行安装

npm install @mapgis/webclient-mapboxgl-plugin

2、如何引入开发库

2.1、文件方式引入

在index.html中引入引擎库和插件库

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <!--引擎库-->
    <link rel="stylesheet" href="http://{ip}:{port}/{你的路径}/mapboxgl/mapbox-gl.css">
    <script src="http://{ip}:{port}/{你的路径}/mapboxgl/mapbox-gl.js"></script>
    <!--plugin库-->
    <script src="http://{ip}:{port}/{你的路径}/zondyclient/webclient-mapboxgl-plugin.min.js"></script>
</head>
</html>

2.1、npm 方式引入

通过npm的方式安装@mapgis/webclient-mapboxgl-plugin插件库

npm install @mapgis/webclient-mapboxgl-plugin

3、初始化场景视图

3.1、文件方式引入

在项目的css文件中设置地图视图容器的样式,否则地图视图无法显示

/*设置地图视图的样式,一定要设置否则地图无法显示*/
#你的地图视图的id {
    width: 100%;
    height: 100%;
    position: absolute;
}

初始化地图视图对象

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
     <!--引擎库-->
    <link rel="stylesheet" href="http://{ip}:{port}/{你的路径}/mapboxgl/mapbox-gl.css">
    <script src="http://{ip}:{port}/{你的路径}/mapboxgl/mapbox-gl.js"></script>
    <!--plugin库-->
    <script src="http://{ip}:{port}/{你的路径}/zondyclient/webclient-mapboxgl-plugin.min.js"></script>
    <style>
      /*设置地图视图的样式,一定要设置否则地图无法显示*/
      #你的地图视图的id {
        width: 100%;
        height: 100%;
        position: absolute;
      }
    </style>
    <script>
      // 初始化图层管理容器
      const map = new Zondy.Map()
      // 初始化地图视图对象
      const mapView = new Zondy.MapViewMapboxgl({
        // 视图id
        viewId: '你的地图视图的id',
        // 图层管理容器
        map: map
      })
    </script>
</head>
<!--地图视图容器div-->
<div id="你的地图视图的id">
</div>
</html>

3.2、npm 方式引入

以VUE项目为例,React和Angular类似

在项目的css文件中设置地图视图容器的样式,否则地图视图无法显示

/*设置地图视图的样式,一定要设置否则地图无法显示*/
#你的地图视图的id {
    width: 100%;
    height: 100%;
    position: absolute;
}

在你的vue组件的template中设置地图视图容器的div元素

<!--地图视图容器div-->
<div id="你的地图视图的id">
</div>

引入需要的构造函数

import { MapViewMapboxgl } from '@mapgis/webclient-mapboxgl-plugin'
import { Map } from "@mapgis/webclient-common"

在mounted生命周期中初始化地图视图

// 初始化图层管理容器
const map = new Map();
// 初始化地图视图对象
const mapView = new MapViewMapboxgl({
  // 视图id
  viewId: "你的地图视图的id",
  // 图层管理容器
  map: map
});

4、@mapgis/webclient-leaflet-plugin 版本说明

4.1、正式版

v17.2.0

更新说明:

  1. 功能新增
  • 二维(MapboxGL)引擎支持不同裁图方式瓦片叠加显示
  • 二维(MapboxGL)引擎ArcGIS地图服务图层支持出一张图模式
  • 二维(MapboxGL)引擎图层支持裁剪功能
  • 二维(MapboxGL)引擎支持SimpleFillSymbol支持简单填充设置样式
  • 二维(MapboxGL)引擎支持ArcGIS瓦片图层
  1. 功能优化
  • 二维(MapboxGL)引擎优化矢量瓦片加载效果

v17.0.0

更新说明:

  1. 功能新增
  • 新增支持自定义空间参考系图层服务
  • 新增支持自定义裁图方式图层服务
  • 地图服务支持一张图出图模式

备注:

@mapgis/mapbox-gl v17.0.0 基于官方 Mapbox-GL v1.10.0 进行了定制和扩展开发